How to Use Remotion Agent Skills With Claude Code

The shortest way to use Remotion Agent Skills with Claude Code is to create a Remotion project, install the official skills inside it, open the preview, and start Claude from that same directory:

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

Then open a second terminal:

cd my-video
claude

You can now ask Claude to create a composition, change it while you watch the Remotion preview, and render the finished video. The skills give Claude Remotion-specific instructions; they do not replace the Remotion project or renderer.

This guide follows the current commands in Remotion's Agent Skills documentation and coding-agent setup guide.

What are Remotion Agent Skills?

Remotion is a framework for making videos with React. A composition is code: React components define the frames, animations, text, images, audio, and timing. Claude Code can write that code, but a general coding agent does not automatically know every Remotion convention.

Remotion Agent Skills are maintained instructions that supply those conventions. The collection currently includes:

There are also focused skills for SaaS architecture, Studio interactivity, and multimedia handling. You do not need to invoke every one manually. Start with /remotion-best-practices or describe the job; use a focused slash command when you want to make the workflow explicit.

Before you start

You need:

• Node.js and npm
• Claude Code installed and authenticated
• A terminal
• A Remotion project, either new or existing

Remotion's official guide notes that most coding agents require a paid subscription. Creating and previewing a basic Remotion project happens locally; other costs depend on the assets, APIs, fonts, or rendering infrastructure you choose.

Step 1: Create a blank Remotion project

Run Remotion's blank-project command:

npx create-video --yes --blank my-video

my-video is the project directory. Change it to any folder name you want, then enter the directory and install its dependencies:

cd my-video
npm install

If you already have a Remotion project, skip this step and open that project's root directory instead.

Step 2: Install the Remotion Agent Skills

From inside the Remotion project, run:

npx remotion skills add

This is the install command Remotion uses in its coding-agent guide. Remotion also documents a standalone Skills CLI route:

npx skills add remotion-dev/skills

Use one route, not both. The first is convenient inside a Remotion project. The second is useful when you already use the Skills CLI to manage skills across agents.

To check what the Skills CLI can see for Claude Code, run:

npx skills list --agent claude-code

Step 3: Start the Remotion preview

Keep the project terminal open and run:

npm run dev

This launches Remotion Studio, where you can watch the composition as Claude changes the code. Keep the preview running during the editing loop rather than rendering a full video after every prompt.

Step 4: Start Claude Code in the project

Open a second terminal window and run:

cd my-video
claude

Starting Claude from the project root matters: it gives the agent the project files, dependencies, and project-installed skills in the same context.

If you installed the skills while Claude Code was already running, exit and start a new session before troubleshooting. The new session gives Claude a clean opportunity to discover the installed instructions.

Step 5: Create your first composition

Remotion's documented example is:

/remotion-create Make a promo video for a record store

A more constrained prompt usually produces a result that is easier to review:

/remotion-create Create a 15-second, 1920×1080 launch video for a note-taking app.
Use three scenes: a two-second title card, an eight-second product demo section,
and a five-second call to action. Use a dark background, large readable type,
and restrained spring animations. Do not add stock footage or external assets.

Useful constraints to include are:

• duration, dimensions, and frame rate
• the exact scene order and timing
• text that must appear verbatim
• asset paths Claude may use
• visual references, colors, fonts, and motion style
• anything Claude must not invent or download

Treat the first prompt as a brief, not a magic render button. Review the preview, then ask for one concrete change at a time: shorten a scene, increase contrast, replace an easing curve, or move an element by a specific amount.

Step 6: Preview and render

Use the Studio skill when you need Claude to launch or troubleshoot the preview:

/remotion-studio

When the composition is ready, ask the rendering skill to produce a video or still:

/remotion-render

Confirm the composition, output format, resolution, and destination before a long render. A successful preview proves the composition loads; it does not guarantee that every external asset, font, or network request will behave the same way during rendering.

How to use the skills in an existing Remotion project

You do not need to scaffold a new project. From the root of an existing Remotion repository:

npx remotion skills add
npm run dev

Then start Claude Code in a second terminal from the same directory. Begin with a narrow task that preserves the existing structure, for example:

Use the Remotion skills already installed in this project. Add a new 10-second
composition named FeatureIntro. Reuse the existing fonts and color tokens.
Do not modify the current compositions or rendering configuration.

Before accepting a large edit, inspect the diff. Agent Skills improve Remotion-specific decisions, but Claude can still rename files, add dependencies, or change shared components when a smaller edit would have been enough.

Which skill should you use?

Use /remotion-create for a new composition, /remotion-markup for visual and timing changes, /remotion-captions for subtitles, and /remotion-render when the code is ready to export.

If the request crosses several areas, start with /remotion-best-practices. If Claude is unsure about a current API or package, ask it to use /remotion-docs before changing the code. That is safer than relying on an API pattern remembered from an older Remotion version.

Remotion skills versus video-editing skills

Remotion skills are best when the video should be generated as React code: animated explainers, product launches, charts, templates, and repeatable data-driven videos.

They solve a different job from skills that edit existing footage. If you already have a screen recording or talking-head video, a skill such as Cut Video, Clipify, or Add Zooms works directly on that media instead. Tella's Claude Code skills directory collects those recorded-video workflows, while our best Claude Code skills guide compares them with other skill projects.

A practical split is:

• Use Remotion to generate designed scenes and motion graphics from code.
• Use editing skills to cut, reframe, caption, or enhance footage you already recorded.
• Combine them when a recorded demo needs a generated intro, lower third, chart, or end card.

Common setup problems

Claude does not show the Remotion commands

Make sure you installed the skills from the project root, then start a new Claude Code session in that same directory. With the standalone CLI, check the installation with:

npx skills list --agent claude-code

If the list is empty, run the install command again and select Claude Code when the CLI asks which agent to target.

The preview does not start

Run npm install before npm run dev, and read the first terminal error rather than asking Claude to redesign the composition. A missing package, unsupported Node.js version, or occupied port is a setup problem, not a motion-design problem.

Claude changes too much at once

Constrain the file, composition, and behavior in the prompt. Ask Claude to preserve existing compositions and dependencies, then inspect the diff after each step. Smaller prompts make visual regressions easier to identify in Studio.

The preview works but the render fails

Check fonts, remote media, and asset paths. Rendering is less forgiving of resources that only happen to be available in your browser session. Ask /remotion-render to diagnose the concrete render error, and use /remotion-docs when the failure involves a current API.

The short version

For a new project, these are the commands that matter:

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

In a second terminal:

cd my-video
claude

Then start with /remotion-create, refine the result in Studio, and use /remotion-render when the composition is ready. The skills make Claude better at Remotion; clear constraints and a visible preview loop are what make the output controllable.