remotion-dev/skills · 上手攻略
- 仓库：remotion-dev/skills
- 链接：https://github.com/remotion-dev/skills
- 分类：agent-skills
- 作者：Tom
- 更新：2026-08-11
是什么
Remotion Agent Skills 是 Remotion 官方维护的 AI Agent 技能库，定义了在 Remotion 项目中工作的最佳实践。通过 npx skills add 安装后，Claude Code、Codex、Kimi Code、Cursor 等 AI 编程助手就能"懂得"如何正确地生成 Remotion 视频代码，而不只是盲目生成 React 代码。
Skills 以 Markdown 文件形式存储在 .claude/skills/ 目录中，每个文件对应一个子技能，包含该领域的指令集与示例提示词。Remotion Agent Skills 本身是一个总包技能，内部聚合了所有子技能。
解决什么问题
在没有 Agent Skills 的情况下，让 AI 生成 Remotion 代码有三个常见问题：
1. 组件 API 乱用：AI 不清楚 <Composition>、<Sequence>、<AbsoluteFill> 的正确用法。
2. 动画函数混淆：Remotion 的 interpolate()、spring()、useCurrentFrame() 与普通 React 动画库混用。
3. 渲染链路不熟：不知道如何正确调用 Remotion Studio 预览、触发本地渲染或 Lambda 远端渲染。
Agent Skills 把 Remotion 团队的最佳实践编码成指令，AI 在遇到对应任务时会自动激活相关技能。
快速安装
前置条件：Node.js ≥ 18（node --version），npm 或 bun。
# 进入已有 Remotion 项目
cd my-video-project
# 安装 skills（安装到 .claude/skills/）
npx skills add remotion-dev/skills
# 验证是否安装成功
ls .claude/skills/
⚠️ 安装时会提示写入项目级（
.claude/skills/）或全局级（~/.claude/skills/），按需选择。全局安装后所有项目可用。
新建 Remotion 项目时自动安装（如果你用 bun）：
bun create video
# 创建过程中会询问是否安装 Agent Skills，选是即可
核心用法
Agent Skills 安装后，AI Agent 会自动识别并加载对应技能。用户只需要用自然语言描述需求，AI 根据 Skills 中的指令自动调用对应子技能。
子技能清单
| 技能名 | 触发关键词 | 用途 |
|---|---|---|
/remotion-create |
新建项目、Composition | 创建 Remotion 项目或新组合 |
/remotion-markup |
React 标签、布局、动画 | Remotion React 标记最佳实践 |
/remotion-studio |
预览、Studio | 启动 Remotion Studio 预览 |
/remotion-render |
渲染、输出视频 | 调用渲染命令 |
/remotion-maps |
地图、Mapbox、GeoJSON | 地图动画专用 |
/remotion-captions |
字幕、caption | 字幕与隐藏式字幕 |
/remotion-saas |
SaaS、视频产品化 | Remotion SaaS 架构 |
/remotion-interactivity |
可交互、可编辑 | Studio 可编辑性配置 |
/remotion-docs |
API 文档、查文档 | 实时查 Remotion 文档 |
/remotion-upgrade |
升级、更新版本 | 升级 Remotion 与 skills |
/remotion-multimedia |
音视频、元数据 | Mediabunny 音视频处理 |
典型交互示例
你："Create a 10-second intro video with animated text that says 'Welcome' with a gradient background"
AI 自动触发 → /remotion-create → /remotion-markup → /remotion-render
你："Add a lower-third animation like news broadcasts"
AI 自动触发 → /remotion-markup（动画相关子技能）
手动验证 AI 是否在使用技能
# 查看已安装的技能文件
ls .claude/skills/remotion-best-practices/
典型适用场景
- AI 代码生成流程：用 Claude Code / Codex 等 AI 编程助手开发 Remotion 项目，降低 AI 生成的代码错误率。
- 快速原型：用 AI 自然语言指令"做出一个 X 动画"，AI 配合 Skills 完整实现。
- 团队规范：将 Skills 作为团队编码规范载体，AI 生成的代码天然符合团队规范。
- 文档生成：用
/remotion-docs让 AI 实时查官方文档而非凭记忆生成。
坑与注意
- 版本兼容性：Skills 与 Remotion 版本强关联，大版本升级后 Skills 需同步更新（用
/remotion-upgrade）。 - 非全局生效：安装在项目级
.claude/skills/只对当前项目有效，换项目后需重装。 - 技能仅限 Remotion：Skills 不会让 AI 懂得通用的 React 动画，它只针对 Remotion API。
- bun vs npm：官方文档用
bun create video，但npx skills add对两者都兼容。 - Skills 不等于 AI 能力：Skills 只是指令集，AI 模型本身对 Remotion 的理解深度仍然受限，复杂动画可能需要手动介入。
与同类对比
| 项目 | 类型 | 特点 | 适用场景 |
|---|---|---|---|
| remotion-dev/skills | AI Agent 技能包 | 官方维护，完整子技能体系 | 已有 Remotion 项目 + AI 编程助手 |
| mattpocock/skills | AI Agent 技能集 | 通用前端技能，不针对 Remotion | 通用前端 AI 编程 |
| vendor 技能（如 grill-with-docs） | 单个 SKILL.md | 社区维护，针对特定库 | 想复用社区技能的场合 |
Remotion Agent Skills 的核心优势是官方维护 + 子技能分工，不像通用技能包需要自己编写 Remotion 相关规则。
一句话推荐结论
如果你在用 Claude Code 等 AI 编程助手开发 Remotion 项目，安装 remotion-dev/skills 是最快提升 AI 代码正确率和开发效率的方式，一行命令即可启用。