About remotion-create
remotion-create is a skill for scaffolding Remotion projects and guiding composition creation. It helps video creators set up a project, preview it in Remotion Studio, and follow relevant design guidance.
Key features
- 01Remotion 项目脚手架
- 02构图设计指引
- 03Studio 预览流程
- 04多场景与时间线指导
Use cases
- 01从空目录创建 Remotion 项目
- 02在编写构图前启动 Studio 预览
- 03制作多场景或剪辑时间线视频
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/remotion-createin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
tailwind.mdvideo-layout.mdagents/openai.yamlassets/remotion-icon.svgDetails
From the project READMEThese 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.
Inspect the current folder, including hidden files, before choosing where to scaffold.
Empty folder
If it is empty, or contains only disposable operating-system metadata such as .DS_Store, create the project directly in the current folder.
Remove only those disposable metadata files first, since create-video rejects non-empty folders.
Do not treat all hidden files as disposable: files such as .env and directories such as .git are meaningful contents.
Scaffold in existing folder:
npx create-video@latest --yes --blank --no-tailwind .
npm i
Non-empty folder
If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.
Replace my-video with a suitable project name.
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
Open the preview before building the video
As soon as the project can run, open Remotion Studio in the browser before writing or changing the composition. For a new project, do this immediately after scaffolding and installing dependencies. For an existing project, do it before editing the video. Keep Studio running while you work so the user can see changes as they appear and steer the result.
Designing a video
Keep the scaffold and add React Markup. Follow Remotion React Markup Best Practices and Video Layout Rules for video-first layout and text sizing guidance.
Before writing the root that registers <Composition> or <Still> elements,
follow Compositions and stills.
Is this a timeline of clips?
If the video arranges multiple video or audio clips on a timeline, follow Video editing before writing the timeline. Give every clip that should be edited independently its own authored JSX node.
Is this a multi-scene video?
If this is a video with multiple subsequent scenes, 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 for using TailwindCSS in Remotion.
Follow-up
The video creation process has finished. For follow-up prompts, use Remotion Best Practices