Communitygithub.com

mattpbakerdev-oss/ugc-shorts-pipeline

所有 Remotion 技能的中央路由与协调器

ugc-shorts-pipeline 是什么?

该技能充当所有 Remotion 相关技能的路由器。当用户提出视频生成、项目创建、交互式预览、渲染、字幕、地图、多媒体处理或 SaaS 集成等需求时,它会智能地引导代理加载对应的专用子技能参考文件。它通过引用独立的技能文档来保持主对话的简洁,并提供精确的上下文信息。支持 Claude Code、Cursor 及其他代理客户端,能够根据客户端环境自动选择最佳的 Remotion Studio 启动方式。该技能还强调保留用户手动修改的代码,避免意外覆盖,并优先使用交互式 Studio 预览而非直接渲染,只有在用户明确要求时才执行渲染。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/mattpbakerdev-oss/ugc-shorts-pipeline/tree/HEAD/.agents/skills/remotion-best-practices

在你喜欢的 AI 中提问

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

文档

保留用户更改

用户可能会在对话之外对代码进行编辑。

如果你发现代码发生了意外的更改,请不要覆盖它,请假设这是用户有意为之,或者请求确认。

创建视频

如果用户要求制作、创建或构建新的视频或组合,请加载 创建新的 Remotion 视频,无论当前是否已存在 Remotion 项目。

新项目设置

如果当前不存在 Remotion 项目,请加载 创建新的 Remotion 项目

React 标记最佳实践

如果你正在编写 Remotion React 标记,请加载 Remotion 标记最佳实践

地图

对于静态地图、动态路线和标记、地理讲解、Mapbox、MapLibre、MapTiler、GeoJSON 或 3D 地理漫游,请加载 Remotion 地图。

多媒体

为了在浏览器中实现多媒体任务,例如裁剪、剪切视频或从中获取元数据,请加载 Remotion 多媒体

提升交互性

通过良好地组织 Remotion 标记,我们可以让用户在 Studio 中交互式地更改内容并写回代码。如果相关,请参考:交互性最佳实践

打开预览

如果用户要求“制作”视频、“创建”视频等。除非用户非常明确,否则默认不渲染视频。他们更希望看到交互式预览。 一旦项目可以运行,请启动 Studio 并在构建或编辑组合之前先在浏览器中打开预览。在您工作期间保持预览打开,以便用户观察进度并进行指导。

如果你正在使用 Cursor

使用不带 --no-open 的方式运行 Studio,以便自动打开浏览器:

npx remotion studio

如果你正在使用其他具有内置浏览器的代理客户端

你可以使用上述命令让 Studio 打开浏览器,或者运行:

npx remotion studio --no-open

这将启动一个长时间运行的进程,并打印预览的服务器 URL。 如果服务器已经启动,它将打印 URL。 如果你使用 --no-open,请在浏览器中打开打印的确切 URL,并验证 Studio 是否加载成功。一旦存在组合,请验证其视频预览是否加载成功。如果你无法在其中打开,请使用不带 --no-open 的方式运行 Studio。 你可以通过导航到 /[composition-id] 来访问特定组合,例如 http://localhost:3000/MapAnimation。

:::note Studio 支持 WebMCP 工具。 :::

如果你没有内置浏览器

这将在浏览器中打开 Studio,如果它已经打开,则将其聚焦。

npx remotion studio

更多选项

要启动 Remotion Studio 中的项目,打开其确切的本地 URL,或配置 Studio CLI 标志,请加载 Remotion Studio。

渲染视频

仅在用户非常明确地要求时才进行渲染。 例如:“渲染视频”、“导出”、“给我 MP4”。

预览也提供更直观的渲染界面,因此请考虑使用它而不是命令行进行渲染。

npx remotion render

更多选项,请参阅 渲染。

对于超出简单 npx remotion render 的高级渲染,请参阅:渲染最佳实践

字幕

处理字幕时,请加载 Remotion 字幕。

创建 SaaS、自动化或应用程序

使用 Remotion SaaS 技能 获取关于基于 Remotion 的 SaaS 应用的知识,例如 <Player>、在 Lambda、Vercel、Cloudflare 上渲染、通过 Express.js 渲染、客户端渲染,或寻找合适的 SaaS 模板。

查阅 Remotion API 和文档

要查找和阅读最新的 Remotion 文档,请加载 Remotion 文档。

升级

要升级 Remotion、相关包、兼容的 Mediabunny 包以及已安装的 Remotion Agent 技能,请加载 Remotion 升级。

相关技能