video-producer

What this skill does

## When to use

Use this skill when the user provides a **video brief** — a description of a complete video with multiple scenes or a narrative arc.

**Triggers:** "create a promo video", "make a product demo", "I need a 30-second ad", "build a social media animation", or any prompt describing a multi-scene video.

**Do NOT use for:**
- Single animation effects → use `gsap-animation`
- Visual background components → use `react-animation`
- Non-video tasks

## Skill Relationships

```
video-producer (this skill)       ← orchestration: what story, which scenes
├── gsap-animation                ← animation: text splits, SVG drawing, timeline orchestration
├── spring-animation              ← physics: bouncy entrances, elastic trails, organic motion
├── react-animation               ← visuals: Aurora, Silk, particles, grain
└── Remotion                      ← engine: rendering, composition, sequences
```

## Workflow

Initial request: $ARGUMENTS

### Phase 1: Brief Intake

Extract from the user's request. Use AskUserQuestion for any missing **required** fields.

| Field | Required | Default | Example |
|-------|:--------:|---------|---------|
| Product / brand name | Yes | — | "Topview" |
| Video type | Yes | SaaS Promo | SaaS Promo / Typographic / Social Overlay |
| Core messages (2-4) | Yes | — | "AI-powered editing", "No coding required" |
| Emotional tone | Yes | — | Urgent / Reassuring / Exciting / Professional / Rebellious / Warm / Playful |
| Memory anchor | Yes | — | "The single image viewers will remember 30s later" |
| Target audience | No | General | "Developers", "Marketers" |
| Duration | No | Template default | "25 seconds" |
| Resolution | No | 1920x1080 | 1080x1080 for square |
| FPS | No | 30 | 60 for social media |
| Visual style | No | Apple Minimal | Apple Minimal / Bold Typography / Dark Tech / Warm Organic / Retro Pop / Editorial Mono |
| CTA text | No | None | "Start Creating →" |
| Color accent | No | From style preset | "#FF7D00" |

**Emotional tone** drives animation technique selection, spring config, and pacing:
- **Urgent** → `SPRING.stiff` + GSAP hard cuts, fast stagger (2-3 frames), `power3.out` for GSAP scenes
- **Reassuring** → `SPRING.smooth` / `SPRING.gentle`, high damping, slow reveals, warm palette
- **Exciting** → `SPRING.bouncy` / `SPRING.pop`, low damping, saturated colors, SpringTrail pop-ins
- **Professional** → `SPRING.snappy` / `SPRING.smooth`, measured timing, clean motion, generous holds
- **Rebellious** → `SPRING.stiff` + `SPRING.rubber` mix, GSAP glitch effects, irregular stagger
- **Warm** → `SPRING.gentle` / `SPRING.molasses`, warm gradients, rounded shapes, slow stagger (6-8 frames)
- **Playful** → `SPRING.wobbly` / `SPRING.rubber`, extreme overshoot, GridStagger center-out, bright accents

**Memory anchor** — the ONE visual moment viewers will screenshot or recall. Every production decision should reinforce this anchor. Ask: "If someone describes this video to a friend, what image do they describe?"

### Phase 2: Planning

1. **Select narrative template** based on video type → see `rules/narrative-templates.md`
2. **Select visual style** → see `rules/style-presets.md`
3. **Map user's messages to scene slots** in the selected template
4. **Select animation pattern** for each scene → see `rules/scene-patterns.md`
5. Present the plan as a table to the user:

```
Scene | Duration | Pattern        | Content
1     | 3s       | TitleCard      | "Topview is powerful"
2     | 3s       | CardFlip3D     | CLI pain → AI solution
...
```

Wait for user confirmation before proceeding.

### Phase 3: Project Scaffold

Generate the standard Remotion project structure → see `rules/project-scaffold.md`:

1. `src/config.ts` — all parameters (colors, typography, scene frames)
2. `src/Root.tsx` — composition registration
3. `src/Composition.tsx` — TransitionSeries with all scenes
4. `src/components/` — shared components (background, etc.)
5. `src/scenes/` — one file per scene

