# How to Use Remotion Agent Skills With Claude Code
> Install Remotion Agent Skills in Claude Code, create or open a Remotion project, preview your composition, and render a video from a prompt.
**Author:** Johnny
**Published:** 2026-08-27
---
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:

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

Then open a second terminal:

```bash
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](https://www.remotion.dev/docs/ai/skills) and [coding-agent setup guide](https://www.remotion.dev/docs/ai/coding-agents).

## 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](https://github.com/remotion-dev/skills) are maintained instructions that supply those conventions. The collection currently includes:

| Skill | Use it for |
| --- | --- |
| `/remotion-best-practices` | General Remotion guidance when you are unsure which skill applies |
| `/remotion-create` | Creating a project or composition |
| `/remotion-markup` | Layout, animation, typography, media, audio, fonts, and timing |
| `/remotion-studio` | Starting Studio to preview a video |
| `/remotion-render` | Rendering a video or still |
| `/remotion-captions` | Captions and subtitles |
| `/remotion-maps` | Map animations, routes, markers, and geographic explainers |
| `/remotion-docs` | Looking up current Remotion documentation |
| `/remotion-upgrade` | Updating Remotion packages and installed skills |

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](https://nodejs.org/) and npm
- [Claude Code](https://claude.com/product/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:

```bash
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:

```bash
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:

```bash
npx remotion skills add
```

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

```bash
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](https://skills.sh/) to manage skills across agents.

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

```bash
npx skills list --agent claude-code
```

## Step 3: Start the Remotion preview

Keep the project terminal open and run:

```bash
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:

```bash
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:

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

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

```text
/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:

```text
/remotion-studio
```

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

```text
/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:

```bash
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:

```text
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](/skills/cut-video), [Clipify](/skills/clipify), or [Add Zooms](/skills/add-zooms) works directly on that media instead. Tella's [Claude Code skills directory](/skills) collects those recorded-video workflows, while our [best Claude Code skills guide](/blog/best-claude-code-skills) 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:

```bash
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:

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

In a second terminal:

```bash
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.