Remotion skills are the official Agent Skills that teach Claude Code or Codex how to build, preview and render videos in a Remotion project. Add them with npx remotion skills add or Remotion’s Claude Code plugin, ask for a composition, check it in Remotion Studio, then ask explicitly for an MP4 render. This guide covers setup, the 13 official skills with a prompt for each, five starter projects, rendering and licensing, plus when a video editor fits better. It follows Remotion’s documentation as of November 12, 2026; we did not run the prompts for this article.
What Remotion skills add
Remotion makes videos with React. Each video is a composition that you preview in Remotion Studio and render to a file. The official skills are instructions for the coding agent working in that project. They are not a video-generation model and not an MCP server.
Three related pieces are easy to mix up:
- Agent Skills (
npx remotion skills add) are installed into your project and guide the agent. - The Claude Code plugin packages the same skills as a Claude Code plugin. Its commands carry a prefix, such as
/remotion:remotion-create. - Studio WebMCP lets an agent inspect and steer the Studio preview. Remotion’s WebMCP page lists ChatGPT Codex as the only major harness that supports it, so installing the skills in Claude Code doesn’t give you WebMCP.
Studio also supports visual editing: Studio interactivity writes the changes you make in the preview back to your code. What you can select depends on how the composition is written, so ask for editable elements when you prompt.
Install Remotion skills in Claude Code
Pick one of the three routes below.
Start a new project
You need Node.js and a coding agent such as Claude Code or Codex. Remotion’s coding-agent guide uses:
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run devnpm run dev starts Remotion Studio. Leave it running, open a second terminal in the same folder and start your agent:
cd my-video
claude # or: codexA blank project has no composition yet. Build the LaunchCard title card in project 14 below to get something to preview.
Add skills to an existing project
Run npx remotion skills add in the project folder. If Remotion isn’t installed there, the Skills page gives npx skills add remotion-dev/skills instead.
Install the Claude Code plugin
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotionRestart Claude Code, start a new session in your video folder, and call skills with the plugin prefix, for example /remotion:remotion-create (plugin instructions). The prompts below use the plain /remotion-create form; add the remotion: prefix if you installed the plugin.
For Codex in the ChatGPT desktop app, Remotion has a separate Codex plugin: type $remotion in a new project and accept the suggested plugin.
The 13 official Remotion skills
These are the 13 skills in the official catalog as of November 12, 2026. Each entry says when to use the skill, gives a prompt to paste and says what to check.
1. remotion-best-practices: route a task
Use it when you have a project but don’t know which skill applies. remotion-best-practices routes the task to the right guidance.
Check: the agent names the skill and the composition it will change before it edits anything.
2. remotion-create: start a composition
Use it for a new project or composition. remotion-create works best when you give it the exact text, size, frame rate and duration.
Check: the headline, dimensions and duration match, and you can select the title in Studio.
3. remotion-markup: content and animation
Use it for writing or revising the React content, animation and effects of a composition with remotion-markup.
Check: scrub through the entrance. The headline should stop exactly where it was, with the wording unchanged.
4. remotion-studio: open the preview
Use it for launching Studio and keeping a preview available while you work, with remotion-studio.
Check: open the URL yourself and confirm the composition loads and plays.
5. remotion-render: export a file
Use it for rendering an approved composition to a video or still with remotion-render. Name the composition and the output path.
Check: open the file and play it. A working preview doesn’t mean the render succeeded.
6. remotion-maps: map animations
Use it for choosing a map-animation technique with remotion-maps. Some techniques need a key for a map service such as Mapbox.
Check: the marker sits on the right location, and the agent has told you about any key or service the technique needs.
7. remotion-captions: captions
Use it for transcribing, displaying and animating captions with remotion-captions. If you already have a reviewed SRT file, give it to the agent instead of transcribing again.
Check: watch with sound and read every caption, especially names and lines near the frame edges.
8. remotion-saas: build a video app
Use it for planning an app that previews and renders videos for its users, with remotion-saas.
Check: the proposal says where preview, rendering and user input run, and which costs are still open.
9. remotion-interactivity: editable in Studio
Use it when elements can’t be selected or edited in Studio. remotion-interactivity restructures the code so layers, timing and styles stay editable.
Check: select each element, make a small change in Studio, and look at the source change it produced.
10. remotion-docs: look up the current API
Use it for finding current Remotion documentation before changing code, with remotion-docs.
Check: open the page the agent cites and confirm it answers your question.
11. remotion-license: check licensing
Use it for finding Remotion’s license terms, FAQ and where to buy a license, with remotion-license.
Check: read the linked terms yourself. The license section below summarizes them.
12. remotion-upgrade: update packages
Use it for updating Remotion packages together with the project’s installed skills, with remotion-upgrade.
Check: review the dependency diff, then reopen a composition after the upgrade.
13. remotion-multimedia: inspect media files
Use it for browser-side audio and video work, including reading file metadata, with Mediabunny through remotion-multimedia.
Check: the values come from the file itself, not from its name or your intended export settings.
Five starter projects
These are example projects that use the skills above, not additional official skills. Start with the title card: it needs no external files.
14. A six-second title card
Input: text and colors only. 1920×1080 at 30 fps for six seconds is 180 frames.
Check: 180 frames, readable text, headline before subtitle, and each element selectable on its own. Then render it with the command in the next section.
15. A three-feature product promo
Input: three screenshots of your product and labels that describe real features.
Check: each label matches what its screenshot shows. When approved, render FeaturePromo to out/feature-promo.mp4.
16. An animated bar chart
Input: your numbers. The values below are made-up practice data.
Check: final values, relative bar heights and the shared baseline. When approved, render DemoChart to out/demo-chart.mp4 and check the last frame.
17. A captioned clip
Input: your video and a reviewed SRT file.
Check: watch the whole clip with sound. When approved, render CaptionedClip to out/captioned-clip.mp4.
18. A reusable brand template
Input: the approved LaunchCard. Turning its text and color into input props lets you render new versions without touching the design.
Check: preview both the defaults and the new values. When you render the variation, check the exported words and color rather than assuming the preview values reached the render.
For prompts that cut footage you already have, see our video editing prompt library.
Preview, revise, then render the MP4
The loop is: prompt, composition, Studio review, revision, explicit render, file check. Remotion’s best-practices skill tells the agent to render only when you ask for it clearly, so a finished preview is not a finished file.
Before rendering LaunchCard, check three things:
- Timing: six seconds at 30 fps, headline first, subtitle second, fade at the end.
- Readability: text stays legible in motion and on the held frame.
- Editability: the text and accent can each be selected in Studio. Ask the agent which values have to stay in code.
If the preview shows an error, fix the composition before asking for a render. If it looks right but an element can’t be selected, use remotion-interactivity. Then ask for the render:
Or render it yourself from the project folder with the Remotion CLI:
npx remotion render LaunchCard out/launch-card.mp4LaunchCard is the composition ID. Passing the ID and output path skips the interactive composition picker. Play the MP4, compare it with the preview, and keep the project next to the file so you can make changes later.
Remotion licensing and costs
Under the Remotion license, individuals, for-profit organizations with up to three employees, and nonprofits can use Remotion for free. Everyone else needs a Company License. The pricing page listed these options on November 12, 2026:
| License | For | Price |
|---|---|---|
| Creators | Making videos by hand | $25/month per seat |
| Automators | Automated rendering | $0.01/render, $100/month minimum |
| Enterprise | Custom terms | From $500/month |
The license is one of four separate costs. The others are your coding agent (Remotion’s guide notes that most require a paid subscription), the computer or cloud that renders, and any outside service you use for maps or transcription.
You also take on a code project. You can build reusable compositions and data-driven variations, but you resolve dependency errors, supply the media and check every output yourself.
When an editor like ChatCut fits better
Choose Remotion when the React composition is the thing you want to keep and reuse, for example a template you render many times with different data. Choose an editor when the job is mostly arranging footage and you want to adjust the result by hand on a timeline.
How we chose
ChatCut publishes this guide. We compared the two by what you work on, how you revise visually and what you reuse, using each product’s documentation. We did not run side-by-side renders or rank speed or quality.
| Question | Remotion + agent | ChatCut + agent |
|---|---|---|
| What you work on | React project | Editor timeline |
| Visual revision | Studio writes code | Canvas properties |
| What you reuse | Compositions, props | Templates, styles |
ChatCut is a video editor that Claude Code and Codex can drive through ChatCut Desktop. You describe the edit in the agent; ChatCut shows the real timeline, and you can adjust it by hand at any time (Agent Plugin docs). Its Motion Graphics cover titles, lower thirds, callouts, data charts, diagrams and animated overlays. In ChatCut Desktop 0.3.13 or later, you select a graphic on the timeline to edit its text, font, color and other exposed properties directly, and ask the agent for structural changes (Motion Graphics docs).
For product promos, ChatCut’s App Promo Skills take your product website and rebuild one of 46 styles with your logo, colors, copy and product screens as editable Motion Graphics.
Setup: install ChatCut Desktop on macOS 13 or later (Apple silicon or Intel) or Windows 10 or later (x64); Linux isn’t supported yet. In a new Claude Code or Codex conversation on that computer, send:
Sign in to ChatCut if it asks, then start a new conversation so the agent loads ChatCut’s tools. The Claude video-editing guide walks through a first edit.
Cost: with Claude Code or Codex, the agent’s reasoning is covered by your Claude or ChatGPT plan, not ChatCut credits. ChatCut credits are used when the workflow calls a ChatCut-hosted generation service, such as video, image, music, sound effects or voiceover. App Promo Skills run by ChatCut’s built-in Agent also use credits.
Remotion doesn’t need ChatCut, and ChatCut doesn’t document a way to import a Remotion project, so treat them as separate tools.
