用途：该技能是面向 React 与 Next.js 应用的性能优化指南，由 Vercel 维护，包含 8 个类别、共 45 条规则，按影响程度排序，用于指导自动化重构与代码生成。适用于编写新的 React 组件或 Next.js 页面、实现数据获取（客户端或服务端）、审查性能问题、重构现有代码、优化打包体积或加载时间。
主要能力（按优先级）：1. 消除瀑布流（CRITICAL，async-）：如 async-defer-await、async-parallel、async-dependencies、async-api-routes、async-suspense-boundaries。2. 打包体积优化（CRITICAL，bundle-）：如 bundle-barrel-imports、bundle-dynamic-imports、bundle-defer-third-party、bundle-conditional、bundle-preload。3. 服务端性能（HIGH，server-）：如 server-cache-react、server-cache-lru、server-serialization、server-parallel-fetching、server-after-nonblocking。4. 客户端数据获取（MEDIUM-HIGH，client-）：client-swr-dedup、client-event-listeners。5. 重渲染优化（MEDIUM，rerender-）：如 rerender-memo、rerender-dependencies、rerender-derived-state、rerender-functional-setstate、rerender-lazy-state-init、rerender-transitions 等。6. 渲染性能（MEDIUM，rendering-）：如 rendering-content-visibility、rendering-hoist-jsx、rendering-conditional-render 等。7. JavaScript 性能（LOW-MEDIUM，js-）：如 js-index-maps、js-cache-property-access、js-early-exit、js-set-map-lookups、js-tosorted-immutable 等。8. 高级模式（LOW，advanced-）：advanced-event-handler-refs、advanced-use-latest。
使用方式：每条规则包含原因说明、错误代码示例、正确代码示例及补充参考。详细解释与代码示例见完整文档 AGENTS.md。示例包括用 Promise.all 并行独立操作、避免 barrel 文件导入、对重型组件使用 next/dynamic 动态导入、使用函数式 setState 等。
限制与约束：必须消除瀑布流（使用 Promise.all、Suspense）、优化打包（禁止 barrel imports、使用 dynamic imports）、控制 RSC 边界只序列化必要数据；禁止顺序 await 独立请求、禁止数组原地变更（用 toSorted() 替代 sort()）、避免在 React.cache 中使用内联对象导致缓存未命中。版本 1.0.0，最后更新 2026-01-22，兼容 Claude、ChatGPT、Gemini，原始来源 vercel/agent-skills。