React / Next.js 性能优化
用 Vercel 工程团队总结的高优先级规则，减少 React / Next.js 中的加载瀑布、包体过大和不必要重渲染。
技能说明
适合新建页面、组件评审和性能排查。它把 40 多条建议按影响程度组织起来，先处理最容易拖慢页面的关键问题，再补充客户端数据、重渲染和细节优化。
关于此技能
Vercel 工程团队维护的 React / Next.js 性能审查技能。它把 40 多条建议按影响程度分成 8 类，优先检查加载瀑布、包体积和服务端性能，再看客户端数据、重渲染和细节优化。
核心能力
先处理高影响问题
优先检查请求串行、加载瀑布和包体过大等会直接拖慢首屏的常见问题。
覆盖 React 与 Next.js 场景
同时关注服务端性能、客户端数据获取、组件重渲染和渲染细节，适合页面与组件级审查。
按优先级给出建议
规则按影响程度组织，先处理 Critical 和 High 项，再决定是否投入时间做低影响微调。
适合写新代码也适合复查
可以在实现前作为开发约束，也可以在页面完成后用来做性能复盘和优化清单。
适用场景
新建 React / Next.js 页面
在写组件和数据获取逻辑前，先确定不会引入明显的加载等待和包体问题。
检查已有页面性能
把页面代码交给 Agent，快速定位请求、服务端渲染、客户端数据和重渲染方面的改进点。
优化包体与加载速度
当首屏慢、交互延迟或 JavaScript 过大时，用规则清单排查最值得先改的地方。
使用步骤
- 01
安装技能
运行 npx skills add vercel-labs/agent-skills --skill react-best-practices，并选择你的 Agent。
- 02
提供页面或组件
说明页面目标、当前问题和关键代码，让 Agent 先按影响程度找出问题。
- 03
先修高优先级项
优先处理加载瀑布、包体和服务端性能，再根据实际数据决定是否做细节优化。
- 04
重新测量并复查
用真实页面数据或性能工具复测，确认改动确实改善了加载和交互，而不是只完成规则勾选。
常见问题
它只适合 Next.js 吗？+
不只。它重点覆盖 React 与 Next.js，但其中关于请求、组件、包体和渲染的原则也适用于大多数 React 项目。
安装后能保证页面变快吗？+
不能保证。它提供按影响排序的审查规则，最终效果仍需要结合真实页面、数据和性能测量验证。
支持哪些 Agent？+
它遵循通用 Agent Skills 格式，适合 Codex、Claude Code 和 Cursor 等支持该格式的编程 Agent。
npx skills add vercel-labs/agent-skills --skill react-best-practices