video-creator

When this skill is activated, always start your first response with the :movie_camera: emoji.

Video Creator

This is the orchestrator skill for end-to-end video creation. It coordinates a complete 7-step workflow that takes a user from "I need a video" to a finished 4K render. Each step delegates to companion skills (remotion-video, video-scriptwriting, video-audio-design, video-analyzer) while this skill manages sequencing, approval gates, and handoffs between stages.

You do NOT need to know Remotion internals or audio engineering - those are handled by companion skills. This skill's job is to run the process, ask the right questions, and make sure nothing gets skipped.

When to use this skill

Trigger this skill when the user:

• Says "make me a video", "create a video about", or "I need a video for"
• Wants a product demo, explainer, social clip, or announcement video
• Asks for end-to-end video production from concept to render
• Needs help turning an idea into a finished video file
• Mentions wanting a programmatic video with Remotion
• Has a reference video and wants to create something similar

Do NOT trigger this skill for:

• Editing an existing video file (use video-analyzer or ffmpeg skills)
• Writing a script only without producing a video (use video-scriptwriting)
• Audio-only production like podcasts (use video-audio-design for music/SFX)
• Remotion coding questions without a production context (use remotion-video)
• Analyzing or reviewing a video (use video-analyzer)

Key principles

1. Visual-first: Get visuals approved before spending money on audio.

Narration costs real dollars via ElevenLabs - never generate it until the visual layer is locked.

1. Interview exhaustively: Ask up to 30 questions to capture all context

about the product, audience, goals, tone, assets, and visual preferences. Incomplete context leads to expensive re-work.

1. Structured handoff: The video-script.yaml file is the single source of

truth between all steps. Every scene, frame count, narration line, and SFX cue lives in this file.

1. User approval gates: Explicit approval is required at each major step.

Never auto-advance. The user must say "approved" or "looks good" before the next step begins.

1. 4K default: Always render at 3840x2160 unless the user specifies

otherwise. Downscaling is easy; upscaling is not.

The 7-Step Workflow

Step 0: Ensure Remotion Project Exists (prerequisite)

Before anything else, the user must have a Remotion project set up. This is the workspace where all video code will be written. Check if you are already inside a Remotion project (look for remotion.config.ts or @remotion/cli in package.json). If not, scaffold one:

npx create-video@latest

This creates a new folder with the starter project. Then install dependencies:

cd <project-name>
npm install

Do NOT proceed to Step 1 until a Remotion project exists and dependencies are installed. All subsequent steps write code into this project.

If the user already has a Remotion project, cd into it and continue.

Step 1: Deep Interview

Gather all context needed to write a complete script. Ask questions one at a time using an interactive conversational approach.

Question categories (aim for 15-30 questions total):

| Category | Example Questions | |---|---| | Product/subject | What does the product do? What is the core value prop? | | Audience | Who is the target viewer? Technical level? | | Video goals | What should the viewer do after watching? | | Tone/style | Playful or professional? Fast or slow-paced? | | Assets | Do you have logos, screenshots, brand colors, fonts? | | Content | What are the key features or messages to cover? | | Visual preferences | Any reference videos? Preferred animation style? | | Duration | How long should the video be? Where will it be published? |

Rules for Step 1:

• Ask one question at a time - do not dump a questionnaire
• If the user provides a reference video, analyze it FIRST using the

video-analyzer skill before asking questions

• Summarize what you know after every 5-8 questions
• Do not proceed until you have enough context for every scene
• End with: "I have enough context to write the script. Ready to proceed?"

Exit criteria: User confirms you have enough context.

Step 2: Generate Script (YAML)

Use patterns from the video-scriptwriting skill to produce a structured YAML script.

Frame count formula:

frames = duration_seconds * 30

All Remotion compositions use 30fps by default.

Generate a video-script.yaml file with this structure:

title: "Product Demo - Acme Widget"
fps: 30
resolution: { width: 3840, height: 2160 }
total_duration_seconds: 60
scenes:
  - id: scene-01
    title: "Hook"
    duration_seconds: 5
    frames: 150
    narration: "Ever wished your widgets could think for themselves?"
    visuals: "Dark background, glowing Acme logo fades in, particles"
    animation_notes: "Logo scale 0->1 with spring, particles emit from center"
    music_cue: "Ambient synth pad, low energy"
    sfx: "Subtle whoosh on logo reveal"
    transition_out: "crossfade"
  - id: scene-02
    # ... continue for all scenes

Rules for Step 2:

• Every scene must have duration_seconds, frames, narration, visuals,

animation_notes, music_cue, and sfx fields

• Frame counts must equal duration_seconds * 30
• Total scene durations must sum to total_duration_seconds
• Present the full script to the user for review
• Iterate on feedback until the user explicitly approves

Exit criteria: User approves the script.

Step 3: Visual Verification

Build a minimal Remotion project with visuals only - no audio layer yet.

What to build:

• Remotion compositions for each scene (visuals, animations, typography, colors)
• Scene transitions matching the script
• Correct frame counts per scene
• Basic layout and spacing at 4K resolution

What NOT to build yet:

• Audio integration
• Narration sync
• Volume ducking
• Final render pipeline

Process:

1. Verify the Remotion project is set up (done in Step 0)
2. Build visual compositions for each scene inside the project
3. Launch Remotion Studio: npx remotion studio
4. Tell the user to preview at http://localhost:3000
5. Iterate on visual feedback (colors, timing, animations, transitions)
6. Get EXPLICIT visual approval before proceeding

Exit criteria: User explicitly approves the visuals.

Step 4: Build Full Remotion Project

Now that visuals are approved, flesh out the complete project.

Tasks:

• Finalize all compositions with polished animations
• Wire up scene-to-scene transitions
• Add Zod schemas for parametrization (titles, colors, durations)
• Ensure frame counts match the script exactly
• Organize project structure cleanly:

src/
  compositions/
    Scene01Hook.tsx
    Scene02Feature.tsx
    ...
  components/
    AnimatedLogo.tsx
    TransitionWipe.tsx
    ...
  Root.tsx
  index.ts
  video-script.yaml

Rules for Step 4:

• Each scene should be its own composition file
• Shared components go in components/
• All magic numbers should be replaced with Zod schema props
• Frame counts must still match video-script.yaml

Exit criteria: Full project builds without errors and matches approved visuals.

Step 5: Add Background Audio + SFX

Use patterns from the video-audio-design skill.

Tasks:

1. Source or select background music (user-provided or from documented sources)
2. Place SFX at trigger points from the script (clicks, typing, whooshes, etc.)
3. Set base volume levels for music and SFX
4. Implement ducking infrastructure - prepare volume curves that will lower

music during narration segments in Step 6

1. Preview audio-visual sync in Remotion Studio

Volume guidelines: | Layer | Base Volume | During Narration | |---|---|---