关于 studio
面向 Claude Code 的技能,用于将 Remotion 项目交接给 Remocn Studio。它可初始化项目元数据并注册视频,然后引导在桌面应用中打开项目。
主要功能
- 01初始化 Remocn 项目元数据
- 02注册 src/videos 中的视频
- 03在 Remocn Studio 中打开项目
- 04检测 Studio 是否已安装
- 05引导使用不受支持平台的替代方案
适用场景
- 01为 Studio 准备 Remotion 项目
- 02将准备好的项目交接以进行实时预览
- 03检查 Studio 是否已安装
- 04在 Studio 不支持的平台上提供替代方案
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ remocn/ remocn --skill studio安装后在 Claude Code 中输入/studio确认已加载。
附带文件assets/registry.tsxscripts/studio.mjs
详细介绍
Remocn Studio 交接
Remocn Studio(https://remocn.studio)是一款适用于 macOS 和 Linux 的桌面应用。它可以实时预览 Remotion 项目,让用户手动调整元素,并导出 mp4。它只会打开自己能识别的文件夹,因此项目需要先执行一次 Prepare,之后便可随时 Opened。
辅助脚本位于 ${CLAUDE_SKILL_DIR}/scripts/studio.mjs(在 Claude Code 之外:本文件旁的 scripts/studio.mjs)。它只需要 Node,每条命令会输出一个 JSON 对象。请在 Remotion 项目根目录下运行,或将根目录作为第一个参数传入。
Prepare
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" init <project-root> --name "<video or product name>"
它的作用,以及需要告知用户的内容:
- 如果
.remocn/project.json不存在,则创建该文件(Studio 的项目清单:生成新的projectId、revision: 0,且不含品牌信息)。已有的清单绝不会被修改:其中的projectId是项目在 Studio 中的身份标识。 - 如果
src/videos/registry.tsx不存在,则将 Studio 的扫描器放置于此,并将入口点中的根组件包装为registerRoot(withVideos(Root))。从此以后,所有导出meta的src/videos/<slug>/index.tsx都会成为一个 id 为<slug>的合成,在 Remotion Studio 和 Remocn Studio 中均可使用。用户在Root.tsx中自行创建的合成也会继续正常工作。
如果是用户已有的项目,请先征求同意再运行:这会修改他们的入口点(添加一条导入语句并进行一次包装),还会添加两个文件。
如果结果显示 ok: false,且原因与入口点有关,则说明入口点没有在导入语句之后恰好调用一次 registerRoot(Root)。请手动进行包装:使用结果中的 specifier(相对于入口点,例如 remotion/index.ts 对应 ../src/videos/registry),添加 import { withVideos } from "<registry.specifier>";,并将调用改为 registerRoot(withVideos(Root))。如果无法做到,请向用户解释原因。
然后检查 npx remotion compositions 是否列出了每个视频 slug。
Open
只有在用户同意于 Studio 中打开项目后:
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" open <project-root>
转述结果中的 message。根据 action 执行相应操作:
deep-link:Studio 正在打开项目,并显示确认对话框。无需进行其他操作。launched:Studio 正在启动,但暂时无法指定要打开的文件夹。请告知用户选择 Open Folder(macOS 上按 ⌘O,Linux 上按 Ctrl+O),选取项目根目录,并提供该目录的路径。not-installed:提供下载链接(https://remocn.studio),并告知用户安装后按上述步骤选择 Open Folder。unsupported-platform:Studio 无法在此操作系统上运行。视频仍可通过npx remotion studio预览,并通过npx remotion render <slug>渲染。
如果结果显示清单缺失,请先运行 Prepare。
若要检查 Studio 是否已安装,但不打开任何内容,请运行 detect 命令。
注意事项
- 不要手动创建
.remocn/project.json,也不要从其他项目复制该文件。两个项目若使用相同的projectId,会在 Studio 中发生冲突,Studio 会拒绝打开第二个项目。 - 不要将视频移出
src/videos/<slug>/。Studio 根据文件夹名称识别视频。 - 在 claude.ai 或 ChatGPT 中,没有可交接的本地项目。请引导用户使用安装了此插件的编码 Agent(Claude Code、Codex),或使用 Remocn Studio 自带的模板。