| name | content-video |
| description | Video script generation and Remotion composition scaffolding. Use when user wants to create video content, storyboards, Remotion scripts, social media shorts, explainer videos, or video scripts. |
Video Script & Remotion Composition Generation
Before You Start
-
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.
-
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.
-
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)
-
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:
| Field | Description |
|---|
| Scene # | Sequential number |
| Timestamp | Start and end time (e.g., 0:00-0:05) |
| Visual | What appears on screen -- composition, colors, motion |
| Narration | Exact words spoken or displayed as text |
| Motion | Camera movement, element animations, transitions |
| Audio | Music, sound effects, ambient sound, silence |
| Duration | Length in seconds |
Remotion Integration
When generating Remotion code, follow these principles:
- One composition per video type: Each template maps to a Remotion composition with its own props interface.
- Brand tokens as constants: Extract colors, fonts, and spacing from
brand/VISUAL.md into a shared theme.ts file.
- Scene-based architecture: Each scene in the storyboard becomes a React component rendered inside a
<Sequence>.
- Animation patterns: Use spring animations for elements entering/exiting. Use
interpolate() for continuous motion. See remotion-patterns.md.
- Responsive text: Scale text based on
useVideoConfig() dimensions so compositions work at multiple resolutions.
- Asset management: Reference images and fonts via Remotion's
staticFile() helper.
Template Reference
| Template | Duration | Best For |
|---|
social-short.tsx.template | 15-60s | TikTok, Reels, X clips, LinkedIn shorts |
explainer.tsx.template | 2-5 min | Product walkthroughs, tutorials, feature launches |
data-story.tsx.template | 30s-3 min | Metrics presentations, quarterly updates, data journalism |
talking-head.tsx.template | 1-10 min | Interviews, commentary, thought leadership |
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:
