mcpField
S
studio

studio

github.com/remocn创意与媒体1.7k189 次安装1 天前更新
代码仓库

关于 studio

面向 Claude Code 的技能,用于将 Remotion 项目交接给 Remocn Studio。它可初始化项目元数据并注册视频,然后引导在桌面应用中打开项目。

主要功能

  1. 01初始化 Remocn 项目元数据
  2. 02注册 src/videos 中的视频
  3. 03在 Remocn Studio 中打开项目
  4. 04检测 Studio 是否已安装
  5. 05引导使用不受支持平台的替代方案

适用场景

  1. 01为 Studio 准备 Remotion 项目
  2. 02将准备好的项目交接以进行实时预览
  3. 03检查 Studio 是否已安装
  4. 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 自带的模板。

评论

支持 Markdown