用途:这是一份面向 React 应用的性能优化规则集,由 Vercel 维护,来源为 vercel-labs/agent-skills,共 70 条规则,分 8 个类别并按影响优先级排序。适用于编写、审查或重构 React 组件,以及实现客户端数据获取、API 路由处理、排查性能问题、优化包体积与重渲染等场景。
主要能力:规则按优先级分为消除瀑布请求(async-,CRITICAL)、包体积优化(bundle-,CRITICAL)、服务端性能(server-,HIGH)、客户端数据获取(client-,MEDIUM-HIGH)、重渲染优化(rerender-,MEDIUM)、渲染性能(rendering-,MEDIUM)、JavaScript 性能(js-,LOW-MEDIUM)、高级模式(advanced-,LOW)。示例规则包括 async-parallel(用 Promise.all 处理独立操作)、bundle-barrel-imports(直接导入、避免 barrel 文件)、rerender-memo、js-set-map-lookups 等。每条规则文件包含原因说明、错误代码示例、正确代码示例及补充参考。
使用方式:按需阅读 rules/ 目录下的单条规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md);完整指南见 AGENTS.md。
限制与适配说明:该技能针对 ryOS(Vite + React SPA,配独立 Bun API,非 Next.js App Router)给出适配建议——优先用 React.lazy + Suspense 替代 next/dynamic;多数 server-* 规则(RSC、React.cache、after()、server actions)不适用于该 SPA,但瀑布流与 Promise.all 思路仍可用于 api/ 处理器;仓库使用面向 React Compiler 的 eslint 规则,默认避免新增 useMemo/useCallback,除非既有模式要求。其他环境下的具体适配暂未提供。