Create a new Remotion video
Scanned 9/2/2026
Install to Claude Code
npx -y skills add guanyang/open-agent-hub --skill remotion-create --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Remotion Create?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/guanyang-remotion-create-open-agent-hub)More formats (shields.io, HTML) on the badges page.
---
name: remotion-create
description: Create a new Remotion video
version: 4.0.520
---
These are instructions for making a new Remotion project and composition.
If this is not the next task, see Remotion Best Practices
## 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:
```bash
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 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.
## Interactivity Best Practices
By structuring the React Markup following Remotion Interactivity Best Practices, 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:
```bash
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.
## Follow-up
The video creation process has finished.
For follow-up prompts, use Remotion Best Practices
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!