Communitygithub.com

thanhmati/in-shorts

所有 Remotion 技能的路由器

in-shorts 是什么?

thanhmati/in-shorts 是一个智能路由技能,专为 AI 代理(如 Claude Code、Cursor、Codex 等)设计,用于在 Remotion 视频开发工作流中自动加载最相关的子技能参考文档。当用户请求创建、编辑或渲染 Remotion 项目时,该技能会根据用户意图(如创建视频、设置新项目、处理地图、多媒体、字幕或交互性)动态路由到对应的技能文档。它支持 Remotion Studio 预览、渲染、SaaS 自动化等场景,并确保在启动 Studio 时自动打开浏览器预览。该技能还包含“保留用户更改”的指导方针,防止意外覆盖用户所做的编辑。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/thanhmati/in-shorts/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

运行 Studio 时不加 --no-open 以自动打开浏览器:

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 代理技能,加载 Remotion 升级。

相关技能