技能说明
适用于 React/Next.js 新页面、性能审查和重构，覆盖瀑布请求、包体积、服务端与客户端性能、重渲染和渲染细节。规则来自 Vercel Engineering；实际收益仍需结合项目运行结果验证。
关于此技能
Vercel 官方 React 与 Next.js 性能指南，按影响优先级组织 70 条规则，帮助 Agent 在写新页面、改造组件和审查性能时先处理瀑布请求、包体积和服务端性能等高影响问题。许可证以技能文件标注的 MIT 为准。
核心能力
优先处理高影响问题
先检查请求瀑布和包体积，再处理服务端性能、客户端取数、重复渲染、渲染性能和 JavaScript 细节。
规则化审查
每条规则都配有适用说明、错误示例和正确示例，便于 Agent 在改代码时按具体问题定位。
覆盖 React 与 Next.js
适用于 React 组件、Next.js 页面、服务端或客户端数据获取、缓存和动态导入等常见场景。
适用场景
新建 React 或 Next.js 页面
在实现数据获取、组件结构和加载状态时，提前避免常见性能陷阱。
性能审查与重构
针对慢页面、请求串行、包体积过大、无效重渲染和服务端取数问题给出优先级。
上线前代码检查
把规则作为代码审查清单使用；涉及权限、服务端操作和数据边界时仍需结合项目安全要求核对。
使用步骤
- 01
安装技能
使用 npx skills add vercel-labs/agent-skills --skill react-best-practices -a codex -g 安装到 Codex 的全局技能目录。
- 02
先确认技术栈
确认项目是 React 或 Next.js，并阅读相关文件和现有数据获取方式，不把通用规则当作项目事实。
- 03
按影响排序
优先处理请求瀑布、包体积和服务端问题，再处理重渲染、渲染与 JavaScript 细节。
- 04
复查结果
确认改动没有改变业务语义、权限校验和数据边界，并用项目自身的测试和运行结果验证。
常见问题
它会自动测出页面快了多少吗？+
不会。它提供可供 Agent 执行的性能规则和示例；实际收益需要结合项目运行、构建分析或监控数据确认。
适合哪些平台？+
仓库是通用 Agent Skills 格式，README 提供 npx skills add 安装方式，可用于 Codex、Claude Code、Cursor 等兼容该格式的 Agent。
使用时有什么边界？+
性能优化不能替代权限和安全审查；例如 Server Actions 仍要按公开接口处理，实际改动需结合项目现有认证、缓存和测试策略。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/06
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add vercel-labs/agent-skills --skill react-best-practices -a codex -g