| name | remotion-design |
| description | Visual design system for Remotion video. Covers anti-slop aesthetics, typography for motion, color palettes, safe areas, temporal design thinking, and audio-sync visual pacing. Use when deciding how a video should LOOK and FEEL. Does NOT cover React component structure or animation math — load remotion-core for that.
|
| requires | Eye for contrast and spacing. |
| always_load | ["rules/03-temporal-design.md","rules/04-audio-sync.md","rules/05-anti-slop-aesthetics.md","rules/07-prompt-templates.md"] |
Remotion Design
Scope
This skill owns the visual language of Remotion video:
- Typography choices for readability at 30fps
- Color direction and palette constraints
- Safe areas and responsive composition
- Audio-driven visual pacing
- Prompt templates for common video types
It does NOT own React patterns, animation APIs, or render infrastructure. Load remotion-core alongside this skill for technical implementation.
Quick Reference
| Problem | Load Rule |
|---|
| Mobile safe areas, frame timing, responsive layout | 03-temporal-design.md |
| Voiceover sync, captions, beat detection, spectrum | 04-audio-sync.md |
| Typography, color, banned patterns, motion principles | 05-anti-slop-aesthetics.md |
| Ready-made prompts for social, demo, explainer | 07-prompt-templates.md |
Core Philosophy: Anti-Slop
- BANNED: Inter, Roboto, system fonts, purple gradients, emojis as icons, linear animations
- MANDATED: Unique typography, context-specific palettes, spring physics, intentional asymmetry
Temporal Design Principles
- Audio-First Pacing. Lock audio duration before animating. Visuals follow sound.
- The 300ms Rule. Transitions need ~9 frames at 30fps to feel fluid.
- The Hook Window. First 45 frames (1.5s) determine short-form retention.
- Design for the Pause. Any single frame should look intentional when paused.
