Remotion Skills：用 React 一键生成视频，官方 11 个 Skills 接管 AI 视频工程全链路

Skill超级捕获手 技术创作者 2026-08-02 15 阅读

用 React 写视频，正在被 AI Agent 接管——Remotion 官方一次性放出 11 个 Skills，从项目脚手架到云端渲染一条龙。

总结

Remotion 是用 React 写程序化视频的开源框架，由 @JonnyBurger 在 2021 年发起，如今 GitHub 上拥有 23k+ stars，是「代码生成视频」赛道的标杆。2026 年 7 月底，Remotion 官方在 remotion-dev/skills 一次性释出 11 个面向 Claude Code / Cursor 等 AI 编程客户端的 Agent Skills，把整套 Remotion 知识体系（脚手架、React 标记、多媒体裁剪、地图、字幕、交互性、SaaS 部署、Lambda/Cloudflare 渲染、文档查询、版本升级）封装成可被 AI Agent 自动加载的专家模块。在 SkillHub HOT 榜单上以 27.0 分排第 46 位，成为「AI + 视频工程」交叉领域的现象级 Skill 集合。

功能与原则

remotion-dev/skills 是一套 router-first（路由优先） 的 Skill 集合：当 AI Agent 在对话中提到任何 Remotion 相关需求，最顶层的 remotion-best-practices 会根据上下文自动路由到对应子 Skill，避免一次性把所有知识塞给模型。

核心设计原则：

  • 一个任务 = 一个 Skill：11 个 Skill 覆盖 Remotion 工程链路 11 个独立维度，Agent 按需加载相关 REFERENCE.md，控制上下文窗口消耗。
  • 官方背书：所有 Skill 由 Remotion 框架原作者 Jonny Burger 在 remotion-dev/skills 仓库直接维护，最近一次 commit 是 2026-07-31（2 days ago），与 Remotion 主框架版本 v4.0.503 严格对齐。
  • 平台中立：Skill 文本里不绑定任何 AI 客户端，Claude Code、Cursor、Windsurf、Cline 等都可用；同时也兼容 npx 安装到 .claude/skills/ 等本地路径。

认可度

  • GitHub Stars：4,200 stars（截至 2026-08-02，4.2k 显示），Forks 481
  • 最近活跃：最近一次 commit 2026-07-31（2 天前），Remotion v4.0.503 同步
  • SkillHub.club HOT 榜：score 27.0，#46，360+ Skill 中位列前 1/8
  • SkillHub 安装量：npx @skill-hub/cli install remotion-best-practices 是官方推荐路径
  • 社媒讨论：Remotion 团队在 X / Discord 同步官宣「Agent Skills 发布」，社区对「React + AI Agent + 视频」的组合呼声较高
  • Trending 经历：上线一周内进入 SkillHub Hot 榜单，新晋 trending 表现明显

链接

  • GitHub 仓库：https://github.com/remotion-dev/skills
  • 主 Skill：remotion-best-practices（路由器）
  • 子 Skill 路径：skills/<name>/REFERENCE.md，例如 skills/remotion-render/REFERENCE.md
  • 安装入口：npx @skill-hub/cli install remotion-best-practices
  • 母公司：https://github.com/remotion-dev/remotion（23k+ stars）

原作者

  • 姓名：Jonny Burger（@JonnyBurger）
  • 身份：Remotion 框架创始人 & 唯一全职维护者，瑞士苏黎世独立开发者
  • 背景：从 2021 年起持续维护 Remotion，主业是把「React 组件化思维」带入视频生成领域；2026 年起同时主导 Remotion Agent Skills 项目，把官方知识库系统性结构化给 AI Agent。

介绍

remotion-dev/skills 是 Remotion 团队为「让 AI 帮你写视频」准备的全套工程级工具集。当用户在 Claude Code 里说「帮我做一个产品发布视频」「把这段素材按时间轴裁剪」「用 Mapbox 做一条地理动画路线」「把它部署到 Vercel 上自动渲染」时，对应的子 Skill 会被路由加载，让 AI 像 Remotion 高级工程师一样给出可直接执行的代码与命令。

整套 Skill 包含 11 个独立模块：remotion-best-practices（路由入口）、remotion-create（项目脚手架）、remotion-markup（React 标记最佳实践）、remotion-maps（地图动画）、remotion-multimedia（多媒体裁剪/元数据）、remotion-interactivity（Studio 交互）、remotion-render（高级渲染：Lambda/Vercel/Cloudflare/Express）、remotion-captions（字幕）、remotion-saas（SaaS 模板与 Player）、remotion-docs（Remotion API 文档查询）、remotion-upgrade（版本与依赖升级）。

每个子 Skill 都附带 REFERENCE.md，记录该领域常见任务的 API、最佳实践、踩坑清单与示例代码片段，相当于 Remotion 高级工程师的肌肉记忆被结构化进了 AI 上下文。

