mcpField
R
remotion-create

remotion-create

github.com/guanyang创意与媒体984172 次安装2 天前更新
代码仓库

关于 remotion-create

remotion-create 是指导创建 Remotion 项目与视频合成的技能,面向制作 Remotion 视频的开发者。它涵盖项目脚手架、Studio 预览及合成和场景设计流程。

主要功能

  1. 01创建 Remotion 项目脚手架
  2. 02编辑前启动 Studio 预览
  3. 03指导合成与场景设计
  4. 04处理时间线剪辑及交互

适用场景

  1. 01从空文件夹开始新建视频项目
  2. 02在 Studio 中预览并调整视频
  3. 03构建多场景或剪辑时间线视频

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/guanyang/open-agent-hub --skill remotion-create

安装后在 Claude Code 中输入/remotion-create确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

tailwind.md
video-layout.md
agents/
openai.yaml
assets/
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

评论

支持 Markdown