Official视频与动画github.com

remotion-create

创建一个新的 Remotion 视频项目

remotion-create 是什么?

该技能用于创建新的 Remotion 视频项目。它会根据当前文件夹的状态(空文件夹或非空文件夹)智能选择脚手架搭建方式,使用 `create-video` 工具并安装依赖。技能强调了在编辑视频前应打开 Remotion Studio 预览,以便用户实时查看更改。此外,它还提供了关于 React 标记、视频布局、时间线剪辑、多场景视频以及交互性最佳实践的指导,确保用户能够高效地设计和开发 Remotion 视频。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-create

Installed? Explore more 视频与动画 skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

这些是制作新 Remotion 项目和合成画面的说明。 如果这不是下一个任务,请参阅 Remotion 最佳实践。

脚手架搭建项目

如果项目已存在,请跳过此步骤。 确保已安装 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 标记。 遵循 Remotion React 标记最佳实践和视频布局规则,以获取视频优先布局和文本尺寸调整的指导。

在编写注册 <Composition> 或 <Still> 元素的根组件之前,请遵循合成画面和静态画面。

这是一个时间线剪辑吗?

如果视频在时间线上排列多个视频或音频剪辑,请遵循视频编辑指导,然后再编写时间线。为每个应独立编辑的剪辑分配其自己的创作 JSX 节点。

这是一个多场景视频吗?

如果这是一个包含多个连续场景的视频,请遵循多场景视频指导。

交互性最佳实践

通过遵循 Remotion 交互性最佳实践来构建 React 标记,用户可以在 Studio 中进行编辑并写回代码。

TailwindCSS

如果请求使用 Tailwind,请参阅 tailwind.md 了解如何在 Remotion 中使用 TailwindCSS。

后续步骤

视频创建过程已完成。 对于后续提示,请使用 Remotion 最佳实践。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

相关技能