Remotion is an open-source framework for writing videos in React. Instead of timelines and drag-and-drop, you work with code — scenes, animations, and layouts are React components. The result renders as MP4.
Why this matters: if video = code, an AI like Claude can take over the entire creation process.
What you need
Claude Code (in the terminal or via Cursor/VS Code)
Node.js (for npm)
A code editor (VS Code, Cursor, etc.)
Remotion skills for Claude (installed in step 1)
Step by step
1. Install the Remotion skills
The Remotion skills are a bundle of prompts that teach Claude how to use Remotion correctly — basically an expert-knowledge package.
Copy the install command from the Remotion skills repo and paste it into the terminal.
Pick the agent you use (e.g. Claude Code).
Choose global scope so the skills are available across projects.
2. Create a new Remotion project
In the terminal, navigate to your project folder.
Start a new Remotion project (something like npx create-video@latest).
Pick blank as the template.
Confirm the follow-up questions with Yes.
3. Clean up the project (optional)
Delete files you don't need — e.g. configs for AI tools you don't use.
4. Start the local dev server
Open a terminal in your editor and run:
npm install
npm run dev
The Remotion video editor opens in the browser at localhost:3000. You'll see a timeline, a preview, and your assets.
5. Launch Claude Code and brief it
Start Claude Code and give it context:
I've installed Remotion. Please read the Remotion skills
and get familiar with the setup before we start.
This makes sure Claude knows the Remotion conventions before writing code.
6. Prompt the video in plan mode
Switch Claude into plan mode — that way you see the structure before code is written.
Example prompt:
Create a 20-second video explaining the most important features
of this GitHub repo: [insert URL]
Claude produces a plan with scenes, timing, and animations.
Pro tip: Explicitly ask: "Did you use all Remotion skills?" — that ensures Claude applies the full skill set.
If the plan fits → tell it to start coding.
7. Watch the video and iterate
Open localhost:3000 in the browser. You'll see:
Top: video preview
Bottom: timeline with all scenes
Left: asset panel
The first result is rarely perfect — that's normal. Give Claude targeted corrections:
In scene 3 the text boxes overlap. Please increase the spacing
between the title and the description.
The editor reloads on every change (hot reload).
Add your own assets:
Drag screenshots, logos, or graphics into the asset panel (left in the editor)
Or upload them directly to Claude Code and tell Claude to build them in
You can also ask Claude to search for matching visual elements online
8. Render and export
When everything's ready: click Render in the bottom right of the editor. After rendering you can download the video as MP4.
Typical workflow (recap)
Install skills → create project → start dev server
Brief Claude → enable plan mode → prompt
Review the plan → let it code → watch the video in the browser
Iterate (adjust scenes, add assets)
Render → export MP4
Tips for better results
Always plan mode first — that way Claude doesn't code in the wrong direction
Be specific in corrections — name the exact scene, frame, or element
Use your own assets — screenshots, logos, and graphics make videos look way more professional
Don't forget the skill check — asking whether all skills were used makes a real difference
Iterate in small steps — 5 small tweaks beat one completely new prompt
