30 秒看懂
它能做什么，以及什么时候值得选
Vercel React Best Practices 是 Vercel 维护的 React 与 Next.js 性能指南。当前 SKILL.md 将 70 条规则分为八个按影响排序的类别，覆盖请求瀑布、包体积、服务端工作、客户端请求、重渲染、渲染、JavaScript 与高级模式，并提供说明和代码示例。
按 Agent 安装
选择你的 Agent
路径来自 Agent 官方文档或 skills.sh 同源通用安装器。兼容状态仍以这个 Skill 的资料为准。
项目范围
.claude/skills/vercel-react-best-practices/个人范围
~/.claude/skills/vercel-react-best-practices/项目范围适合团队共享；个人范围适合跨项目复用。安装器默认项目范围，加 -g 可改为个人范围。
安装命令（项目范围）
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --agent claude-code典型工作流
从任务到结果的典型流程
01
审查性能
按优先级规则检查 React 与 Next.js 代码。
02
指导新代码
实现功能时应用服务端、客户端与包体积指南。
03
规划重构
优先识别高影响瀑布和重渲染，再考虑低价值微优化。
优点与局限
优点与使用边界
显著优点
- 本页已依据当前上游 SKILL.md 的具体工作流进行人工整理。
- 能力边界与来源 vercel-labs/agent-skills 保持明确关联。
- 核心用途、局限与风险分开呈现，便于安装前判断。
潜在缺点与局限
- 规则需要结合应用的 React、Next.js 与部署版本解释。
- 性能建议应通过测量验证，而不是机械套用。
适合人群
适合哪些人
→
React 与 Next.js 工程师
→
需要确定 Web 性能优先级的审查人员
使用前须知
使用前需要检查的风险
低
脱离上下文的优化
某条规则可能增加复杂度却不改善用户结果，应在变更前后测量相关路径。
中
上游指令变化
Skill 行为可能随仓库更新而变化；重要工作流应记录所用提交，并在更新后重新审查。
安全说明
如何理解它的权限
- 声明权限仍以当前上游 SKILL.md 和运行时请求为准。
- 仓库文件、网页内容与工具输出都应视为不可信输入。
- SkillSignal 未独立执行或安全审计该软件包；skills.sh 外部标签不构成 SkillSignal 认证。
这不是安全认证。 第三方评级仅作为标注来源的参考信息展示；SkillSignal 尚未独立执行或安全审查此 Skill。
软件包内容
已收录文件
SKILL.md上游 Skill 说明来源可查
标签
ReactNext.js性能
人工扩展资料，依据 vercel-labs/agent-skills 的当前上游 SKILL.md 与标注来源整理，核对日期 2026-08-19。本文为原创摘要，不代表已执行或安全认证。