react-best-practices：Vercel 的 React 性能规则

react-best-practices 是 Vercel 工程团队写的 70 条 React / Next.js 性能规则。SKILL.md 只是一份目录，每条规则一个文件，用到哪条读哪条。

Agent 写的 React 代码，最常见的问题不是跑不起来，而是能跑，但代码写得很差，性能也很差。

三个请求本来可以同时发，它一个等一个；一个组件定义在另一个组件里面，每次渲染都被销毁重建；为了用三个图标，把整个图标库都打进了包里。

这些问题模型其实都知道，写代码时不会主动想起来。

react-best-practices 把它们整理成一条条带错误写法 / 正确写法对照的规则，让 Agent 写代码、审代码时对照着来。这套规则由 Vercel 工程团队开源在 vercel-labs/agent-skills 仓库，许可以其仓库中的 LICENSE 为准。

一、安装

用第1节介绍的 skills 命令行工具：

# 先看看这个仓库里有哪些 Skill
npx skills add vercel-labs/agent-skills --list

# 只装 React 性能规则，只装给 Claude Code
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices -a claude-code

vercel-labs/agent-skills 这个仓库里还有不少别的 Skill：界面规范审查（web-design-guidelines）、组件组合模式（vercel-composition-patterns）、React Native 规则、部署到 Vercel 等。按需挑，不用全装。

💡 注意名字：仓库里的目录叫 react-best-practices，但 SKILL.md 里的 name 是 vercel-react-best-practices。--skill 认的是 name。

二、打开看看：一份目录 + 70 个规则文件

react-best-practices/
├── SKILL.md        ← 目录：8 个类别，每条规则一行
├── AGENTS.md       ← 所有规则展开后的完整版（约 10 万字符）
├── metadata.json   ← 版本、作者、参考资料
└── rules/          ← 每条规则一个文件
    ├── _sections.md      ← 8 个类别的说明
    ├── _template.md      ← 写新规则的模板
    ├── async-parallel.md
    ├── bundle-barrel-imports.md
    └── ……

这是一份规则库，SKILL.md 和 AGENTS.md 的大小差别很大：

同样的内容，做成 Skill 平时几乎不占地方；塞进一个大文件，就是 10 万字符一次读进来。这也是 Skill 和 CLAUDE.md 在真实项目里的差别。