video-producer

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, 3D transforms, timelines
├── 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.

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

Implement scenes in order. For each scene:

1. Create src/scenes/SceneN_Name.tsx
2. Select the right hook:
   • Complex timeline / text splitting / 3D transforms → useGSAPTimeline or useGSAPWithFonts (from gsap-animation skill)
   • Simple fades / slides / counters → Remotion native interpolate() + spring()
   • Visual backgrounds → react-animation components
3. Apply the selected animation pattern from the plan
4. Wire into Composition.tsx

Pattern selection principle: Use Remotion native for anything interpolate() handles cleanly. Use GSAP only for SplitText, DrawSVG, MorphSVG, complex timeline orchestration, 3D transforms, and registered effects.

Phase 5: Rendering

# 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

Quick Decision Reference