关于 remotion-create
remotion-create 是用于搭建 Remotion 项目并指导构图创作的技能,面向视频创作者。它涵盖项目初始化、Remotion Studio 预览和视频设计相关指引。
主要功能
- 01Remotion 项目搭建
- 02构图设计指引
- 03Studio 预览流程
- 04多场景与时间线指导
适用场景
- 01从空目录创建 Remotion 项目
- 02编写构图前启动 Studio 预览
- 03制作多场景或剪辑时间线视频
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ remotion-dev/ skills --skill remotion-create安装后在 Claude Code 中输入/remotion-create确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
tailwind.mdvideo-layout.mdagents/openai.yamlassets/remotion-icon.svg详细介绍
这些是创建新的 Remotion 项目和合成的说明。
如果这不是接下来的任务,请参阅 Remotion Best Practices
搭建项目
如果项目已存在,请跳过此步骤。 确保已安装 Node.js 和 Git,并且当前文件夹适合用于创建新项目。
选择搭建位置前,请检查当前文件夹,包括隐藏文件。
空文件夹
如果文件夹为空,或仅包含可丢弃的操作系统元数据(如 .DS_Store),请直接在当前文件夹中创建项目。
先移除这些可丢弃的元数据文件,因为 create-video 不接受非空文件夹。
不要将所有隐藏文件都视为可丢弃文件:.env 等文件和 .git 等目录都是有意义的内容。
在现有文件夹中搭建:
npx create-video@latest --yes --blank --no-tailwind .
npm i
非空文件夹
如果当前文件夹包含有意义的内容,且尚无项目,请在新的子文件夹中搭建。
将 my-video 替换为合适的项目名称。
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
构建视频前打开预览
项目一旦可以运行,就应立即在浏览器中打开 Remotion Studio,然后再编写或修改合成。对于新项目,请在搭建项目并安装依赖后立即执行此操作。对于现有项目,请在编辑视频前执行此操作。工作期间请保持 Studio 运行,让用户能看到变化并及时引导结果。
设计视频
保留搭建好的项目,并添加 React Markup。 请遵循 Remotion React Markup Best Practices 和 Video Layout Rules,了解视频优先的布局和文本尺寸指南。
编写用于注册 <Composition> 或 <Still> 元素的根组件前,
请遵循 Compositions and stills。
这是一个片段时间线吗?
如果视频在时间线上排列了多个视频或音频片段,请在编写 时间线前遵循 Video editing。 为每个需要独立编辑的片段都创建一个专属的 JSX 节点。
这是一个多场景视频吗?
如果这是一个包含多个连续场景的视频,请遵循 Multi-scene videos 中的指南。
交互最佳实践
按照 Remotion Interactivity Best Practices 组织 React Markup,即可让用户在 Studio 中进行编辑,并将更改写回代码。
TailwindCSS
如果需要使用 Tailwind,请参阅 tailwind.md,了解如何在 Remotion 中使用 TailwindCSS。
后续操作
视频创建流程已完成。 对于后续提示词,请使用 Remotion Best Practices