🔍 插件简介

remotion-best-practices 是 Remotion 官方维护的 Agent Skill，为 AI 编程助手提供用 React 制作视频的领域知识和编码规范。它涵盖动画、媒体处理、字幕、图表等 28 条规则，是 Remotion 技能库的总入口。

⚙️ 主要功能一览

这个插件的定位是「路由器」——当你不确定该用哪条具体规则时，它负责把请求分发到对应的技能模块。同时它本身也包含了 Remotion 项目开发的核心最佳实践。

动画与时间控制
  • 基于 useCurrentFrame 的帧驱动动画
  • 插值曲线、缓动函数、弹簧动画
  • 序列化延迟与持续时间控制
媒体处理
  • 图片、视频、音频、字体的导入与引用
  • 音视频裁剪、音量、速度、循环控制
  • GIF 同步与透明视频渲染
高级功能
  • Zod schema 参数化视频
  • 动态计算元数据（时长、尺寸）
  • DOM 节点和文本尺寸测量
可视化与字幕
  • 图表、地图、Lottie 动画嵌入
  • SRT 字幕导入与 TikTok 风格显示
  • 音频转录生成字幕

📦 第一次安装：一行命令

安装前确认环境就绪：Node.js 16+ 已装好、项目目录已初始化。Remotion 提供了多种安装方式，根据你的 AI 工具选择对应的命令。

通用 Skills 安装方式（适用于 Cursor、Cline、Codex 等）：

npx skills add remotion-dev/skills --skill remotion-best-practices

Claude Code 专用插件方式：

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

安装完成后需要重启 AI 工具才能生效。技能文件会出现在对应目录下，比如 Cursor 的 .cursor/skills/remotion-best-practices。

💡 小提示：如果你在用 bun create video 创建新 Remotion 项目，安装过程中会提示你是否添加 Skills，选择确认即可自动完成配置。

🚀 安装后怎么用：直接说话就行

这个插件不需要你记复杂命令。安装完成后，在 AI 助手的对话窗口里直接用自然语言描述需求，它会自动加载相关技能。你也可以用斜杠命令直接调用。

试试这些说法：

  • “帮我做一个 5 秒的淡入标题视频”
  • “给这个组件添加弹簧动画效果”
  • “在这个视频里嵌入背景音乐，音量 0.5”
  • “创建一个 3 场景的视频：开场、产品展示、行动号召”
  • “给视频添加 SRT 字幕”

斜杠命令方式：

/remotion-best-practices Make a promo video for a record store

如果你想手动验证项目状态，可以启动 Remotion Studio 预览：

npm start

这会启动一个本地服务器，你可以在浏览器里实时预览视频效果，修改代码后会自动热更新。

🎯 主要应用场景

批量生成参数化视频 用 Zod schema 定义视频参数，一套模板生成多条不同内容的视频。适合电商产品展示、个性化营销素材等场景。
数据可视化视频 把图表、地图等数据可视化元素嵌入视频，自动生成带动态效果的数据报告或演示视频。
自动化视频流水线 通过代码控制视频生成流程，集成到 CI/CD 管道中，实现视频内容的自动化生产和更新。
字幕与多语言视频 导入 SRT 字幕文件或自动转录音频生成字幕，支持 TikTok 风格的逐词高亮显示。

🔧 使用技巧与帮助

动画必须用 useCurrentFrame 驱动。这是 Remotion 最重要的规则。禁止使用 CSS 过渡或动画，因为它们在渲染时会出问题。所有动画效果都要通过 useCurrentFrame() 和 interpolate() 来实现。

静态资源放在 public 目录。用 staticFile() 引用文件，不要直接写相对路径。图片用 <Img> 组件，视频用 @remotion/media 的 <Video> 组件。

延迟和裁剪用 Sequence。需要延迟内容显示时，用 <Sequence from={...}> 包裹；限制持续时间用 durationInFrames。内联内容记得加 layout="none"。

保持 Studio 预览开启。编辑过程中让 Remotion Studio 一直运行，改完代码立刻能看到效果。这比每次渲染完整视频再检查要快得多。

一次改一个地方。告诉 AI 助手做具体的小修改，比如「把过渡放慢一点」「颜色改成 #FF6B35」，比笼统地说「优化一下」效果好很多。

💡 触发关键词：在对话中提到“Remotion”“视频制作”“React 动画”“视频渲染”“字幕”“参数化视频”等词，插件会自动激活。

🤖 适配哪些 AI 工具

remotion-best-practices 作为 Remotion 官方 Agent Skills 的核心技能，支持多种 AI 编程环境。只要你的助手支持 Skills 或 MCP 协议，基本都能用。

Claude Code Cursor Codex Kimi Code Cline Windsurf Goose

如果你用的工具支持加载自定义 Skill 文件，也可以手动配置使用。安装命令中的 npx skills add 方式适用于大多数环境。