video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Make a video with remocn

使用 remocn 制作视频

The brief: $ARGUMENTS

Load the

remocn

skill before anything else. It carries the conventions this flow relies on (the two component tiers, Canvas & timing, design defaults) and the recipes in its

references/archetypes/

. This skill is the order of work; that one is the knowledge.

Work through the steps in order. Don't skip the storyboard confirmation: it is the cheapest point to change direction.

需求说明：$ARGUMENTS

先加载

remocn

skill，然后再进行其他操作。它包含此流程所依赖的规范（两级组件体系、Canvas 与时序、设计默认值），以及

references/archetypes/

中的各种方案。当前 skill 规定工作顺序；

remocn

skill 提供相应知识。

请按顺序完成各步骤。不要跳过分镜脚本确认：这是改变方向成本最低的节点。

1. Read the brief and the project

1. 阅读需求说明和项目

Pull the content from the brief and the repo before asking:
```
README
```
, landing copy,
```
package.json
```
, recent releases. Ask only for what is still missing, in one message, and fall back to honest placeholders rather than blocking.
Pick the archetype from the
```
remocn
```
skill's
```
references/archetypes/index.md
```
and read that recipe. Its content contract tells you what to gather; its duration variants set the target length when the brief doesn't.

在提问前，先从需求说明和仓库中提取内容：
```
README
```
、落地页文案、
```
package.json
```
、最近发布的内容。仅用一条消息询问仍然缺失的信息；如果无法获取，则使用明确标注的占位内容，不要阻塞流程。
从
```
remocn
```
skill 的
```
references/archetypes/index.md
```
中选择原型，并阅读对应方案。其内容契约决定需要收集哪些信息；当需求说明未指定时，其时长版本用于确定目标时长。

2. Plan the storyboard

2. 规划分镜脚本

Plan it in the format of references/storyboard.md.

If the
```
remocn:video-director
```
agent is available, hand it the brief, the gathered content, the archetype and the target length, and take its storyboard back.
Otherwise plan it yourself: shortlist from
```
https://remocn.dev/llms-components.txt
```
, read the
```
.md
```
page of every pick, and budget each beat as the format describes.

Show the storyboard to the user as it is in that format: the header lines, the table with all its columns, the install line and the missing-content list. Don't retell it as prose or reshape the table. A few lines above it on the choices you made are fine. Then wait for a yes or for changes, and apply changes to the table, not straight to code.

按 references/storyboard.md 的格式规划分镜脚本。

如果
```
remocn:video-director
```
agent 可用，将需求说明、已收集的内容、原型和目标时长交给它，并接收它给出的分镜脚本。
否则自行规划：从
```
https://remocn.dev/llms-components.txt
```
筛选候选组件，逐一阅读每个候选项的
```
.md
```
页面，并按照该格式的要求为每个节拍分配帧数预算。

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

3. Set up the project

3. 设置项目

Find out which case you are in:

No Remotion project yet (no
```
remotion
```
dependency in
```
package.json
```
): create one with
```
npx create-video@latest --yes --blank <folder>
```
, then work inside it. Remotion is a prerequisite of remocn; this is the only time you create it.
An existing Remotion project: work in it as it is. Don't restructure the user's code.

Then, in both cases:

Make
```
shadcn add
```
work in the project:
bash
```
node "${CLAUDE_SKILL_DIR}/scripts/setup.mjs" <project-root>
```
(Outside Claude Code:
```
scripts/setup.mjs
```
next to this file.)
```
shadcn init
```
refuses Remotion projects, and Remotion's bundler ignores tsconfig paths, so the script writes
```
components.json
```
with the
```
@remocn
```
registry, adds the
```
@/*
```
path to
```
tsconfig.json
```
, and resolves the same alias in
```
remotion.config.ts
```
. Each step is skipped when the project already has it; relay any
```
warning
```
in the result.
Make the project open in Remocn Studio as-is by following the
```
studio
```
skill's Prepare step.

For an existing project, say which files these two steps will touch and ask before running them.

判断当前属于哪种情况：

还没有 Remotion 项目（
```
package.json
```
中没有
```
remotion
```
依赖）：使用
```
npx create-video@latest --yes --blank <folder>
```
创建一个，然后在该目录中工作。Remotion 是 remocn 的前置依赖；仅在此时创建一次。
已有 Remotion 项目：在现有项目中工作，不要重构用户的代码。

随后，在两种情况下都执行以下操作：

