一、用途 该技能是一份面向 React 与 Next.js 应用的性能优化指南，由 Vercel 维护。它包含 45 条规则、分为 8 个类别，并按影响程度排定优先级，用于指导自动重构与代码生成。适用于以下场合：编写新的 React 组件或 Next.js 页面；实现数据获取（客户端或服务端）；审查代码中的性能问题；重构既有 React/Next.js 代码；优化打包体积或加载时间。
二、主要能力：按优先级划分的规则类别
-
消除瀑布流（关键，前缀 async-）：async-defer-await（把 await 移入真正使用它的分支）、async-parallel（独立操作使用 Promise.all()）、async-dependencies（用 better-all 处理部分依赖）、async-api-routes（在 API 路由中提早启动 Promise、延迟 await）、async-suspense-boundaries（用 Suspense 流式输出内容）。
-
打包体积优化（关键，前缀 bundle-）：bundle-barrel-imports（直接导入，避免 barrel 文件）、bundle-dynamic-imports（对重量级组件使用 next/dynamic）、bundle-defer-third-party（在水合之后加载分析/日志）、bundle-conditional（仅在功能被激活时加载模块）、bundle-preload（在 hover/focus 时预加载以提升感知速度）。
-
服务端性能（高，前缀 server-）：server-cache-react（用 React.cache() 做每请求去重）、server-cache-lru（用 LRU 缓存做跨请求缓存）、server-serialization（减少传给客户端组件的数据）、server-parallel-fetching（重构组件以并行获取）、server-after-nonblocking（用 after() 执行非阻塞操作）。
-
客户端数据获取（中高，前缀 client-）：client-swr-dedup（用 SWR 自动去重请求）、client-event-listeners（去重全局事件监听器）。
-
重渲染优化（中，前缀 rerender-）：rerender-defer-reads（不要订阅仅在回调中使用的状态）、rerender-memo（把昂贵工作抽到记忆化组件）、rerender-dependencies（在 effect 中使用原始类型依赖）、rerender-derived-state（订阅派生布尔值而非原始值）、rerender-functional-setstate（使用函数式 setState 以获得稳定回调）、rerender-lazy-state-init（对昂贵初始值向 useState 传入函数）、rerender-transitions（对非紧急更新使用 startTransition）。
-
渲染性能（中，前缀 rendering-）：rendering-animate-svg-wrapper（动画加在 div 包裹层而非 SVG 元素）、rendering-content-visibility（对长列表使用 content-visibility）、rendering-hoist-jsx（把静态 JSX 提到组件外）、rendering-svg-precision（降低 SVG 坐标精度）、rendering-hydration-no-flicker（对仅客户端数据使用内联脚本）、rendering-activity（用 Activity 组件做显示/隐藏）、rendering-conditional-render（条件渲染使用三元而非 &&）。
-
JavaScript 性能（低到中，前缀 js-）：js-batch-dom-css、js-index-maps、js-cache-property-access、js-cache-function-results、js-cache-storage、js-combine-iterations、js-length-check-first、js-early-exit、js-hoist-regexp、js-min-max-loop、js-set-map-lookups、js-tosorted-immutable。
-
高级模式（低，前缀 advanced-）：advanced-event-handler-refs（把事件处理器存入 ref）、advanced-use-latest（用 useLatest 获得稳定回调 ref）。
三、使用方式 可阅读单条规则文件以获取详细解释与代码示例，例如：rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md。每条规则文件包含：为何重要的简要说明、带解释的错误代码示例、带解释的正确代码示例、补充上下文与参考。若需要展开全部规则的完整指南，见 AGENTS.md。该技能适用于执行概述中描述的工作流或操作。
四、适用场景 编写新 React 组件或 Next.js 页面、实现数据获取、审查性能问题、重构现有代码、优化打包体积与加载时间。
五、限制 仅在任务明确匹配上述范围时使用该技能。不要把输出当作针对特定环境的验证、测试或专家评审的替代。若缺少必需的输入、权限、安全边界或成功标准，应停止并请求澄清。关于安装命令、运行环境、依赖版本、收费与价格、平台支持等具体信息，资料中暂未提供。