该技能是一份面向 React 与 Next.js 应用的性能优化指南，由 Vercel 维护，包含 45 条规则，分为 8 个类别，并按影响程度排序，用于指导自动重构与代码生成。
适用时机：编写新的 React 组件或 Next.js 页面，实现数据获取（客户端或服务端），审查代码中的性能问题，重构现有 React/Next.js 代码，优化包体积或加载时间。
规则类别与优先级：
- 消除瀑布流（CRITICAL，前缀 async-）：包括将 await 移入实际使用的分支、对独立操作使用 Promise.all()、对部分依赖使用 better-all、在 API 路由中尽早启动 Promise 并延后 await、使用 Suspense 进行流式传输。
- 包体积优化（CRITICAL，前缀 bundle-）：直接导入并避免 barrel 文件、对重型组件使用 next/dynamic、在水合后加载分析/日志、仅在功能激活时加载模块、在悬停/聚焦时预加载以提升感知速度。
- 服务端性能（HIGH，前缀 server-）：使用 React.cache() 做请求级去重、使用 LRU 缓存做跨请求缓存、最小化传给客户端组件的数据、重构组件以并行获取、使用 after() 执行非阻塞操作。
- 客户端数据获取（MEDIUM-HIGH，前缀 client-）：使用 SWR 自动去重请求、去重全局事件监听器。
- 重渲染优化（MEDIUM，前缀 rerender-）：不要订阅仅在回调中使用的状态、将昂贵计算提取为记忆化组件、在 effect 中使用原始类型依赖、订阅派生布尔值而非原始值、使用函数式 setState 保持回调稳定、对昂贵初始值向 useState 传入函数、对非紧急更新使用 startTransition。
- 渲染性能（MEDIUM，前缀 rendering-）：动画作用于 div 包装器而非 SVG 元素、对长列表使用 content-visibility、将静态 JSX 提取到组件外、降低 SVG 坐标精度、用内联脚本处理仅客户端数据以避免闪烁、使用 Activity 组件控制显示/隐藏、条件渲染使用三元而非 &&。
- JavaScript 性能（LOW-MEDIUM，前缀 js-）：通过类或 cssText 分组 CSS 变更、为重复查找构建 Map、在循环中缓存对象属性、在模块级 Map 中缓存函数结果、缓存 localStorage/sessionStorage 读取、合并多个 filter/map 为一次循环、在昂贵比较前检查数组长度、函数提前返回、将 RegExp 创建提升到循环外、用循环代替 sort 求最小/最大值、使用 Set/Map 实现 O(1) 查找、使用 toSorted() 保持不可变。
- 高级模式（LOW，前缀 advanced-）：将事件处理器存入 ref、使用 useLatest 获得稳定回调 ref。
使用方式：阅读各规则文件获取详细说明与代码示例，如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md。每个规则文件包含为何重要的简要说明、带解释的错误代码示例、带解释的正确代码示例以及额外上下文与参考。完整编译文档见 AGENTS.md。
资料未提供安装命令、收费方式、支持平台或效果数据。