remotion-video-director

What this skill does

# Remotion Video Director

An interactive skill that guides users from "I need a video" to a rendered MP4 with music, through expert deliberation, scenario design, and battle-tested Remotion patterns.

## When to Use

Trigger this skill when the user:
- Wants to create a video using Remotion
- Needs a product demo, launch video, recurring content template, marketing video, or narrative intro
- Says "I need a video", "make a video for...", "create a Remotion video", "video as code"
- Wants help thinking through what video to make or how to structure it
- Has a Remotion project and wants expert review

## Relationship to Official Remotion Skill

The official `remotion-dev/skills` package teaches Claude the Remotion API (37 rule files covering animations, audio, captions, transitions, etc.). This skill handles the **creative and strategic layer** on top:

- Official skill: "How do I use `interpolate()`?" (technical reference)
- Video Director: "What video should I make and how should it flow?" (creative process)

If the official Remotion skill is installed, leverage it for API-specific details. If not, the `references/remotion-patterns.md` and `references/component-library.md` in this skill provide sufficient Remotion knowledge to build production videos.

---

## Four-Phase Workflow

### Phase 1: Strategic Framing

**Goal**: Understand what the user needs through conversation, then assemble expert perspectives.

**CRITICAL**: This phase is INTERACTIVE. Ask questions one at a time and WAIT for answers. Do NOT dump all questions at once or auto-proceed without user input.

#### Step 1 - Discovery (Conversational)

Start with a single open question:

> "What is this video for? Tell me about the idea, who will watch it, and what you want them to do after."

**WAIT** for the user's answer. Then ask targeted follow-ups based on what's missing:

- If audience is unclear: "Who specifically will watch this? (customers, team, investors, social media?)"
- If desired action is unclear: "After watching, what should viewers DO? (sign up, understand something, share?)"
- If no constraints mentioned: "Any constraints I should know? Duration, brand colors, existing assets, deadline?"
- If they mention a product: "Can you share screenshots of the product/interface?"

Do NOT proceed until you understand: purpose, audience, desired action, and constraints.

#### Step 2 - Creative Direction

Present the creative direction options and ask the user to pick:

| Style | Feel | Best For |
|-------|------|----------|
| **Minimal/Jobs** | Black bg, dramatic pauses, one idea per frame, Impact font | Product launches, big ideas, keynotes |
| **Data-Rich/Bloomberg** | Dark navy bg, animated charts, dense but organized | Meeting recaps, reports, dashboards |
| **Warm/Narrative** | Warm tones, personal quotes, serif accents | Course intros, team stories, community |
| **Terminal/Hacker** | Dark code theme, typewriter, monospace everywhere | Technical demos, dev tools, engineering |
| **Custom** | User describes or provides reference screenshots/videos | Anything specific |

> "Which style direction fits your video? Or share screenshots of videos you've seen that you liked."

**WAIT** for answer.

Read `references/video-archetypes.md` for the full spec of the chosen direction (colors, fonts, animation style, timing rules).

#### Step 3 - Reference Input (Optional)

> "Do you have any reference videos, screenshots, or visual styles you'd like me to emulate? (Skip if none)"

If the user provides references, analyze them for: color palette, typography, animation speed, layout density, overall mood. Incorporate these into the creative brief.

**WAIT** for answer or skip confirmation.

#### Step 4 - Expert Panel Assembly

Based on the selected archetype (from `references/video-archetypes.md`) and creative direction, assemble a panel of 3-4 experts from `references/expert-definitions.md`.

**Generate expert perspectives** - for each expert, generate 2-3 sentences:
- One specific recommendation
- One risk to watch for

Keep this concise. Present as a brief roundtable. Highlight only where experts **disagree** (flags a decision the user needs to make).

#### Step 5 - Creative Brief

Synthesize into a structured brief:

```
## Creative Brief

**Purpose**: [one sentence]
**Audience**: [who, what they care about]
**Core Message**: [the ONE thing viewers should remember]
**Desired Action**: [what viewers should do next]
**Duration**: [seconds] ([frames] frames at 30fps)
**Creative Direction**: [selected style - Minimal/Jobs, Bloomberg, etc.]
**Emotional Arc**: [e.g., curiosity -> proof -> confidence -> action]

## Audio Strategy
- Music: [ambient/upbeat/dramatic/sparse] from Pixabay
- Voice-over: [yes/no]
- Music mood: [description matching creative direction]

## Scene Sequence
| # | Scene | Duration | Purpose |
|---|-------|----------|---------|
| 1 | ...   | Xs       | ...     |

## Data Model (if applicable)
[What's parameterized vs hardcoded - the reusable template structure]

## Visual Style
- Theme: [creative direction name]
- Background: [color]
- Colors: [primary, accent, secondary]
- Typography: [heading font, body font, mono font]
- Animation feel: [snappy/gentle/dramatic/typewriter]
```

> "Here's the creative brief. Want to adjust anything before we design scenes?"

**WAIT** for confirmation or adjustments.

---

### Phase 2: Scenario Design

**Goal**: Turn the brief into a detailed scene-by-scene scenario.

#### Step 6 - Scene Design

For each scene in the sequence, specify:
- **Content**: Exact text, data, visuals
- **Components**: Which reusable components to use (from `references/component-library.md`)
- **Animation**: Entry/exit animations, timing in frames
- **Transitions**: Cross-dissolve between all scenes (8-12 frames)

Read `references/remotion-patterns.md` for critical Remotion constraints and premium styling patterns.

**Scene Focus Rule**: Each scene must serve ONE idea that connects to the core message. If a scene is tangential to the core message, CUT IT. Fewer focused scenes are always better than many scattered ones.

**Frame Budget**: Map out the entire timeline:
```
const TIMING = {
  scene1: { start: 0, dur: 6 },   // Hook
  scene2: { start: 6, dur: 10 },  // ...
  // Total must match composition durationInFrames / fps
};
```

#### Step 7 - Data Architecture

If the video is data-driven (recurring report, multi-variant marketing):
- Design the config object that changes between renders
- Identify what stays constant (visual template) vs what varies (content)
- Show the user the config shape and confirm

Example pattern (from WeeklyIntro):
```typescript
const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... fields that change weekly
};
```

#### Step 8 - User Confirmation

Present the complete scenario.

> "Ready to build, or want to adjust anything?"

**WAIT** for confirmation.

---

### Phase 3: Build

**Goal**: Create the Remotion project and render the first version.

**CRITICAL**: Never run any command that launches an interactive CLI wizard or prompts for input. This includes `npx create-video`, `npx remotion init`, `npm init`, or bare `npx remotion render` without arguments. Always create files manually and pass all arguments explicitly to CLI commands.

#### Step 9 - Scaffold Project

Create the Remotion project structure manually (do NOT use scaffolding wizards - see Phase 3 header):
```
<project>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # or <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # if data-driven
├── public/
│   ├── music.mp3           # background music
│   └── illustrations/      # if using background images
├── package.json
├── tsconfig.json
└── remotion.config.ts
```

Inst