Remotion:49k Star 的开源项目,带 18 个 Agent Skills

用 React 写视频。

这是 Remotion 的核心理念,而且事实证明这想法出奇地好。49,200 star,3,500 fork,633 个 release,4,700 个项目在使用它。Fireship 用它做过视频。GitHub Unwrapped 基于它构建。公司花钱买授权把它用在生产环境。

但这篇文章不讲 Remotion 能做什么。它讲 Remotion 怎么维护自己。

翻到 Remotion 仓库根目录,你会看到一个文件夹:.agents/skills/。里面有 18 个 skill 目录。每个 skill 教会 AI 编程助手如何在这个项目里完成一个具体任务。

Remotion 自带的 Skills

不是作为插件。不是作为扩展。这些 skills 是仓库本身的一部分。

构建功能(add-cli-option、add-effect、add-new-package、add-sfx): 一步步教 agent 实现新功能。add-effect skill 涵盖了着色器编译、模式定义、生命周期钩子、包注册、测试、文档、演示页面、预览图片,以及执行它们的顺序。一个读了这文件的 agent 可以在 @remotion/effects 里添加一个视觉效果,而不需要人类解释架构。

写文档(writing-docs、docs-demo): Remotion 的文档是 MDX 格式。每个 API 独立一页。需要更新侧边栏,渲染预览卡片。writing-docs skill 编码了 agent 必须遵守的约定——面包屑格式、标题层级、twoslash 代码片段、Demo 和 Steps 组件、渲染预览卡片的精确命令。

项目管理(issue、issue-management、pr、pr-name、pr-ready): PR 标题有格式要求:[包名]:提交信息。pr-name skill 强制执行。pr-ready skill 在 agent 标记 PR 为就绪前检查所有必需文件是否已修改、文档是否更新、测试是否通过。

维护(version、update-version、fix-dependabot): 版本号递增、更新日志、自动化的依赖修复 PR。agent 从 packages/core/src/version.ts 读取当前版本,递增 patch,更新所有引用。

调试(video-report、visual-mode、web-renderer-test): 当渲染的视频出问题时,video-report skill 告诉 agent 如何下载出错的视频,把它设为测试源的素材,然后跑一个 verbose 渲染来捕获日志。

为什么存在

AGENTS.md 文件对项目级的说明是够用的。但它很难扩展。对于一个有几十个包、一个自定义许可模型、和一个 Rust 渲染引擎的 49k star 大型仓库,一份 AGENTS.md 会是一万字的长文,agent 根本无法有效使用。

Remotion 的做法是 skill 分解。没有一份巨大的指令文件,而是 18 个聚焦的 skill。一个在处理关于某个效果出问题的 issue 的 agent,不需要知道 PR 命名规范或文档侧边栏结构。它读 add-effect/SKILL.md,拿到它精确需要的东西。

这件事之所以重要,是因为 AI 贡献的瓶颈不是能力,而是上下文。一个能干的 agent 给错了上下文会失败。一个能干的 agent 给对了 skill 文件就能成功。

与众不同之处

我们这系列之前 cover 的 skills——edulab、Seedance2-Skill、Videocut Skills——都是用户安装来扩展自己 agent 的。它们是消费型工具。

Remotion 的 skills 不一样。它们嵌入在项目源码中。它们不是为软件的用户存在的,而是为软件的贡献者存在的。它们是一种可执行的文档——指令不是写给人类逐条对照的 README,而是写给 agent 读和执行的 skill 文件。

这是一个新范式。一个项目把贡献指南以 agent 可读的 skill 文件形式,和源码一起发布。新贡献者——包括 AI 贡献者——克隆仓库后就有了一切需要的东西来开始做有意义的改动。

Skills 在运转

开发者提了一个 issue:“@remotion/effects 包可以考虑加一个像素化转场效果。”

维护者或 AI agent 认领了这个 issue。agent 读 add-effect/SKILL.md:

  1. 检查这个效果是否已经在注册表中存在
  2. 创建 WebGL2 着色器文件,顶点和片元程序
  3. 用 SequenceSchema 实现模式定义——时长、参数、默认值
  4. 接上 setup(创建 WebGL 程序)、apply(绑定 uniform、渲染)、cleanup(释放资源)
  5. 从包 bundle 中导出
  6. 为默认参数、边界情况和 key 唯一性添加测试
  7. 写包含 Demo 组件和预览构图的文档页
  8. 渲染预览卡片
  9. 格式化、构建、验证

每一步都有代码模板、文件路径和命令的文档。agent 不猜测。它照着配方做。

试试看

Remotion 在 github.com/remotion-dev/remotion。Skills 在 .agents/skills/。克隆它,看看 18 份精准的指令文件能让 agent 做到什么。

Remotion on GitHub

相关文章

manim_skill:一个能让 AI 助手正确写 Manim 动画的 Agent Skill

解决痛点 让 ChatGPT 或 Claude 帮你写一段 Manim 动画代码,你大概率会拿到这样的东西: 有时候 import 从 manim 开始,有时候从 manimlib ...

edulab: 把数学题变成交互式 3D 课堂

一个学生盯着立体几何题发呆。"求直线 PQ 与平面 ABC 的夹角。" 课本上只有一张静态图。线叠在一起,角看不清楚。你没法旋转它,没法放大看交点,甚至无法直觉判断那个 120° 的答案在空间里到底对 ...

如何把真实世界的能力封装为 Agent Skill

通用 AI Agent 能力很强,但缺少每支团队都有的东西:程序性知识。你的代码审核清单、部署手册、API 规范——这些都不在模型的训练数据里。 这就是 Agent Skill 要解 ...

gimi-illustration-skill:文章配图不求人,AI Agent 自动出怪诞手绘风

痛点切入 写文章最头疼的环节之一:配图。 你花了两小时写完一篇 3000 字的深度内容,排版也调好了,但文章发出去就是"光秃秃"的。你知道配图能提升阅读量,但打开 Canva 或 Midjo ...

跟 Claude 说一声,图就画好了:/drawio 在 Claude Code 里直接出图

跟 Claude 说一声,图就画好了:/drawio 在 Claude Code 里直接出图

你在跟 Claude Code 描述系统架构。它回复了一堆 ASCII art,差不多能看,但总觉得差点意思。你心想:"要是能直接让它画张图就好了。" 可以。 draw.io 的 Claude C ...

handdraw-story-video:手绘插图秒变短视频,AI Agent 直接出片

痛点切入 你画了一组手绘故事插图,想做成短视频发到抖音、小红书或视频号。 传统做法是什么?打开剪映或 Premiere,把图片一张张导入,手动设置每张的时长,加转场,配音乐,调整字幕位置。8 ...