Orchestrates complete Remotion video generation workflow from user request to MP4 output. Automatically activates when user mentions creating videos, animations, or visual content. Handles environment setup, storyboarding, code generation, and rendering with minimal user intervention. Creates explainer videos, product demos, social media content, and presentations using Remotion and React.
You are the primary orchestrator for automated video generation using Remotion. You coordinate all aspects of the video creation workflow from initial user request to final MP4 delivery.
This skill should activate automatically when user input contains any of these patterns:
Important: Activation should be permissive. When in doubt about whether user wants a video, ask: "Would you like me to create a video for this?"
The complete video generation process follows these steps:
Objective: Ensure the system has all required dependencies installed.
Process:
Check if environment exists:
# PROJECT_DIR is determined by the environment-setup skill
# Default: ./remotion-videos (current working directory)
PROJECT_DIR="${REMOTION_PROJECT_DIR:-./remotion-videos}"
ls "$PROJECT_DIR/node_modules/remotion"
Invoke environment-setup skill:
If environment setup fails:
❌ Unable to set up video generation environment.
Missing requirements:
[List from environment-setup skill]
Please install the missing requirements and try again, or I can guide you through the installation process.
Success criteria: Node.js, FFmpeg, and Remotion packages are all installed and accessible.
Objective: Extract all necessary information from user input.
What to extract:
Video purpose/goal:
Key content/messages:
Duration:
If user provides detailed description, extract all relevant information:
Example input: "Create a 90-second explainer video about our AI chatbot. Show how it helps customer support teams save time. Use our brand colors: blue #2563EB and white. I have our logo and 3 product screenshots."
Extract:
If user provides minimal description, use intelligent defaults:
Example input: "Make a video about our new feature"
Infer:
Always ask if these are unclear:
Consider asking if helpful but not critical:
Never ask if you can reasonably infer:
Minimal approach (preferred - ask only what's needed):
I'll create a [video type] for you. To make it effective, I need to know:
1. What's the main message or goal?
2. How long should it be?
3. Do you have any images, logos, or other assets I should include?
Targeted approach (when specific info is needed):
I'll create a product demo video showcasing [feature].
Quick questions:
- What 3 key benefits should I highlight?
- Do you have product screenshots I can use?
Objective: Create detailed storyboard with all visual and timing specifications.
Process:
Invoke scene-planner skill with gathered requirements:
Create a storyboard for:
- Type: [explainer/demo/social/presentation]
- Duration: [X] seconds
- Topic: [description]
- Key messages: [list]
- Brand colors: [if provided]
- Available assets: [list]
Receive storyboard from scene-planner:
Process storyboard internally:
Output from this phase: Complete storyboard specification ready for implementation.
Objective: Show user the plan before generating code.
Present storyboard in user-friendly format:
I've planned your [video type]:
## Overview
- **Duration**: [X] seconds
- **Scenes**: [N] scenes
- **Style**: [Professional/Creative/Modern]
- **Resolution**: 1920x1080 (Full HD)
## Scene Flow
1. **[Scene 1 Name]** (0-5s)
[Brief description of what happens]
2. **[Scene 2 Name]** (5-15s)
[Brief description]
3. **[Scene 3 Name]** (15-25s)
[Brief description]
[... continue for all scenes]
## Assets Needed
### Required:
- [Asset 1]
- [Asset 2]
### Optional:
- [Asset 3]
## Next Steps
I can now generate the Remotion code and create your video. The process will:
1. Generate React components for each scene
2. Set up animations and transitions
3. Integrate your assets
4. Render to MP4
Would you like me to proceed? Or would you like to adjust anything in the storyboard?
Handle user response:
"Proceed" / "Yes" / "Looks good": → Move to Phase 5 (Code Generation)
"Change [something]": → Update storyboard based on feedback → Re-present for approval → Then proceed when approved
"I don't have [asset]": → Check if asset is required or optional → If required: Ask user to provide or suggest alternative → If optional: Note to skip that element in generation
"Make it shorter/longer": → Re-invoke scene-planner with new duration → Present updated storyboard
Objective: Generate complete Remotion project with React components for all scenes.
Project structure to create:
$PROJECT_DIR/src/compositions/[video-name]/
├── VideoComposition.tsx # Main composition
├── Scene1.tsx # Individual scenes
├── Scene2.tsx
├── Scene3.tsx
...
└── types.ts # TypeScript types (if needed)
$PROJECT_DIR/src/Root.tsx # Updated with new composition
File: $PROJECT_DIR/src/Root.tsx
Check if file exists. If not, create:
import React from "react";
import { Composition } from "remotion";
export const RemotionRoot: React.FC = () => {
return <></>;
};
If exists, read it to preserve other compositions.
Add new composition entry:
import { [VideoName]Composition } from "./compositions/[video-name]/VideoComposition";
// Inside RemotionRoot return:
<Composition
id="[video-name]"
component={[VideoName]Composition}
durationInFrames={[totalFrames]}
fps={30}
width={1920}
height={1080}
defaultProps={{}}
/>
Naming convention:
File: $PROJECT_DIR/src/compositions/[video-name]/VideoComposition.tsx
import { AbsoluteFill, Sequence } from "remotion";
import { Scene1 } from "./Scene1";
import { Scene2 } from "./Scene2";
// Import all scene components
export const [VideoName]Composition: React.FC = () => {
return (
<AbsoluteFill>
<Sequence from={0} durationInFrames={150}>
<Scene1 />
</Sequence>
<Sequence from={150} durationInFrames={360}>
<Scene2 />
</Sequence>
{/* Add Sequence for each scene with correct timing */}
</AbsoluteFill>
);
};
Key requirements:
<Sequence> for each scene with correct from and durationInFrames<AbsoluteFill> for full-screen layoutFor each scene in the storyboard, create a separate component file.
File: $PROJECT_DIR/src/compositions/[video-name]/Scene[N].tsx
Scene component template:
import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
export const Scene[N]: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Animation calculations using useCurrentFrame()
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
const scale = spring({
frame,
fps,
config: {
damping: 100,
stiffness: 200,
},
});
return (
<AbsoluteFill
style={{
backgroundColor: "[background-color]",
justifyContent: "center",
alignItems: "center",
opacity,
}}
>
<h1
style={{
fontSize: [size],
fontWeight: [weight],
color: "[color]",
transform: `scale(${scale})`,
textAlign: "center",
padding: "0 100px",
}}
>
[Scene content]
</h1>
</AbsoluteFill>
);
};
Component requirements based on scene type:
Text Scene:
<h1>, <h2>, <p> tagsImage Scene:
{ Img, staticFile } from "remotion"<Img src={staticFile("assets/[filename]")} />Split Scene (text + image):
List/Bullets Scene:
Code example for staggered list:
const items = ["Item 1", "Item 2", "Item 3"];
{items.map((item, index) => {
const itemOpacity = interpolate(
frame,
[30 + index * 20, 45 + index * 20],
[0, 1],
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);
const itemX = interpolate(
frame,
[30 + index * 20, 50 + index * 20],
[-50, 0],
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);
return (
<div
key={index}
style={{
opacity: itemOpacity,
transform: `translateX(${itemX}px)`,
fontSize: 32,
marginBottom: 20,
}}
>
• {item}
</div>
);
})}
Critical rules to follow (from remotion-best-practices skill):
Always use useCurrentFrame() for animations:
const frame = useCurrentFrame();
// Use frame for all animation calculations
Never use CSS transitions or animations:
❌ transition: opacity 0.3s
✅ interpolate(frame, [0, 30], [0, 1])
Use Remotion components for media:
❌ <img src="..." />
✅ <Img src={staticFile("...")} />
❌ <video src="..." />
✅ <Video src={staticFile("...")} />
Use staticFile() for assets:
❌ src="../../../public/assets/logo.png"
✅ src={staticFile("assets/logo.png")}
Use spring() for natural motion:
const scale = spring({
frame,
fps,
config: { damping: 100, stiffness: 200 }
});
Use interpolate() for linear animations:
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp"
});
Proper TypeScript typing:
export const MyScene: React.FC = () => { ... }
Approach: Generate clean, readable, well-commented code that follows best practices.
File creation order:
Code style:
Error prevention:
Objective: Copy user-provided assets to the correct location and update code references.
Process:
Check which assets user provided:
Create assets directory (if doesn't exist):
mkdir -p "$PROJECT_DIR/public/assets"
Copy assets:
cp [user-path] "$PROJECT_DIR/public/assets/[filename]"
Verify assets:
Update code references:
staticFile("assets/[filename]")If assets are missing:
Required assets missing:
⚠ The following required assets are missing:
- Logo (logo.png)
- Product screenshot (screenshot-1.png)
Please provide these files, or I can create placeholder elements so you can see the video structure.
Would you like to:
1. Provide the assets now
2. Use placeholders for now (you can replace them later)
3. Skip these elements
Optional assets missing:
ℹ Note: These optional assets weren't provided:
- Background music
The video will work without them, but they would enhance it. You can add them later if needed.
Placeholder strategy:
Objective: Allow user to review the video before final rendering.
Remotion Studio approach:
Start Remotion Studio:
cd "$PROJECT_DIR"
npm run dev
This starts a local server at http://localhost:3000
Inform user:
✓ Video code generated successfully!
Preview is now available at: http://localhost:3000
You can:
- Scrub through the timeline
- Play/pause the video
- Adjust timing if needed
- See all animations in real-time
When you're satisfied with the preview, let me know and I'll render the final MP4.
(Or say "skip preview" to render directly)
Wait for user feedback:
Alternative: Skip preview
If user is in a hurry or trusts the output:
Would you like to preview the video first, or should I render the final MP4 directly?
1. Preview (recommended): See video in Remotion Studio
2. Render directly: Skip to final MP4 (faster)
If user chooses option 2, skip to Phase 8.
Objective: Generate final MP4 file from Remotion project.
Process:
Prepare render command:
cd "$PROJECT_DIR"
npx remotion render src/index.ts [video-name] output/[video-name].mp4
Start rendering:
Show progress (if possible):
Rendering video...
[Progress bar if available]
This may take a few minutes...
Monitor for errors:
Handle errors:
TypeScript error:
❌ Rendering failed: TypeScript error
Error: [error message]
Let me fix this...
Fix the code issue and retry.
Asset not found:
❌ Rendering failed: Asset not found
Missing: assets/[filename]
Please provide this file or I can remove it from the video.
FFmpeg error:
❌ Rendering failed: FFmpeg error
This usually means FFmpeg isn't properly installed.
Let me verify the environment...
Re-run environment validation.
Rendering complete:
✓ Rendering complete!
Processing time: [X] minutes
Output file: $PROJECT_DIR/output/[video-name].mp4
Rendering options:
Standard quality (default):
cd "$PROJECT_DIR"
npx remotion render src/index.ts [video-name] output/[video-name].mp4
High quality:
cd "$PROJECT_DIR"
npx remotion render src/index.ts [video-name] output/[video-name].mp4 --codec=h264-mkv --quality=100
Fast preview (lower quality, faster):
cd "$PROJECT_DIR"
npx remotion render src/index.ts [video-name] output/[video-name].mp4 --jpeg-quality=50
Choose based on user needs (default to standard).
Objective: Provide user with the final video and next steps.
Present results:
🎬 Your video is ready!
📁 Location: $PROJECT_DIR/output/[video-name].mp4
⏱️ Duration: [X] seconds
📐 Resolution: 1920x1080 (Full HD)
💾 File Size: [Y] MB
🎨 Scenes: [N] scenes
✓ Generated [N] React components
✓ Integrated [X] assets
✓ Applied [Y] animations
You can now:
1. Open the video: open "$PROJECT_DIR/output/[video-name].mp4"
2. Upload to YouTube, Instagram, or other platforms
3. Edit the source code to customize further (files in $PROJECT_DIR/src/compositions/[video-name]/)
4. Re-render with changes: cd "$PROJECT_DIR" && npm run render
Need any adjustments? I can:
- Change timing or animations
- Add/remove scenes
- Update colors or fonts
- Regenerate with different content
Provide full file path so user can easily access:
# Full path (resolved at runtime)
realpath "$PROJECT_DIR/output/[video-name].mp4"
Optional: Open video automatically:
open "$PROJECT_DIR/output/[video-name].mp4"
(macOS only; skip on Linux/Windows)
If user wants to make changes:
"Change the title text in scene 1"
Action:
"Make scene 2 longer"
Action:
"Use different colors"
Action:
"Add an intro scene"
Action:
Quick edit workflow:
For quick edits, you can:
1. Modify files in $PROJECT_DIR/src/compositions/[video-name]/
2. Preview changes: npm run dev (opens Studio at localhost:3000)
3. Re-render: npx remotion render src/index.ts [video-name] output/[video-name].mp4
Let me know what you'd like to change and I can update the code for you.
Error: "Cannot find module 'remotion'"
cd "$PROJECT_DIR" && npm installError: "Composition not found"
Error: "staticFile: File not found"
ls "$PROJECT_DIR/public/assets/"Error: "FFmpeg exited with code 1"
ffmpeg -versionError: "JavaScript heap out of memory"
export NODE_OPTIONS="--max-old-space-size=4096"Error: TypeScript compilation errors
If something fails:
Generate clean code:
Follow Remotion patterns:
Performance considerations:
Be proactive:
Be transparent:
Be helpful:
Be forgiving:
Progress updates:
✓ Environment ready
✓ Storyboard created
→ Generating code...
Status indicators:
Clear instructions:
Invokes this skill first to ensure dependencies are installed.
Invokes this skill to create storyboard before code generation.
Applies rules from this skill during code generation.
References template files for structure and guidelines.
User: "Create a 60-second explainer video about our AI writing assistant"
Phase 1: Environment check
Checking environment... ✓
Node.js: v18.17.0 ✓
FFmpeg: 6.0 ✓
Remotion: 4.0.409 ✓
Phase 2: Requirements
I'll create an explainer video about your AI writing assistant.
Quick questions:
1. What's the main benefit users get? (e.g., "Write 10x faster", "Never have writer's block")
2. Do you have a logo and any product screenshots?
User provides: "Main benefit is 'Write better content in half the time'. Yes, I have logo and 2 screenshots."
Phase 3: Scene planning (internal - invokes scene-planner)
Phase 4: Review
I've planned your explainer video:
Duration: 60 seconds
Scenes: 6
1. Hook (5s): "Spending hours on every article?"
2. Problem (10s): Writer's block, slow writing, quality concerns
3. Solution (8s): Introduce AI Writing Assistant
4. How It Works (22s): 3 steps - Input topic, AI generates draft, Edit and publish
5. Benefits (10s): Save time, improve quality, overcome blocks
6. CTA (5s): "Start writing better at [website].com"
Assets needed:
- Logo ✓ (you have)
- 2 product screenshots ✓ (you have)
Shall I proceed with generating the video?
User: "Yes, proceed"
Phase 5: Code generation
Generating Remotion code...
✓ Created VideoComposition.tsx
✓ Created 6 scene components
✓ Updated Root.tsx
Phase 6: Assets
Please provide your assets:
1. Logo file path:
2. Screenshot 1 file path:
3. Screenshot 2 file path:
User provides paths. Assets copied.
✓ Integrated 3 assets
Phase 7: Preview
✓ Code generation complete!
Preview available at: http://localhost:3000
Review the video and let me know when ready to render final MP4.
User reviews: "Looks great, render it!"
Phase 8: Rendering
Rendering video...
[Progress bar]
✓ Rendering complete! (took 2 minutes)
Phase 9: Delivery
🎬 Your video is ready!
📁 $PROJECT_DIR/output/ai-writing-assistant-explainer.mp4
⏱️ 60 seconds
📐 1920x1080 (Full HD)
💾 15.3 MB
🎨 6 scenes
Open video: open "$PROJECT_DIR/output/ai-writing-assistant-explainer.mp4"
Need changes? Let me know!
Total time: ~5 minutes (including rendering)
Potential future capabilities:
Voice-over generation: Integrate text-to-speech Subtitle generation: Automatic captions Multiple formats: Render 16:9, 9:16, 1:1 simultaneously Batch generation: Create multiple videos from template A/B variants: Generate multiple versions with variations Direct upload: Publish to YouTube/Instagram via API
These practices are sourced from the most successful Remotion video toolkits in the community:
- remotion-dev/template-prompt-to-motion-graphics (81 stars)
- digitalsamba/claude-code-video-toolkit (40 stars)
- wshuyi/remotion-video-skill (70 stars)
- JJenglert1/remotion-claude-video (16 stars)
All generated code MUST place editable values at the top of each file:
// ============ EDITABLE CONSTANTS ============
const BRAND = {
primaryColor: '#2563EB',
accentColor: '#F97316',
backgroundColor: '#0F172A',
textColor: '#F8FAFC',
};
const TYPOGRAPHY = {
headingFont: 'Inter',
bodyFont: 'Inter',
headingSize: 72,
bodySize: 28,
headingWeight: 700,
bodyWeight: 400,
};
const CONTENT = {
title: 'Your Title Here',
subtitle: 'Your subtitle',
items: ['Point 1', 'Point 2', 'Point 3'],
};
const TIMING = {
fps: 30,
sceneDurations: [150, 300, 240, 180],
};
// ============================================
Why: Users can quickly customize videos by editing only the constant block, without understanding component internals. This is the single most impactful practice from the community.
Before generating code, analyze the video requirements and inject only relevant Remotion best-practice rules:
| Video Need | Rules to Reference |
|---|---|
| Text animations | remotion-best-practices/rules/text-animations.md |
| Scene transitions | remotion-best-practices/rules/transitions.md |
| Spring physics | remotion-best-practices/rules/timing.md |
| Image handling | remotion-best-practices/rules/images.md |
| Captions | remotion-best-practices/rules/display-captions.md |
| Font loading | remotion-best-practices/rules/measuring-text.md |
| Parameters | remotion-best-practices/rules/parameters.md |
This prevents context bloat while ensuring relevant expertise is applied.
Reference the prompt library at ${CODEBUDDY_PLUGIN_ROOT}/templates/prompt-library/ for:
After initial code generation, apply a structured polish process:
Round 1: Structure — Timeline logic, reading time, holds Round 2: Visual — Design system unity (fonts, colors, spacing) Round 3: Animation — Spring physics, stagger timing, background motion Round 4: Detail — Shadows, safe zones, contrast ratios
Reference ${CODEBUDDY_PLUGIN_ROOT}/templates/prompt-library/09-polish-prompts.md for specific polish instructions.
During code generation, actively avoid these documented anti-patterns:
Text Animation Anti-Patterns:
text.slice(0, n)Transition Anti-Patterns:
Animation Anti-Patterns:
Resource Anti-Patterns:
<img> tag → ✅ Remotion <Img> componentstaticFile("assets/file.png")Generate these utility functions at the top of the composition or in a shared utils file:
// Fade + slide up (most common entrance)
const fadeSlideUp = (frame: number, start: number, duration = 20) => ({
opacity: interpolate(frame, [start, start + duration], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
}),
transform: `translateY(${interpolate(frame, [start, start + duration + 5], [30, 0], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
})}px)`,
});
// Staggered list item reveal
const staggerItem = (frame: number, index: number, gap = 15) => ({
opacity: interpolate(frame, [index * gap, index * gap + 20], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
}),
transform: `translateX(${interpolate(frame, [index * gap, index * gap + 25], [-40, 0], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
})}px)`,
});
// Typewriter text reveal
const typewriter = (frame: number, text: string, speed = 2) =>
text.slice(0, Math.min(Math.floor(frame / speed), text.length));
// Count-up number animation
const countUp = (frame: number, target: number, start: number, duration: number) =>
Math.floor(target * interpolate(frame, [start, start + duration], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
}));
Always use @remotion/google-fonts for font loading:
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// Then use in styles:
style={{ fontFamily }}
For code/terminal scenes:
import { loadFont } from "@remotion/google-fonts/JetBrainsMono";
const { fontFamily: monoFont } = loadFont();
Beyond the 4 core types (explainer, product demo, social media, presentation), this skill supports 10 additional high-impact video styles, each with a full structural template (${CODEBUDDY_PLUGIN_ROOT}/templates/) AND a prompt library entry (${CODEBUDDY_PLUGIN_ROOT}/templates/prompt-library/):
| Video Type | Template | Prompt Library | Duration |
|---|---|---|---|
| Product Launch | templates/product-launch.md | prompt-library/01-product-launch.md | 10-15s |
| Open Source Promo | templates/open-source-promo.md | prompt-library/02-developer-tool-promo.md | 15-30s |
| Data Ranking | templates/data-ranking.md | prompt-library/03-data-ranking.md | 15-30s |
| Kinetic Typography | templates/kinetic-typography.md | prompt-library/04-kinetic-typography.md | 15-60s |
| App Walkthrough | templates/app-walkthrough.md | prompt-library/05-app-walkthrough.md | 30-60s |
| Before/After | templates/before-after.md | prompt-library/06-before-after.md | 10-20s |
| Release Announcement | templates/release-announcement.md | prompt-library/07-release-announcement.md | 15-30s |
| Thread Summary | templates/thread-summary.md | prompt-library/08-thread-summary.md | 20-45s |
| Map Route | templates/map-route.md | — | 15-30s |
| Music Visualization | templates/music-visualization.md | — | Matches audio |
How to use: For each extended type, read BOTH the structural template (for scene breakdown, layout, animation code patterns) AND the prompt library entry (for user-facing prompt format, Constants-First code skeleton). The template provides the "how", the prompt library provides the "what to ask".
This skill represents the complete orchestration layer that makes video generation seamless and automated for users. By coordinating environment setup, storyboarding, code generation, and rendering — and applying community-proven best practices like Constants-First Design, skill injection, and structured polish rounds — it transforms user ideas into production-ready, visually polished videos with minimal manual intervention.