Communitygithub.com

Remocn/remocn

在 Remocn Studio 桌面应用中打开 Remotion 项目,用于可视化调优视频并导出 mp4。当用户想要打开、继续或导出 Remocn Studio 中的视频时,或在视频构建完成后用户接受在 Studio 中打开的建议时使用。同时会预处理项目,使其能够被 Studio 打开。

remocn 是什么?

此技能实现了 Remocn Studio 与 AI 编码代理(如 Claude Code、Cursor 或 Codex)之间的无缝交接。Remocn Studio 是一款适用于 macOS 和 Linux 的桌面应用,可实时预览 Remotion 项目,允许用户手动调整元素并导出 mp4 文件。该技能提供了一个助手脚本和一个清晰的两步工作流:首先,通过 'Prepare' 步骤初始化项目,写入 Studio 所需清单(如 project.json)并设置视频注册表;然后,通过 'Open' 步骤在 Studio 中打开项目。它智能处理多种场景,包括深度链接、应用首次启动、未安装软件或不支持的平台,并给出明确的用户提示。一个关键的预防措施是禁止手动复制 project.json 文件,以避免因重复的 projectId 导致冲突。该工具通过标准化接口,极大简化了从代码生成到视觉编辑的过渡,适用于 macOS 和 Linux 上的 Remotion 项目开发。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Remocn/remocn/tree/HEAD/plugins/remocn/skills/studio

在你喜欢的 AI 中提问

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

文档

Remocn Studio 交接

Remocn Studio (https://remocn.studio) 是一款适用于 macOS 和 Linux 的桌面应用。它可以实时预览 Remotion 项目,让用户通过手动调整元素,并导出 mp4。它只打开自己能够识别的文件夹,因此项目需要先通过 Prepare 步骤(只需一次),之后便可随时 Open。

助手脚本位于 ${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 "<视频或产品名称>"

它做了什么以及需要告知用户的内容:

  • 如果 .remocn/project.json(Studio 的项目清单:包含一个全新的 projectId、revision: 0,无品牌信息)不存在,则写入该文件。已存在的清单不会被修改:其 projectId 是项目在 Studio 中的身份标识。
  • 如果不存在,则在 src/videos/registry.tsx 处放置 Studio 的扫描入口,并在入口点中将根组件包裹为 registerRoot(withVideos(Root))。此后,每个在 src/videos/<slug>/index.tsx 中导出 meta 的文件都会成为一个 id 为 <slug> 的 composition,无论在 Remotion Studio 还是 Remocn Studio 中都是如此。用户原先在 Root.tsx 中的自有 composition 仍能正常工作。

对于用户已有项目,请在运行前征得同意:它会修改入口点(添加一个 import、一个包裹语句)并新增两个文件。

如果结果返回 ok: false 并附带了入口点相关的原因,说明入口点没有在 import 之后恰好调用一次 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>

根据结果中的 action 字段,将 message 转发给用户:

  • deep-link:Studio 正在打开项目并显示确认对话框。无需其他操作。
  • launched:Studio 已启动,但还无法自动打开指定文件夹。告知用户选择 打开文件夹(macOS 使用 ⌘O,Linux 使用 Ctrl+O),然后选取项目根目录,并提供路径。
  • not-installed:给出下载链接 (https://remocn.studio) 以及安装后同样的打开文件夹步骤。
  • 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 中,没有本地项目可以交接。请引导用户使用带有此插件的编码代理(如 Claude Code、Codex),或者使用 Remocn Studio 自带的模板。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能