Skip to content
Development
Skill

/remotion-create

Create a new Remotion video

From plugin
remotion-dev-skills
4.2k12 skills
Install
$ npx -y skills add remotion-dev/skills --skill remotion-create --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/remotion-create

Context preview

The summary Claude sees to decide when to auto-load this skill.

Create a new Remotion video

SKILL.md

remotion-create.SKILL.md
name: remotion-create
description: Create a new Remotion video
version: 4.0.507

These are instructions for making a new Remotion project and composition. If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)

Scaffold a project

If a project already exists, skip this. Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.

Scaffold one using:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

Replace `my-video` with a suitable project name.

Designing a video

Keep the scaffold and add React Markup. Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.

Is this a multi-scene video?

If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).

Interactivity Best Practices

By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.

TailwindCSS

If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.

Open the preview

Start the preview server after building the composition:

npx remotion studio --no-open

This will start a long-running process and print the server URL for the preview. If the server is already started, it will print the URL. If an in-harness browser is available, open it there. You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.

Render the video

Only render if the user explicitly asks for it.

npx remotion render

For more options, see [Rendering](../remotion-render/SKILL.md).

Follow-up

The video creation process has finished. For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)

Read more
Ships withremotion-dev-skills

Remotion maintains a list of Agent Skills that define best practices for working in Remotion projects. These skills are useful for AI agents like Claude Code, Codex, Kimi Code or Cursor.

Get the whole plugin
Stats
4,255
Stars
490
Forks
Active
Maintenance
TypeScript
Language
3d ago
Last commit
6mo ago
Created

Repo: remotion-dev/skills