video

使用 remocn 制作视频

需求：$ARGUMENTS

首先加载 remocn 技能。它包含此流程所依赖的约定（两个组件层级、Canvas 与时长、设计默认值）以及 references/archetypes/ 中的配方。此技能规定了工作顺序；另一个技能提供了相关知识。

按顺序完成各步骤。不要跳过分镜确认：这是调整方向成本最低的时机。

1. 阅读需求和项目

• 在提问前，从需求和代码仓库中提取内容：README、落地页文案、package.json、近期发布记录。只针对仍缺少的信息提问，并在一条消息中提出；如果信息不足，不要因此卡住，而是使用诚实的占位内容。
• 从 remocn 技能的 references/archetypes/index.md 中选择原型，并阅读对应配方。其中的内容要求说明需要收集哪些信息；如果需求未指定时长，则以时长变体设定目标长度。

2. 规划分镜

按照 references/storyboard.md 中的格式规划。

• 如果 remocn:video-director Agent 可用，就把需求、已收集的内容、原型和目标长度交给它，然后取回分镜。
• 否则自行规划：从 https://remocn.dev/llms-components.txt 中筛选候选组件，阅读每个选中组件的 .md 页面，并按照格式说明为每个节拍分配时长。

严格按照该格式向用户展示分镜：标题行、包含所有列的表格、安装命令行以及缺少内容的列表。不要用散文复述，也不要改动表格结构。可以在分镜上方简要说明你做出的选择。然后等待用户确认或提出修改，并将修改应用到表格，而不是直接改代码。

3. 设置项目

确认当前属于哪种情况：

• 尚无 Remotion 项目（package.json 中没有 remotion 依赖）：使用 npx create-video@latest --yes --blank <folder> 创建项目，然后在其中工作。Remotion 是 remocn 的前置依赖；只有这种情况才创建项目。
• 已有 Remotion 项目：直接在现有项目中工作，不要重构用户的代码。

接下来，两种情况都执行以下操作：

1. 让项目中的 shadcn add 能正常使用：

   node "${CLAUDE_SKILL_DIR}/scripts/setup.mjs" <project-root>
   

   （在 Claude Code 之外使用：此文件旁边的 scripts/setup.mjs。）shadcn init 不支持 Remotion 项目，而 Remotion 的打包器会忽略 tsconfig 路径，因此该脚本会写入带有 @remocn registry 的 components.json，向 tsconfig.json 添加 @/* 路径，并在 remotion.config.ts 中解析相同的别名。如果项目已有相应配置，则跳过该步骤；如果结果中包含任何 warning，请转告用户。

2. 按照 studio 技能中的 Prepare 步骤操作，让项目可以原样在 Remocn Studio 中打开。

对于已有项目，说明这两个步骤会修改哪些文件，并在执行前征求用户同意。

4. 安装并组合

1. 执行分镜中的安装命令行：npx shadcn add @remocn/<a> @remocn/<b> ...。依赖会一并安装。

2. 将视频写入 src/videos/<slug>/index.tsx。Remocn Studio 会扫描此目录布局，并将其注册为 id 为 <slug> 的 Remotion composition：

   export const meta = {
     durationInFrames: 1356, // Planned total from the storyboard
     fps: 30,
     height: 720,
     width: 1280,
   };
   
   export default function LaunchVideo() {
     return (/* the <TransitionSeries> from the storyboard */);
   }
   

   如果场景代码超过一屏，就放到同一文件夹下的 src/videos/<slug>/scenes/hook.tsx，不要放在视频文件夹旁边。可选的额外导出项：defaultProps 和 zod schema，两者都会传递给 composition。

3. 使用各组件文档页面中准确的 props。Sequence 时长以分镜为准，不要猜测。

4. 进行类型检查（npx tsc --noEmit）并列出 compositions（npx remotion compositions）。列表中必须包含该 slug。继续之前修复所有错误。组件依赖缺少声明文件时，使用 npm i -D @types/<package> 修复，不要使用 any。

5. 检查渲染效果

编写代码的 Agent 看不到画面帧，因此请亲自检查。

• 如果有 remocn:scene-reviewer Agent，请将构图 ID、分镜脚本和项目路径交给它。应用它返回的修复，然后让它再次检查。最多进行 两 轮审查；如果仍有未解决的问题，请告知用户。
• 否则，请自行渲染每个节拍在开始时、运动中间和停留结束时的静帧（npx remotion still <slug> out/review/<beat>-<frame>.png --frame=<n>），打开图像，并根据 remocn 技能的质量标准（references/anatomy.md §3）进行检查。

6. 交接

1. 告诉用户如何预览（npx remotion studio）和渲染（npx remotion render <slug> out/<slug>.mp4）。
2. 提出 “要在 Remocn Studio 中打开以调整并导出吗？”；如果用户答应，请按照 studio 技能的 Open 步骤操作。Remocn Studio 是一款桌面应用，可用于直观调整元素并导出 mp4；Windows 上无法使用，因此请跳过此提议。