Official视频与动画github.com

remotion-best-practices

所有 Remotion 技能的路由器,用于分发任务到对应的专项技能指南。

remotion-best-practices 是什么?

该技能作为 Remotion 开发的核心路由节点,根据用户请求自动加载对应的专项技能文档(如创建视频、地图动画、多媒体处理、字幕、交互优化等)。它强调保留用户手动修改的代码、优先打开 Studio 交互预览而非直接渲染、以及根据用户使用的客户端(Cursor、带内置浏览器的 Agent、无浏览器环境)提供不同的启动命令。此外,该技能还涵盖升级 Remotion、查阅官方文档、构建 SaaS 应用等内容。支持 Cursor、Codex、Claude Code 等主流 AI 开发环境。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more 视频与动画 skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

在你喜欢的 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 升级。

Individual skills in this repo

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

相关技能