/remotion-create
Create a new Remotion video
$ npx -y skills add remotion-dev/remotion --skill remotion-create --agent claude-codeHow 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.mdname: 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
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)
Repo: remotion-dev/remotion
Other skills on remotion.
- /remotion-best-practices
Router for all Remotion skills
Open skill - /remotion-captions
Transcribing, displaying and animating captions
Open skill - /remotion-docs
Search Remotion documentation
Open skill - /remotion-interactivity
Structure Remotion markup for interactivity
Open skill - /remotion-maps
Remotion Map animation knowledge
Open skill - /remotion-markup
Content, animation and effects best practices
Open skill

