React on Top AI Skills

让 AI 用 React 帮你写视频？Remotion 上手教程

Tue, 09 Jun 2026 00:00:00 +0000

Remotion 是什么

Remotion 是一个用 React 代码写视频的框架。你可以用 JSX、CSS、Canvas 这些前端技术来创建视频，而不是在 After Effects 里拖时间轴。

它的核心思路是：视频的每一帧就是一个 React 组件的渲染结果。用 useCurrentFrame() 获取当前帧号，用 interpolate() 做动画插值，跟写前端动画很像，但输出的是 MP4。

48.8k GitHub Stars，Fireship 的「This video was made with code」就是用 Remotion 做的，GitHub Unwrapped 年度回顾也是。

装这个 Skill 能干什么

直接说结论：让 AI 帮你写 Remotion 代码，而不是你自己翻文档。

Remotion 有不少坑，AI 不知道的话会帮你踩一遍。比如 CSS transitions 在视频渲染里不会正确工作，Tailwind 的动画类名也不能用，资源必须放在 public/ 目录里用 staticFile() 引用。这些规则写一遍 prompt 记不住，但装了这个 Skill，AI 会自动遵循。

覆盖的范围很广，除了基础的动画和资源管理，还有 30 多个子规则文件：字幕、音效、转场、3D（Three.js）、GIF 同步、透明视频、音频可视化、旁白生成（ElevenLabs TTS）、Google 字体加载等。

装起来要多久

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

一行命令，装完就能用。

如果你还没有 Remotion 项目，先创建一个：

Remotion Best Practices

Sat, 06 Jun 2026 00:00:00 +0000

它能做什么

Remotion 是一个用 React 代码写视频的框架。这个 Skill 把 Remotion 团队的最佳实践全部打包成规则，装进 AI 助手后，从项目搭建、动画设计、资源管理、序列编排到渲染输出，AI 都能按官方推荐的方式写。覆盖 30 多个子主题，包括字幕、音效、转场、3D、GIF、透明视频、音频可视化等。

跟同类产品有什么区别

用代码生成视频这个领域，Remotion 几乎没有直接竞品——主流视频制作还是 Premiere、After Effects 这些传统工具。跟 After Effects 的脚本自动化比，Remotion 用的是 React，意味着你能复用整个前端生态的组件和库。但真正让这个 Skill 有价值的是：AI 写 React 代码很在行，但如果不了解 Remotion 的坑（比如 CSS transitions 不会正确渲染、Tailwind 动画类名不能用），写出来的代码直接报废。这个 Skill 就是在解决这个问题。

哪些人适合用

在做跟视频自动化相关的项目的人——批量生成视频、数据驱动的动态视频、用代码做动画。如果你只是偶尔剪辑一段视频，传统工具更直接。另外 Remotion 有特殊许可证，商用场景需要确认许可证条款。

一句话总结

AI 助手变成 Remotion 专家，用 React 代码写视频时自动避开所有已知的坑。

Vercel React Best Practices

Fri, 05 Jun 2026 00:00:00 +0000

它能做什么

把 Vercel 团队的 React/Next.js 性能经验打包成 64 条规则，装进 AI 助手后，写代码时会自动遵循这些规则。覆盖渲染策略、状态管理、组件设计、数据获取、性能优化、类型安全、可访问性和测试，一共 8 个类别。

跟同类产品有什么区别

你在 prompt 里写「遵循 React 最佳实践」，AI 的理解因模型而异，今天和明天的标准都不一样。这个 Skill 的 64 条规则是 Vercel 团队写死的，不会漂移。而且这些规则是 Next.js 专属的——Server Component、App Router、use cache 这些框架独有的东西，普通的 React 最佳实践根本不会涉及。

哪些人适合用

用 Next.js 或 React 做项目的人，装了不亏。如果部署在 Vercel 上，这些规则就是官方推荐的做法，省得翻文档。不用 Next.js 的纯 React 项目也能用，只是收益会小一些，因为渲染和缓存部分规则依赖 Next.js 特性。

一句话总结

Vercel 团队的 React 内功，装进 AI 助手里，写代码的时候自动生效。

Vercel React Best Practices 使用教程，让 AI 写出高性能 Next.js 代码

Thu, 04 Jun 2026 00:00:00 +0000

这个技能干什么用的

Vercel 出了一个 Agent Skill，叫 React Best Practices。装进 Claude Code 或 Cursor 之后，AI 写 React/Next.js 代码时会自动遵循 64 条性能优化规则，覆盖渲染、状态管理、组件设计、数据获取等 8 个类别。

本质上它是把 Vercel 团队多年积累的 React 性能经验做成了一个 AI 可读的规则库。以前这些知识散落在 Vercel 博客、Next.js 文档、React 官方指南里，现在打包成一个 Skill，AI 助手装上就能用。

装起来要多久

这个 Skill 是 vercel-plugin 的一部分，Vercel 把 25 个技能打包在一个插件里。装的话有两种方式：

如果你只想装这一个 Skill：

npx skills add vercel-labs/vercel-plugin@react-best-practices

如果你想装整套 Vercel 生态技能（AI SDK、Next.js、部署、存储等一共 25 个）：

npx plugins add vercel/vercel-plugin

前置条件是 Node.js 18+ 和 Bun。

我试了第一种方式，直接装单个 Skill。装完之后在 Claude Code 里随便写一段 React 代码，AI 的回复里就能看到区别了——它会主动用 React.memo 包裹纯组件、提示你用 useMemo 缓存计算、建议 Server Component 优先之类的。