Communitygithub.com

zoih6/masafat-watan-video

所有 Remotion 技能的集中路由器

masafat-watan-video 是什么?

此技能是 Remotion 视频创作生态系统的核心路由器,为 AI 代理(如 Claude Code、Cursor 等)提供统一的入口点来管理所有与 Remotion 相关的任务。它能够智能地将用户请求路由到最合适的子技能,包括新视频创建、项目配置、React 标记最佳实践、地图动画(支持 Mapbox/MapLibre/MapTiler/GeoJSON/3D 地理飞越)、多媒体处理(裁剪、修整、获取元数据)、交互式增强、字幕处理、SaaS 自动化应用开发以及文档查询等。该技能还包含重要的用户变更保护机制,确保不会意外覆盖用户的代码修改。其核心工作流程强调以交互式预览优先,默认不渲染视频,而是通过 Remotion Studio 提供实时预览,以便用户在开发过程中持续观察进度并做出调整。只有在用户明确要求“渲染视频”或“导出 MP4”时,才会执行渲染操作。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/zoih6/masafat-watan-video/tree/HEAD/skills-docs/remotion-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 升级。

Individual skills in this repo

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

相关技能