Vercel Agent Skills
从代码审查到可核对的部署
按需求选择 React 性能、界面、技术文档、线上指标或部署技能，把建议落实到具体文件与检查结果。
- GitHub Star
- 33,222
- 资料核对
先审一个真实路由，再验证一项改动
第一次选择 React 性能入口，提供一个确实慢的页面及相关文件。先厘清数据依赖和加载路径，再改最有依据的一处；用同一输入复测，保留没有测出的部分。
选一个任务，开始使用
各任务卡片有自己的安装命令。在项目根目录的终端执行，再进入同一项目的 Claude Code 会话，让助手确认已找到对应 SKILL.md 及配套文件，然后提供 brief.md 与目标文件。无需先把整套技能全部装入。
从等待关系与首次加载内容入手，验证最小改动。
安装所选入口
示例先装 React 性能入口；下方任务可复制各自命令。安装器固定为 1.7.4，技能内容从当前作者仓库下载，默认项目范围。
查看作者安装说明npx [email protected] add vercel-labs/agent-skills --skill vercel-react-best-practices -a claude-code首次路径：定位问题 → 小范围修改 → 同条件复测
在 brief.md 写下目标路由、复现步骤、已知慢点、React/框架版本与现有测试命令；保存一份可以对照的初始结果。安装第一条任务的 vercel-react-best-practices，并确认助手读取了实际技能文件。让它先给出有文件位置的诊断，再完成有依据的最小修改、运行项目检查，并用相同数据重试原流程。
React 技能的规则索引把这段话发给 AI
以下是编辑编写的工作提示词，文件名和路径需要替换；没有把静态阅读写成性能测试或真实部署结果。
使用 vercel-react-best-practices，按 brief.md 检查指定 React/Next.js 路由及必要依赖。先核对实际 React、框架版本与现有检查命令，画清认证、数据请求和组件加载的依赖顺序。 优先找相互独立却串行等待的请求，以及首屏不需要但提前加载的重组件；每项注明文件位置、对应规则、用户影响和验证方法。依赖用户身份或权限的数据必须在验证之后读取，不能为了并行跳过检查。缓存建议说明生命周期与用户隔离，不把 React cache 当成跨请求持久缓存。 有明确问题时，选择最有证据的一项完成最小修改，保留现有接口和行为；没有足够依据时报告未发现可支持的改动。运行相关检查，用相同数据重试原流程，记录前后可观察结果；没有性能测量工具时只报告结构变化和已运行的检查，不宣称提速比例。返回修改摘要、检查结果及剩余问题。
检查你拿到的结果
- 带文件位置和规则依据的诊断。
- 有依据时给出范围明确的补丁；无需修改时说明理由。
- 同条件检查结果与未测量项。
进一步了解这个 Skill
这是 Vercel 维护的技能集合，当前源码有 9 个入口。它们分工不同：有的把性能经验写成代码审查规则，有的读取最新界面或写作规范，有的通过 Vercel CLI 读取真实运行数据、组织部署。没有一个入口可以替代全部检查。
React 性能技能目前列出 70 条规则，覆盖请求等待、包体积、服务端和客户端取数、重新渲染、渲染表现、JavaScript 与进阶模式。顺序用于帮助选择优先级；具体建议仍须符合项目的框架版本、权限检查和数据依赖，不能机械地给所有代码加缓存或并行。
下面按五种交付物安排使用路径，再列出组件组合、原生应用、页面转场和 token 认证的入口。普通代码审查可以从本地开始；需要判断哪个线上路由更值得优化时，再使用指标驱动的 vercel-optimize。
来源与核验
资料核对
按提交 1a2c79d 逐项阅读 9 个技能入口、所用规则与报告流程，并核对两套外部规范及部署文档；未安装或执行 Vercel 操作。