Content Video

Video Script & Remotion Composition Generation

Before You Start

1. Check for brand identity: Read brand/VOICE.md and brand/VISUAL.md if they exist. Video content requires both voice (for narration/script tone) and visual identity (for colors, fonts, logo animations). If these files do not exist, use sensible defaults and suggest the user run the content-setup skill.

2. Determine what the user needs: This skill produces two possible outputs:

   • Storyboard / Script only -- a scene-by-scene document with narration, visual direction, and timing. Suitable for handing off to an editor or recording team.
   • Storyboard + Remotion code -- all of the above, plus a TSX composition that can be rendered programmatically using Remotion. Use this when the user wants a code-driven video.

3. Determine the template type: Ask the user (or infer from their prompt) which format fits:

   • Social Short (15-60 seconds) -- punchy, hook-first, vertical or square format (templates/social-short.tsx.template)
   • Explainer (2-5 minutes) -- structured walkthrough with sections, diagrams, code animations (templates/explainer.tsx.template)
   • Data Story -- animated charts, number reveals, data transitions (templates/data-story.tsx.template)
   • Talking Head -- person on camera with lower thirds, name cards, topic overlays (templates/talking-head.tsx.template)

4. Gather inputs: Topic, target audience, key message, desired duration, platform (YouTube, TikTok, LinkedIn, X, Instagram Reels), and any existing assets (images, logos, data).

Generation Flow

Follow these stages. Do not skip any.

Stage 1: Brief

Confirm the following with the user (or extract from their prompt):

• Topic and core message (one sentence)
• Target audience and platform
• Template type (social-short, explainer, data-story, talking-head)
• Desired duration
• Whether Remotion code is needed
• Available assets: logo files, brand colors, fonts, footage, data
• Narration style: voiceover, on-screen text only, or talking head
• Music mood: upbeat, calm, dramatic, corporate, playful, none

Stage 2: Storyboard

Produce a scene-by-scene storyboard using the format defined in storyboard-template.md:

• Scene number and timestamp range
• Visual description (what the viewer sees)
• Narration or dialogue (exact script or key talking points)
• Motion notes (camera movement, transitions, animations)
• Audio cues (music changes, sound effects, silence)
• Duration per scene

Present the storyboard to the user for approval before writing Remotion code.

Stage 3: Script Polish

Refine the narration/dialogue:

• Apply brand voice from brand/VOICE.md
• Ensure pacing matches the target duration (roughly 150 words per minute for narration)
• Vary sentence length for natural rhythm
• Write for the ear, not the eye -- short sentences, active voice, conversational flow
• Add emphasis markers where the speaker should stress a word
• Include pause indicators [PAUSE] where beats are needed

Stage 4: Remotion Composition (if requested)

Generate the TSX composition using patterns from remotion-patterns.md and the appropriate template:

• Set up the Composition with correct durationInFrames, fps, width, height
• Use useCurrentFrame() and useVideoConfig() for animation timing
• Apply brand colors and fonts from brand/VISUAL.md
• Implement scene transitions using <Series> and <Sequence> components
• Add spring animations for natural motion
• Include text overlays, lower thirds, or data visualizations as specified in the storyboard
• Export all compositions from a single Root.tsx

Stage 5: Review

Review the complete package against these criteria:

• Does the hook capture attention in the first 3 seconds?
• Is the pacing appropriate for the platform and duration?
• Does every scene serve the core message?
• Are transitions smooth and purposeful (not just decorative)?
• Does the visual style match the brand identity?
• Is the narration script natural when read aloud?
• Are audio cues specific enough for a producer to act on?

Storyboard Format

Use the format defined in storyboard-template.md for all storyboards. Each scene must include:

Remotion Integration

When generating Remotion code, follow these principles:

1. One composition per video type: Each template maps to a Remotion composition with its own props interface.
2. Brand tokens as constants: Extract colors, fonts, and spacing from brand/VISUAL.md into a shared theme.ts file.
3. Scene-based architecture: Each scene in the storyboard becomes a React component rendered inside a <Sequence>.
4. Animation patterns: Use spring animations for elements entering/exiting. Use interpolate() for continuous motion. See remotion-patterns.md.
5. Responsive text: Scale text based on useVideoConfig() dimensions so compositions work at multiple resolutions.
6. Asset management: Reference images and fonts via Remotion's staticFile() helper.

Template Reference

Brand Integration

Video content must reflect the brand across both auditory and visual channels:

Visual consistency (from brand/VISUAL.md):

• Primary and secondary brand colors for backgrounds, text, accents
• Brand fonts for titles, body text, and lower thirds
• Logo animation: intro placement, watermark positioning, outro treatment
• Consistent padding, margins, and layout grid

Voice consistency (from brand/VOICE.md):

• Narration tone matches the brand personality
• Vocabulary choices align with brand guidelines
• Humor, formality, and energy level are on-brand

Audio guidance:

• Music mood should match the brand personality (e.g., a playful brand uses upbeat tracks)
• Sound effects should be subtle and purposeful, not gimmicky
• Voiceover pacing: 130-160 words per minute depending on energy level

Output Checklist

Before delivering the final package, verify:

• Storyboard is complete with all scenes documented
• Narration script reads naturally when spoken aloud
• Total duration matches the requested range
• Hook captures attention within the first 3 seconds
• Brand colors, fonts, and logo are correctly applied (if Remotion)
• Remotion code compiles and renders without errors (if applicable)
• All compositions are exported from Root.tsx (if Remotion)
• Scene transitions are smooth and motivated
• Audio cues are specific and actionable
• Voice matches brand profile throughout the script