**Frame calculation:** `sceneFrames = Math.ceil(sceneDurationSeconds * fps)`

### Phase 4: Scene Implementation + Evaluation

Implement scenes in order. Each scene goes through a **build → verify → fix** loop before moving to the next. → see `rules/scene-evaluator.md` for the full scoring rubric and auto-fix rules.

For each scene:

**Step 4a: Implement scene**

1. Create `src/scenes/SceneN_Name.tsx`
2. Select the right technique:
   - Text splitting / SVG drawing / complex timelines → `useGSAPTimeline` or `useGSAPWithFonts` (from gsap-animation skill)
   - Bouncy/elastic entrances / spring trails / overshoot effects → `spring()` + presets (from spring-animation skill)
   - Simple fades / slides / linear counters → Remotion native `interpolate()`
   - Visual backgrounds → react-animation components
3. Apply the selected animation pattern from the plan
4. Wire into `Composition.tsx` and register preview in `Root.tsx`

**Step 4b: Render stills**

Capture two key frames for visual inspection:

```bash
# Entry frame — catches early layout, initial positions
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_entry.png --frame={floor(SCENE_FRAMES.sceneN * 0.15)}

# Peak frame — hero moment, all entrances settled
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_peak.png --frame={floor(SCENE_FRAMES.sceneN * 0.60)}
```

**Step 4c: Evaluate**

Read the scene code + `config.ts` + rendered screenshots. Score across 7 weighted dimensions (anti-pattern compliance, typography, color & contrast, motion design, composition, narrative coherence, technical correctness).

- **Score >= 7.0** and no instant-fails → **PASS**, proceed to next scene
- **Score < 7.0** or instant-fail triggered → proceed to Step 4d

**Step 4d: Auto-fix** (max 2 iterations)

Apply targeted fixes from the deduction → fix mapping table in `rules/scene-evaluator.md`. Each deduction maps to a concrete code change — not a vague suggestion. After fixing:

- Return to **Step 4b** (re-render stills, re-score)
- After **iteration 2**, if still below threshold: emit **WARNING** and proceed to next scene

**Cross-scene tracking:** Maintain a running context of accent colors, spring presets, entrance directions, and techniques used per scene. At scene 3+, check for variety issues (same preset 3x in a row, same entrance direction, etc.).

**After all scenes complete:** Output a full **Evaluation Summary Table** showing per-scene scores, iteration counts, and cross-scene notes before proceeding to Phase 5.

**Pattern selection principle:** Use `spring()` for physics-driven motion with bounce/overshoot. Use GSAP for SplitText, DrawSVG, MorphSVG, and complex timeline orchestration. Use `interpolate()` for simple linear/eased motion.

### Phase 5: Rendering

```bash
# Standard MP4
npx remotion render src/index.ts MainVideo --output out/video.mp4

# High quality
npx remotion render src/index.ts MainVideo --codec h264 --crf 15

# Transparent background (social overlays)
npx remotion render src/index.ts MainVideo --codec prores --prores-profile 4444
npx remotion render src/index.ts MainVideo --codec vp9 --output out/overlay.webm
```

| Format | Alpha | Use Case |
|--------|:-----:|----------|
| MP4 H.264 | No | Universal playback |
| ProRes 4444 | Yes | Professional compositing |
| WebM VP9 | Yes | Web overlays |

## Complexity Calibration

Match implementation complexity to the emotional tone and visual style. The effort invested in animation must serve the creative vision — not exceed or undercut it.

| Tone × Style | Pacing | Spring Preset | GSAP Usage | Hold Duration |
|---|---|---|---|---|
| Urgent + Bold Typography | Fast (1.5-2.5s scenes) | `stiff` (stagger: 2f) | charCascade, hard cut transitions | Short (0.5s) |
| Exciting + Dark Tech | Medium-fast (2-3s) | `bouncy` / `pop` (stagger: 3f) | circleReveal transitions, DrawSVG | Medium (0.8s) |
| Professional + Apple Minimal | Measured (3-4s) | `smooth` / `snappy` (stagger: 5f) | textReveal, SplitScreenComparison | Long (1.2s) |
| Warm + War