Communitygithub.com

Guilhermeslvg/video-portfolio

所有 Remotion 技能的路由器

video-portfolio 是什么?

该技能作为 Remotion 视频制作工作流的核心路由中心,自动引导 AI 代理根据用户请求选择并加载合适的 Remotion 子技能文档。它支持 Claude Code、Cursor 和 Codex 等主流 AI 代理平台,涵盖了从创建项目、编写 React 标记、处理地图和多媒体、优化交互性,到启动 Studio 预览、渲染视频、处理字幕以及构建 SaaS 应用等全流程场景。其工作原理是基于用户输入的关键词或意图(如“创建视频”、“渲染 MP4”、“使用地图”),动态加载对应的 REFERENCE.md 文件,从而确保代理始终使用最新、最准确的上下文。此外,它还特别强调保留用户对代码的手动修改,以及在开发过程中优先启动交互式预览而非直接渲染,以提升协作效率。

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

如果你在使用其他带有应用内浏览器的 AI 代理客户端

你可以使用上述命令让 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 接口与文档

要查找并阅读当前的 Remotion 文档,请加载 Remotion 文档。

升级

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

Individual skills in this repo

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

相关技能