Communitygithub.com

hiwurun/remotion-saas-boilerplate

所有 Remotion 技能的路由器

remotion-saas-boilerplate 是什么?

此技能作为 Remotion 相关能力的中央路由与整合点,为 AI 代理(如 Claude Code、Cursor 等)提供统一的入口,指导其根据用户任务自动加载对应的子技能参考文档。它覆盖了从视频创作、新项目搭建、React 标记最佳实践、地图与多媒体处理,到交互性优化、Studio 预览、视频渲染、字幕处理、SaaS 应用开发以及 API 文档查找和升级等全方位的使用场景。该技能依赖丰富的子技能模块(如 remotion-create、remotion-maps、remotion-multimedia 等),通过自然语言任务识别来引导代理加载正确的知识,从而高效地辅助用户完成 Remotion 相关的开发和运维工作。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/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 Agent 技能,请加载Remotion 升级。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能