Communitygithub.com

serdarky-lab/Videos

所有 Remotion 技能的路由器

Videos 是什么?

这个名为 Videos 的技能充当一个智能路由器,将所有与 Remotion 视频创作相关的子技能整合到一个统一的界面中。它的核心价值在于,开发者无需记住多个独立的技能名称,而是可以通过这个路由器自动加载正确的子技能。该技能支持 Claude Code、Cursor 等 AI Agent 客户端,并实现了 Remotion 项目从创建、编辑、预览到渲染的全流程覆盖。它涵盖了 Remotion Studio 的启动与预览、视频渲染、多媒体处理、地图动画、字幕支持、SaaS 应用程序开发以及 API 文档查阅等关键功能。此外,该技能还特别强调了用户代码变更的保护机制,避免 AI 在对话中无意覆盖用户的本地修改。

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

如果您使用其他具有内置浏览器的 Agent 客户端

您可以使用上述命令让 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 升级

相关技能