What are the best practices for a React agent's skill?

背景 Agent Skill 是一个可复用的能力单元，通常包含明确的职责边界、触发条件、输入输出约定，且可能封装了提示词、工具调用逻辑、状态 处理和约束规则。在工程化 Agent 系统中，Skill 更接近“函数 / 用例 / 子代理”。相对于提示词（Prompt），提示词只是其中的一部分实现细节，而不是 Skill 本身。从抽象层级看，提示词解决的是“模型怎么想、怎么说”，Skill 解决的是这个 Agent 能做什么、在什么条件下做、做到什么程度。 Vercel 刚刚开源了 react-best-practices——一套封装了其 10 余年 React 与 Next.js 优化经验的 Agent Skills（智能体技能包）。不同于传统的性能文档，这个结构化仓库以AI 友好为核心设计目标，能直接集成到编码智能体（如 Claude Code、Cursor、Codex）中，让开发者与 AI 共同遵循统一的性能优化标准，从事后救火转向事前预防。 为什么需要这套 Skills？ React 生态的性能优化长期面临一个痛点：反应式优化（Reactive Optimization）。多数团队的流程是“版本发布→用户反馈卡顿→排查性能问题”，这种模式不仅成本高，还容易陷入优化错重点的误区。比如，花大量时间优化 useMemo 调用（React19 以后已无需手动优化）。却忽略了导致 600ms 等待的请求瀑布流，或每个页面额外加载的 300KB 冗余 JavaScript。 Vercel 团队在 10 余年生产环境实践中发现，90% 以上的 React 性能问题源于三大共性根因： 异步操作意外串行：本可并行的请求被写成顺序执行，导致等待时间叠加（即请求瀑布流）； 客户端 Bundle 膨胀：随项目迭代，未清理的冗余代码、未懒加载的重组件持续增大包体积，拖慢首屏加载； 组件不必要重渲染：状态设计不合理或依赖传递不当，导致无关组件频繁触发重渲染，引发界面卡顿。 这些问题不是小事，它们会直接转化为用户可感知的加载缓慢和交互卡顿，并随着版本迭代积累成性能债务，持续影响用户的每次访问体验。而 react-best-practices 的核心目标，正是让这类问题变得可识别、可复现，并能通过自动化方式得到修复。 核心理念：按影响优先级排序，先解决关键问题 传统性能优化常因切入点太低失败，而 react-best-practices 提出了一套颠覆性思路，按优化影响度排序，先抓主要矛盾。