remotion-best-practices：让智能体按帧写 React 视频，先预览再渲染

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

让通用编码智能体写 Remotion 视频，常见的毛病是把网页那套搬过来：用 CSS transition 做动画、改完代码就直接渲染 MP4，结果预览里不动，渲染要等好几分钟还不是想要的样子。remotion-best-practices 是 Remotion 官方仓库 remotion-dev/skills 里的主 skill，当前版本 4.0.534，它自己是一个路由器：判断你要做的事，再把对应的子 skill 读进上下文。

仓库里一共 12 个 skill，只装这一个就够了。官方 README 对它的定位是“包含所有其他 skill，拿不准该用哪个就用它”，各子 skill 的文件夹就嵌在它的目录里。

它让智能体按什么顺序做事

remotion-best-practices 先读你的需求，再分流。要做新视频，就走 remotion-create：目录为空就直接用 npx create-video@latest --yes --blank --no-tailwind . 脚手架，目录里有 .env 或 .git 这类有意义的文件就新建子文件夹，不会硬塞进去。项目能跑起来之后，第一件事是打开 Studio 预览，边写边让你看，而不是写完再给结果。

只有你明确说“渲染”“导出”“给我 MP4”，它才会执行 npx remotion render。官方的理由写在 SKILL.md 里：预览界面本身就有更直观的渲染入口，用户想看的是能互动的预览，不是一个文件。写 React 标记时它转去 remotion-markup，涉及地图动画、字幕、查文档、升级版本，则各有对应的子 skill。

它约束了什么

• 动画只认帧：用 useCurrentFrame() 和 interpolate() 驱动，CSS transition、animation 和 Tailwind 动画类在渲染时不生效，要改写。
• 时间用 fps 换算：秒数一律用 useVideoConfig() 里的 fps 乘出来，比如 trimBefore={4 * fps}，改帧率时不会错位。
• 每个可编辑对象一个 JSX 节点：Studio 靠源码节点定位，想单独拖动、改关键帧的片段不要用循环批量生成。
• 媒体提前挂载：带时序的媒体和 <Sequence> 都加 premountFor={fps}，也就是提前一秒预载。
• 按视频排版，不按网页：1080 px 宽的画面里，主标题至少 84 px，辅助文字至少 44 px，重要内容离边缘留 80 px 以上。

这些规则里最实用的是第一条。照我对 SKILL.md 的理解，它省掉的是“渲染完才发现 CSS 动画没生效”那一轮返工。想做字幕视频，srt-whiteboard-animation 走的是另一条路，让智能体按字幕一幕幕画手绘动画，而这里是你自己用代码写每一帧；OpenMontage 则把 Remotion 当作可选的合成引擎之一。

适合谁

会写 React、想用代码批量做视频的人最对口，比如数据可视化、产品宣传片、模板化的字幕视频。skill 的作用是少走弯路，并不替你做设计，画面好不好看还是看你给的素材和要求。

有一点要先弄清：这个 skill 的仓库没有单独的许可证文件，GitHub 上的 license 字段为空。它教的是 Remotion，而 Remotion 本身的许可证（截至 2026-10-08 的 LICENSE.md）是分层的：个人、3 人及以下的营利组织、非营利组织可以免费使用，包括商用；更大的营利公司需要购买公司许可。公司项目上线前，先对照官方条款，别只看 skill 免费。

另外它需要 Node.js 和 Git，子 skill 的版本跟 Remotion 版本号同步（当前 4.0.534），项目里装的 Remotion 版本差得太远时，规则可能对不上，官方为此准备了 remotion-upgrade。remotion-docs 会请求 Remotion 文档站的公开搜索接口，离线环境用不了。仓库截至 2026-10-08 有 4,883 星，最近一次提交在 10 月 7 日。