关于 remotion-best-practices
remotion-best-practices 是一项指导 Agent 创建和编辑 Remotion 视频项目的技能。它强调保留已有修改、在 Studio 中预览,并为特定任务调用相应指引。
主要功能
- 01保留意外出现的用户修改
- 02按任务调用专门的 Remotion 技能
- 03视频制作期间打开 Studio 预览
- 04仅在明确要求时渲染
- 05提供字幕、地图和多媒体指引
适用场景
- 01创建 Remotion 视频合成
- 02编辑时预览视频合成
- 03处理地图或浏览器多媒体
- 04按要求渲染或导出视频
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ midudev/ autoskills --skill remotion-best-practices安装后在 Claude Code 中输入/remotion-best-practices确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlassets/remotion-icon.svgremotion-captions/display-captions.mdimport-srt-captions.mdREFERENCE.mdtranscribe-captions.mdremotion-captions/agents/openai.yamlremotion-captions/assets/remotion-icon.svgremotion-create/REFERENCE.mdtailwind.mdvideo-layout.mdremotion-create/agents/openai.yamlremotion-create/assets/remotion-icon.svgremotion-docs/REFERENCE.mdremotion-docs/agents/openai.yamlremotion-docs/assets/remotion-icon.svgremotion-interactivity/inline-effects.mdREFERENCE.mdremotion-interactivity/agents/openai.yamlremotion-interactivity/assets/remotion-icon.svgremotion-maps/REFERENCE.mdremotion-maps/agents/openai.yamlremotion-maps/assets/remotion-icon.svgremotion-maps/techniques/cesium/assets/cesium-path.jsonCesiumFlythrough.tsxcity-path.jsonexample-Root.tsxflight-path.tssample-river.geojsonremotion-maps/techniques/cesium/references/3d-data-sources.md详细介绍
保留用户的更改
用户可能会在对话之外编辑代码。
如果你发现期间发生了意外更改,不要覆盖它,应假定这是有意为之,或请求确认。
创建视频
如果用户要求制作、创建或构建新视频或合成,请加载 创建新的 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 已加载。如果已有合成,请确认视频预览已加载。如果无法在此处打开,请在运行 Studio 时不要使用 --no-open。
你可以通过导航到 /[composition-id] 访问特定合成,例如 http://localhost:3000/MapAnimation。
:::note Studio 支持 WebMCP 工具。 :::
如果你没有应用内浏览器
这会在浏览器中打开 Studio;如果 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 Skills,请加载 Remotion Upgrade。