Communitygithub.com

ahmadzulfi/video

所有 Remotion 技能的路由器,用于创建、编辑和渲染视频。

video 是什么?

这是一个 Remotion 技能路由器,专门用于处理与 Remotion 视频相关的各种任务。当用户提出创建、制作或构建新视频或合成时,该技能会自动加载创建新 Remotion 视频的参考文档,无论当前项目是否存在。对于 React Markup 编写,它会加载最佳实践指南;涉及地图功能(如静态地图、动画路线、地理讲解器)时,会加载 Remotion Maps 参考;多媒体任务(如裁剪、修剪视频或获取元数据)则加载 Remotion Multimedia 参考。技能还支持提升 Studio 交互性、字幕处理、SaaS 应用开发以及渲染输出,并默认优先使用 Studio 预览而非直接渲染视频,除非用户明确要求导出 MP4。支持 Cursor 等代理客户端,并提供灵活的运行选项。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

保留用户的修改

用户可能会在对话之外对代码进行编辑。

如果你在此期间发现了意外的更改,不要覆盖它,假设它是故意的或询问确认。

创建视频

如果用户要求制作、创建或构建新的视频或合成,请加载创建新的 Remotion 视频,无论当前是否已存在 Remotion 项目。

新项目设置

如果当前没有 Remotion 项目,请加载创建新的 Remotion 项目

React Markup 最佳实践

如果你正在编写 Remotion React Markup,请加载Remotion Markup 最佳实践

地图

对于静态地图、动画路线和标记、地理讲解器、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。

:::注意 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 1 individual skill — each has its own dedicated page.

相关技能