How to Use Remotion Agent Skills With Claude Code: Prompt to Video in 5 Steps (2026)

Quick answer: Create a Remotion project, run npx remotion skills add inside it, start the preview with npm run dev, then open Claude Code in the same folder and describe the video.

Claude writes the React code, and npx remotion render turns it into an MP4.

Remotion is a framework for making videos with React code. Its official agent skills teach Claude Code how Remotion works, so you can describe a video in plain words and have Claude build it.

This guide walks through setup, the skills you get, example prompts and what to do when something goes wrong.

What Remotion agent skills are

Remotion's agent skills are maintained instructions that give Claude the framework's conventions. They cover timing, media, layout and composition rules, so Claude avoids common mistakes.

They use the open Agent Skills format, the same SKILL.md file explained in what Claude skills are. Remotion publishes the source in its own repository.

The collection includes these skills.

Skill names and contents can change as Remotion updates them.

What you need

• Node.js and npm.
• Claude Code, installed and signed in.
• A terminal.

How to use Remotion skills with Claude Code

1. Create a Remotion project

Run these commands in a terminal.

npx create-video --yes --blank my-video
cd my-video
npm install

If you already have a Remotion project, skip this and open its root folder instead.

2. Install the skills

From inside the project, run the official command.

npx remotion skills add

Remotion also documents a standalone route that works for several agents.

npx skills add remotion-dev/skills

If the tool asks which agent to install for, choose Claude Code.

3. Start the preview

Keep this running in its own terminal.

npm run dev

It opens Remotion Studio, where you can watch the video change as Claude edits the code. Keep it open while you work, instead of rendering a full video after every prompt.

4. Open Claude Code in the project

In a second terminal, start Claude from the same folder.

cd my-video
claude

Starting from the project root matters, because Claude reads the skills installed there.

5. Describe the video

Ask in plain words. If the request spans several areas, start with /remotion-best-practices.

Example prompts:

• "Make a 15-second product launch video with a title, three feature cards and a closing call to action."
• "Create an animated bar chart from this data, with the bars growing one after another."
• "Add a lower-third with my name and role at the 3-second mark."

Review the preview, then ask for changes. Claude edits the code each time, and the preview updates.

How to render the video

When you like the result, render it.

npx remotion render

You can also ask Claude to "export this video as an MP4". Rendering draws every frame and encodes them into a format such as MP4 or WebM, so longer videos take longer.

What Remotion skills are best for

Remotion makes video from code. That suits some jobs much better than others.

• Good fit: animated explainers, product launches, charts, templates and repeatable videos driven by data.
• Poor fit: editing existing footage, such as trimming a recording or cutting a talking-head video.

For footage you already shot, use a video-editing tool or skill instead. Our Remotion Video skill and the Video skill are two community options, and the Image & Video category lists more.

Tips for better results

• Be specific about timing: say how long each scene should last.
• Make small changes: ask for one change at a time, then check the preview.
• Check the diff: Claude can rename files or add packages when a smaller edit would do.
• Use real assets: give it your logo, fonts and colours.
• Commit often: use Git so you can undo a bad edit.

Troubleshooting

Check the licence before commercial use

Remotion has its own licence. It is free for individuals and small teams, but larger companies need a paid licence, so check Remotion's current terms before you use it commercially.

Review any skill you install, too, using our safety checklist.

More skills for creators

Pair this with other tools in our directory. See the best Claude skills and the best Claude design skills, and browse the Image & Video category. New to installing skills? Read how to install an agent skill.

Frequently asked questions

How do I use Remotion agent skills with Claude Code?

Create a Remotion project, run npx remotion skills add inside it, start the preview with npm run dev, and open Claude Code in the same folder. Then describe the video you want.

Is Remotion free?

It is free for individuals and small teams, and larger companies need a paid licence. Check Remotion's current terms before using it commercially.

Do I need to know React?

Not to start. Claude writes the React code from your description. Some React knowledge helps you review and tweak the result.

Can Claude edit an existing video with Remotion?

Remotion generates video from code, so it suits animated and template-based videos. For trimming or cutting existing footage, use a video-editing skill or tool.

Which Remotion skills should I start with?

Start with /remotion-best-practices. Use /remotion-create to begin a project and /remotion-markup for layout and animation.

Methodology and disclosure

This guide draws on Remotion's published Agent Skills documentation and independent setup guides, checked in November 2026. Commands and skill names change between releases, so confirm details in Remotion's documentation.

We have no affiliation with Remotion or Anthropic, and this article contains no affiliate links.