让项目支持
```
shadcn add
```
：
bash
```
node "${CLAUDE_SKILL_DIR}/scripts/setup.mjs" <project-root>
```
（在 Claude Code 之外使用时，运行位于本文件旁的
```
scripts/setup.mjs
```
。）
```
shadcn init
```
不支持 Remotion 项目，而 Remotion 的 bundler 会忽略 tsconfig paths，因此该脚本会写入带有
```
@remocn
```
registry 的
```
components.json
```
，在
```
tsconfig.json
```
中添加
```
@/*
```
路径，并在
```
remotion.config.ts
```
中解析同一个 alias。如果项目中已经存在相应配置，则跳过相应步骤；如结果中有任何
```
warning
```
，应转达给用户。
按照
```
studio
```
skill 的 Prepare 步骤操作，使项目无需修改即可在 Remocn Studio 中打开。

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

4. Install and compose

4. 安装并编排

Run the storyboard's install line:
```
npx shadcn add @remocn/<a> @remocn/<b> ...
```
. Dependencies install transitively.

Write the video as src/videos/<slug>/index.tsx
. This layout is what Remocn Studio scans, and the scan registers it as a Remotion composition with id

<slug>

tsx

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 */);
}

Scenes that grow past a screen of code go next to it in the same folder (

src/videos/<slug>/scenes/hook.tsx

), never beside the video folder. Optional extra exports:

defaultProps

and a zod

schema

, both forwarded to the composition.

Use the exact props from each component's docs page. Sequence lengths come from the storyboard, not from guesses.
Typecheck (
```
npx tsc --noEmit
```
) and list compositions (
```
npx remotion compositions
```
). The slug must be in the list. Fix every error before moving on. A missing declaration file for a component's dependency is fixed with
```
npm i -D @types/<package>
```
, not with
```
any
```
.

运行分镜脚本中的安装命令：
```
npx shadcn add @remocn/<a> @remocn/<b> ...
```
。依赖项会通过传递依赖一并安装。

将视频编写为 src/videos/<slug>/index.tsx
。Remocn Studio 会扫描此目录结构，并将扫描到的内容注册为 id 为

<slug>

的 Remotion composition：

tsx

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。

对每个组件，使用其文档页面中的准确 props。序列长度应来自分镜脚本，而不是凭猜测确定。
执行类型检查（
```
npx tsc --noEmit
```
）并列出 composition（
```
npx remotion compositions
```
）。slug 必须出现在列表中。继续之前修复所有错误。如果组件的依赖缺少声明文件，应使用
```
npm i -D @types/<package>
```
修复，不要使用
```
any
```
。

5. Check the render

5. 检查渲染结果

The agent that writes the code never sees the frames, so look at them.

If the
```
remocn:scene-reviewer
```
agent is available, hand it the composition id, the storyboard and the project path. Apply the fixes it returns, then ask it to check again. Stop after two review rounds and tell the user what is still open, if anything.
Otherwise render stills yourself at the start, the middle of the motion and the end of the hold of each beat (
```
npx remotion still <slug> out/review/<beat>-<frame>.png --frame=<n>
```
), open the images, and check them against the
```
remocn
```
skill's quality bar (
```
references/anatomy.md
```
§3).

编写代码的 agent 不会看到画面，因此要实际查看画面。

如果
```
remocn:scene-reviewer
```
agent 可用，将 composition id、分镜脚本和项目路径交给它。应用它返回的修复建议，然后请它再次检查。最多进行两轮审查，并告知用户仍未解决的问题（如果有）。
否则自行渲染静帧：每个节拍动效开始时、动效中段以及保持段结束时（
```
npx remotion still <slug> out/review/<beat>-<frame>.png --frame=<n>
```
），打开这些图像，并按照
```
remocn
```
skill 的质量基准（
```
references/anatomy.md
```
§3）进行检查。

6. Hand off

6. 交付

Tell the user how to preview (

npx remotion studio

) and render (

npx remotion render <slug> out/<slug>.mp4

Offer "Open in Remocn Studio to tweak and export?" and, on a yes, follow the
```
studio
```
skill's Open step. Remocn Studio is a desktop app for tuning elements visually and exporting mp4; skip the offer on Windows, where it isn't available.

告知用户预览（

npx remotion studio

）和渲染（

npx remotion render <slug> out/<slug>.mp4

）的方法。

主动询问：“要在 Remocn Studio 中打开以微调并导出吗？” 如果用户同意，按照
```
studio
```
skill 的 Open 步骤操作。Remocn Studio 是一款桌面应用，可用于可视化调整元素并导出 mp4；在 Windows 上该应用不可用，因此跳过此邀请。