年薪百万的 React 功底怎么“装进”AI？Vercel 的这个 Skill 给了标准答案

"用这个 Skill 相当于雇佣了一个 mini 版的 10 年经验 React 开发者。" ------ Guillermo Rauch, Vercel CEO

这句话成功引起了我的好奇。

最近刚逛 GitHub 的时候，还真发现了这个东西：Vercel 把他们内部的 React 最佳实践整理成了一个 Agent Skill。

说白了，就是一份给 AI 编程助手看的"内部培训手册"。

这份 Skill 里有什么？

我下载下来看了一眼，还挺扎实的。一共 40 多条规则，按影响程度分了 8 个等级：

优先级	类别	影响程度
1	消除请求瀑布流	CRITICAL
2	Bundle 大小优化	CRITICAL
3	服务端性能	HIGH
4	客户端数据获取	MEDIUM-HIGH
5	重新渲染优化	MEDIUM
6	渲染性能	MEDIUM
7	JavaScript 性能	LOW-MEDIUM
8	高级模式	LOW

不是那种泛泛而谈的"要写好代码"，每条规则都有错误示例和正确示例。

随便挑几个印象深刻的

barrel 文件的隐藏成本

这个我之前真没注意过。你写 import { Check, X, Menu } from 'lucide-react' 的时候，实际上加载了 1583 个模块，开发环境下要多花 2.8 秒。

正确的做法是直接 import 路径：

tsx 复制代码

// 错误：加载整个库
import { Check, X } from 'lucide-react'

// 正确：只加载需要的
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'

或者用 Next.js 13.5+ 的 optimizePackageImports 配置，让构建工具自动处理。

useState 的惰性初始化

这个坑我踩过。你写 useState(expensiveCalc()) 的时候，每次渲染都会执行 expensiveCalc()，虽然结果只用一次。

tsx 复制代码

// 错误：每次渲染都执行
const [data] = useState(buildSearchIndex(items))

// 正确：只执行一次
const [data] = useState(() => buildSearchIndex(items))

加个箭头函数就行，但不知道的话根本不会往这方面想。

RSC 边界序列化

这个是 Server Components 特有的问题。你从服务端传一个 50 个字段的 user 对象给客户端组件，50 个字段都会被序列化传输，哪怕客户端只用了一个 name。

tsx 复制代码

// 错误：序列化 50 个字段
async function Page() {
  const user = await fetchUser()  // 50 字段
  return <Profile user={user} />
}

// 正确：只传需要的
async function Page() {
  const user = await fetchUser()
  return <Profile name={user.name} />
}

这份 Skill 的真正价值

技术细节其实网上都能搜到，但 Vercel 这份东西的价值在于结构化 和优先级排序。

你让一个新人去优化 React 性能，他可能会从"少用 useMemo"开始研究，因为网上这类文章最多。但实际上，消除请求瀑布流的收益是 useMemo 优化的 10 倍不止。

Vercel 把"什么最重要"这件事想清楚了，然后写下来了。

所有团队都应该做这件事

我觉得这个思路值得借鉴：把团队的内部最佳实践做成 Skill。

想一想，你们团队有没有这样的场景：

新人来了，要花两周熟悉代码规范
Code Review 的时候，同样的问题反复指出
老员工离职，带走了一脑袋的"暗知识"

这些东西本来就应该文档化。现在有了 AI 编程助手，文档化的收益更大了------不只是给人看，还能让 AI 自动执行。

Skill 的格式其实很简单

看了一下 Vercel 这个 Skill 的结构：

csharp 复制代码

react-best-practices/
├── SKILL.md                # 入口文件，概述和快速参考
└── references/
    ├── react-performance-guidelines.md  # 完整指南
    └── rules/              # 每条规则一个文件
        ├── async-defer-await.md
        ├── bundle-barrel-imports.md
        └── ...

核心就是一个 SKILL.md，里面写清楚：

这个 Skill 是干什么的
什么时候应该用
具体规则的概述

复杂的内容放 references 目录，按需加载，不浪费 token。

怎么安装这个 Skill

如果你也想用，很简单：

bash 复制代码

# 克隆到全局 skills 目录
cd ~/.gemini/antigravity/skills
git clone --branch react-best-practices --single-branch --depth 1 \
  https://github.com/vercel-labs/agent-skills.git temp
mv temp/skills/react-best-practices .
rm -rf temp

之后 AI 写 React 代码的时候就会自动参考这些规则了。

一点感想

Vercel CEO Guillermo Rauch 说过一句话，大意是"AI 代理正在成为软件的主要消费者"。我觉得这个趋势会继续下去。

以前写文档是给人看的，现在写 Skill 是给 AI 看的。本质上是同一件事：把知识结构化，让它能被复用。

只不过 AI 的"阅读速度"比人快得多，格式要求也更严格。但好处是，一旦写好了，AI 真的会"照做"------不像人，看完文档转头就忘。

如果你觉得这篇文章有帮助，欢迎关注我的 GitHub，下面是我的一些开源项目：

Claude Code Skills （按需加载，意图自动识别，不浪费 token，介绍文章）：

code-review-skill - 代码审查技能，覆盖 React 19、Vue 3、TypeScript、Rust 等约 9000 行规则（详细介绍）
5-whys-skill - 5 Whys 根因分析，说"找根因"自动激活
first-principles-skill - 第一性原理思考，适合架构设计和技术选型

VS Code 扩展：

vscode-ai-commit - 帮你写 Commit Message 的插件。读取 staged diff，一键生成符合 Conventional Commits 规范的提交信息；支持自定义模型（OpenAI 格式）和 Prompt。

qwen/gemini/claude - cli 原理学习网站：

coding-cli-guide（学习网站）- 学习 qwen-cli 时整理的笔记，40+ 交互式动画演示 AI CLI 内部机制

全栈项目（适合学习现代技术栈）：

prompt-vault - Prompt 管理器，用的都是最新的技术栈，适合用来学习了解最新的前端全栈开发范式：Next.js 15 + React 19 + tRPC 11 + Supabase 全栈示例，clone 下来配个免费 Supabase 就能跑
chat_edit - 双模式 AI 应用（聊天+富文本编辑），Vue 3.5 + TypeScript + Vite 5 + Quill 2.0 + IndexedDB