mcpField
R
remotion-best-practices

remotion-best-practices

github.com/midudev创意与媒体7.0k67 次安装1 周前更新
代码仓库

关于 remotion-best-practices

remotion-best-practices 是一项指导 Agent 创建和编辑 Remotion 视频项目的技能。它强调保留已有修改、在 Studio 中预览,并为特定任务调用相应指引。

主要功能

  1. 01保留意外出现的用户修改
  2. 02按任务调用专门的 Remotion 技能
  3. 03视频制作期间打开 Studio 预览
  4. 04仅在明确要求时渲染
  5. 05提供字幕、地图和多媒体指引

适用场景

  1. 01创建 Remotion 视频合成
  2. 02编辑时预览视频合成
  3. 03处理地图或浏览器多媒体
  4. 04按要求渲染或导出视频

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/midudev/autoskills --skill remotion-best-practices

安装后在 Claude Code 中输入/remotion-best-practices确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
remotion-icon.svg
remotion-captions/
display-captions.md
import-srt-captions.md
REFERENCE.md
transcribe-captions.md
remotion-captions/agents/
openai.yaml
remotion-captions/assets/
remotion-icon.svg
remotion-create/
REFERENCE.md
tailwind.md
video-layout.md
remotion-create/agents/
openai.yaml
remotion-create/assets/
remotion-icon.svg
remotion-docs/
REFERENCE.md
remotion-docs/agents/
openai.yaml
remotion-docs/assets/
remotion-icon.svg
remotion-interactivity/
inline-effects.md
REFERENCE.md
remotion-interactivity/agents/
openai.yaml
remotion-interactivity/assets/
remotion-icon.svg
remotion-maps/
REFERENCE.md
remotion-maps/agents/
openai.yaml
remotion-maps/assets/
remotion-icon.svg
remotion-maps/techniques/cesium/assets/
cesium-path.json
CesiumFlythrough.tsx
city-path.json
example-Root.tsx
flight-path.ts
sample-river.geojson
remotion-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。

评论

支持 Markdown