Communitygithub.com

Shenixo/remotion_portfolio

所有 Remotion 技能的路由器,帮助用户创建、预览和渲染视频。

remotion_portfolio 是什么?

该技能是一个统一的路由器,用于协调多个 Remotion 子技能,包括创建新视频、项目管理、React 标记最佳实践、地图集成、多媒体处理、交互性增强、字幕、SaaS 应用和升级等。它旨在为开发者提供一个一站式入口,根据用户需求自动加载相应的详细文档(REFERENCE.md 文件)。支持在 Cursor 等 AI 代理客户端中使用,提供 Studio 预览和渲染命令。用户可以通过简单的指令触发视频创建、预览、渲染、字幕添加等高级功能,而不需要手动查找多个文档。该路由器还强调保持用户代码修改和安全操作。

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

:::注意 Studio 支持 WebMCP 工具。 :::

如果您没有应用内浏览器

这将打开 Studio 在浏览器中,或者如果已经打开则重新聚焦。

npx remotion studio

更多选项

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

渲染视频

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

预览界面还具有更直观的渲染界面,因此考虑使用它而不是命令行进行渲染。

npx remotion render

更多选项,请参见 渲染。

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

字幕

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

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

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

查找 Remotion API 和文档

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

升级

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

相关技能