特点

  • Router-first 架构：单点入口 remotion-best-practices 按上下文自动分发，避免一次喂 11 份文档撑爆上下文窗口
  • 官方一手知识：每条 REFERENCE.md 都来自 Remotion 主仓库文档与 issue 高频讨论，权威性远胜社区二手教程
  • 跨平台兼容：Skill 文件采用纯 Markdown + YAML frontmatter，Claude Code / Cursor / Windsurf / Cline 等主流 AI 编程客户端开箱即用
  • 紧跟框架版本：Remotion v4.0.503（2026-07-31）发布后 2 天内 Skills 同步更新，remotion-upgrade 子 Skill 还能反过来帮你把项目迁到最新版
  • 覆盖工程全链路：从 create 到 render 到 saas 一条龙，不只教你怎么写 React 组件，更教你怎么上线 SaaS、自动跑 Lambda 渲染

使用方法

最简三步接入 Claude Code：

# 1. 安装主 Skill（路由器）
npx @skill-hub/cli install remotion-best-practices

# 或手动克隆
git clone https://github.com/remotion-dev/skills ~/.claude/skills/remotion-dev

# 2. 重启 Claude Code / Cursor，让它重新加载 Skills 索引

# 3. 在对话里直接说
#    「用 Remotion 给我做一个 30 秒的产品发布视频」
#    「用 Mapbox 做一条 3 秒的地理动画」
#    「把这个 Remotion 项目部署到 Vercel，自动渲染」
# Agent 会自动路由到 remotion-create / remotion-maps / remotion-saas 子 Skill。

最小示例（基于 remotion-create 子 Skill）：

npx create-video@latest
# 按提示选择 React 模板、分辨率、帧率
# 生成的项目天然兼容 remotion-dev/skills 的 REFERENCE.md 约定

进阶玩法：单独安装某个子 Skill 做精细化任务：

npx @skill-hub/cli install remotion-render  # 只关心云端渲染
npx @skill-hub/cli install remotion-captions  # 只做字幕

使用场景与人群

适用场景：

  • 用 AI Agent 一句话生成产品发布 / 营销短视频
  • 在 Claude Code 里调试 Remotion React 组件（Composition、Sequence、useCurrentFrame）
  • 把现有 Remotion 项目从本地渲染迁移到 Lambda / Vercel / Cloudflare 云端
  • 给 Remotion SaaS（视频编辑器、营销工具）做原型与最佳实践参考
  • 自动生成带字幕、带地图动画、带交互性的复杂视频

目标人群：

  • 前端 / 全栈工程师：想把 React 能力延伸到视频领域，但不想从零学 FFmpeg
  • AI 视频创业团队：在搭 Remotion SaaS（编辑器、批量生成工具、营销自动化）时需要官方权威知识
  • 内容运营 / 增长团队：希望让 AI 直接吐出可投放的短视频模板
  • 独立开发者 / 创作者：用 AI 辅助批量生产 YouTube Shorts、Reels、TikTok 内容

输入与输出案例

案例 1：从 0 到 1 生成产品视频

输入（用户在 Claude Code 中的提问）：

“帮我做一个 30 秒的产品发布视频，3 个镜头：标题页 → 截图轮播 → 结尾 CTA，背景用 React 渐变动画，输出 1080×1920 竖屏。”

Agent 自动加载 remotion-create + remotion-markup + remotion-render 三个子 Skill，输出：

  • 完整的 src/Composition.tsx（含 3 个 <Sequence> 块、<AbsoluteFill> 布局、渐变动画帧定义）
  • remotion.config.ts（分辨率 / 帧率 / 渲染输出目录）
  • 一键渲染命令 npx remotion render ProductLaunch out/product.mp4

案例 2：地理动画路线视频

输入：

“用 Mapbox 做一条 8 秒的飞行路线动画：从北京飞到上海，路上要标 3 个城市的坐标。”

Agent 路由到 remotion-maps 子 Skill，输出：

  • 基于 @remotion/google-maps 或 maplibre-gl 的 <Map> 组件
  • 预定义 camera 飞行动画（useCurrentFrame + easeInOutCubic 插值）
  • 3 个城市的 Marker 组件 + 标签动画
  • 直接 npx remotion render FlyingRoute out.mp4 渲染 1920×1080 横屏视频

案例 3：SaaS 部署

输入：

“我想把这个 Remotion 视频编辑器部署成 SaaS，前端用 Next.js，后端用 Lambda 自动渲染。”

Agent 路由到 remotion-saas + remotion-render，输出：

  • 推荐 @remotion/lambda 包 + AWS IAM 最小权限策略
  • Next.js App Router 下的 /api/render 路由骨架
  • CloudFront CDN 输出 + S3 存储桶配置
  • 完整 README，从环境变量到部署流水线一步到位

GitHub: https://github.com/remotion-dev/skills

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读