用 React 写视频的隐藏神器：Remotion 速查 Skill 救了我

有没有想过，用 React 写视频？Remotion 就能做到——把视频的每一帧当成 React 组件渲染出来。但在 Claude Code 里用 Remotion 写代码，最大的痛点不是不会写，而是「规则太多」：3D 怎么嵌、Lottie 怎么用、字幕怎么同步时间轴、Mediabunny 怎么取视频时长……翻文档翻到头秃。

直到我装上 remotion-video-creation，这事儿才变得不痛苦。

这 Skill 是干啥的

它是 Claude Code 下专门给 Remotion 用的 skill，作者 affaan-m 把它做成了一份「29 条规则」的速查手册。每条规则都是独立的 markdown 文件，Agent 写代码时会按需加载，避免一次性塞爆上下文窗口。

覆盖的场景包括：

• 动画与转场：animations.md、timing.md、transitions.md，从 spring 曲线到 scene 转场全套
• 素材处理：images.md、videos.md、audio.md、gifs.md、lottie.md，涵盖静态图、视频、音频、GIF 和 Lottie 动效
• 字幕系统：display-captions.md（TikTok 风格高亮）、import-srt-captions.md（导入 SRT）、transcribe-captions.md（音频转字幕）
• 数据可视化：charts.md + Mediabunny 一套取视频时长、尺寸、解码能力
• 3D 内容：3d.md 教你用 Three.js / React Three Fiber 在视频里塞 3D
• 工程细节：fonts.md、tailwind.md、calculate-metadata.md、trimming.md 等

为什么要用它

之前我让 Claude Code 写 Remotion，它输出的代码经常「能跑但难看」——字体加载崩、字幕不对齐、动画曲线太生硬。装上这个 skill 之后，它会主动查规则文件，避开那些常见坑。比如写字幕时，它会优先调 display-captions 而不是自己造轮子；写转场时会用现成的 sequencing 模式而不是硬编 timing。

对独立创作者来说，这玩意儿最大的价值是「少踩坑、多出片」。你不需要记 Remotion 所有 API，只要告诉 Agent「我要做个 60 秒的讲解视频，有字幕、配 BGM、最后一段做个 3D 旋转」，它就能按规则把骨架搭好。

上手有多简单

一行命令装到 Claude Code：

npx skills add affaan-m/everything-claude-code --skill remotion-video-creation

或者装整个 ECC（affaan-m 的全能 Claude Code 工具集）：

npx skills add affaan-m/ecc --skill remotion-video-creation

装好之后，直接在 Claude Code 里说「用 Remotion 做一个产品介绍视频」，它就会自动加载这套规则。Skill 本身有 4100+ 次安装，仓库（affaan-m/ECC）现在 156k star，属于社区公认的「用过就回不去」那一档。

适配场景

适合做：社媒短片、模板化讲解视频、产品演示、数据可视化动效、播客可视化字幕条。不适合：纯剪辑类工作（这个 skill 不处理 Premiere / Final Cut 那种时间轴剪辑逻辑）。

对设计 / 前端 / 视频创作者来说，这是 2026 年最值得装的 Remotion 速查包，没有之一。

GitHub: https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/remotion-video-creation