Vercel 推出 Agent Skills：让 AI 真正懂你的前端项目

写 React 组件时，你是不是经常要反复提醒 AI：“别用 useEffect 做数据请求”“图片要加 loading 属性”“LCP 元素别放太深”？这些细节，资深前端工程师一眼就能看出来，但 AI 却总在重复踩坑。现在，Vercel 把他们过去十年积累的实战经验，打包成一套可安装、可共享的“技能包”——Agent Skills，直接让 AI 变成你团队里那个最懂性能优化的老兵。

这不是又一个“AI 提示词模板库”。Agent Skills 是一套真正的工具链：它用简单的命令行安装，像 npm 包一样轻量，却能被 Cursor、Claude Code 等主流 AI 编程助手自动识别。装上之后，AI 不再靠猜，而是按标准执行——比如自动检测你是否漏了 `next/image` 的 `priority` 属性，或者发现某个组件的 CSS-in-JS 导致了样式抖动。

140+ 条真实项目规则，不是理论，是踩过坑才总结出来的

Vercel 团队从他们服务的数万个真实项目中，提炼出超过 140 条高频问题和优化点。这些规则不是教科书上的“应该怎么做”，而是“我们见过太多人这么写，结果线上崩了”：

• React 性能：识别不必要的重渲染、未 memo 的回调、过度使用 Context 导致的全局更新
• Next.js 部署：检测未启用 ISR 的动态页面、未正确配置缓存头、静态资源未压缩
• UI/UX 实战：检查按钮焦点可见性、字体加载导致的 FOIT、动画是否触发了重排
• 可访问性：自动标记缺失的 ARIA 标签、颜色对比度不足、键盘导航断裂

比如，有个技能会告诉你：“你这个 hero 图用了 `next/image`，但没设 `priority`，首屏加载慢了 1.2 秒。”——这不是模糊建议，是基于真实 Lighthouse 数据的反馈。

装上就用，不用改代码，不用写提示词

你不需要改一行代码，也不用背一堆 Prompt。只要在终端跑一条命令：

npx agent-skills install react-best-practices

然后打开你的 AI 编程助手，它就会自动启用这些规则。你在写代码时，AI 会直接在侧边栏提示：

“你正在使用 `useState` 管理从 API 获取的数据，建议改用 `useSWR` 或 `fetch` + `useEffect`，避免重复请求。”

或者在 PR 评论里：

“这个组件在移动端下，文字被截断了。建议增加 `word-break: break-word`，或设置最大宽度。”

这套技能包现在已支持 Cursor、Claude Code，后续将扩展到 GitHub Copilot 和 JetBrains AI Assistant。你甚至可以把团队内部的规范也打包成私有技能，分享给整个团队。

开源，免费，直接用

Agent Skills 完全开源，GitHub 上的代码结构清晰，规则用 YAML 编写，任何人都能阅读、修改、提交改进。你不需要是 AI 专家，也能贡献一条规则——比如你发现团队里总有人忘记加 `alt` 文本，那就写一条规则，提交上去，未来所有用这个工具的人都能受益。

项目地址：https://github.com/vercel-labs/agent-skills

如果你还在靠人工 Code Review 找性能问题，或者天天教 AI“别这么写”，现在是时候让工具替你干活了。这不是未来，是今天就能用的效率升级。