react-best-practicescommit dc8367e · v1.0.0SKILL.md · 代码规范
React 最佳实践
Vercel 维护的 React 和 Next.js 性能优化指南，含 8 个类别共 70 条按影响程度排序的规则。
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices已选中命令，请手动复制。
- 权限
- read-repo
- write-files
- shell
- network
- 兼容工具
- Any SKILL.md agent
- GitHub
- 33.3k
- 来源
- 官方 · Vercel Labs
- 状态
- 扫描通过
- 许可证
- MIT
- 分类
- 代码规范
核心规则
按影响程度依次应用规则，先处理最关键的两类：消除请求瀑布和减小打包体积。
执行阶段
阶段 01消除瀑布
独立操作用 Promise.all 并行，把 await 移到真正用到的分支，并用 Suspense 流式渲染。
阶段 02减小打包体积
直接导入而非经由 barrel 文件，用 next/dynamic 加载重组件，并在水合后再加载第三方脚本。
阶段 03服务端与数据获取
用 React.cache() 和 LRU 缓存去重，减少传给客户端组件的数据；客户端用 SWR 去重请求。
阶段 04渲染与 JS 优化
减少不必要的重新渲染、优化渲染与 JavaScript 热点路径，最后再考虑高级模式。
阶段 05查阅规则文件
需要细节时阅读 rules/ 下对应文件的错误与正确示例，或查看汇总的 AGENTS.md。
权限说明（据 SKILL.md 整理）
| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 按规则编写或重构 React/Next.js 代码。 |
| 命令执行 | 不需要 | 这是规则参考，不要求运行命令。 |
| 网络外发 | 不需要 | 规则文件随技能附带，不需要联网。 |
SKILL.md 头部信息（YAML）
---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
author: vercel
version: "1.0.0"
---相关技能
规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。