vercel-react-best-practices

vercel-react-best-practices 技能概览

这个技能能做什么

vercel-react-best-practices 是一个面向 React 和 Next.js 的性能优化指南。它帮助你在数据获取、渲染、事件处理和包体积上选对模式，从而更快交付 UI，并减少回归风险。当你需要的不只是一个通用提示，而是能直接落到具体代码改动上的规则时，就该用 vercel-react-best-practices 技能。

适合谁用

它最适合前端工程师、AI 编码代理和代码审查者，尤其是那些在意加载时间、重复渲染、hydration，以及服务端/客户端边界的 React 或 Next.js 应用。vercel-react-best-practices for Frontend Development 这一用法在你已经明确功能目标、但希望在上线前把实现方式优化到位时，价值最大。

它的不同之处

这个仓库不是松散建议合集，而是按优先级组织的一组规则。最有价值的部分集中在消除 waterfall 和缩减 bundle，因此当页面过慢、网络请求层层串联，或者客户端包体过大导致落地受阻时，这个技能尤其有用。相比普通提示词，vercel-react-best-practices 能更稳定地把症状导向修复方案。

如何使用 vercel-react-best-practices 技能

安装并先读什么

使用 npx skills add Charlie85270/Dorothy --skill vercel-react-best-practices 安装。安装后先看 SKILL.md，再阅读 AGENTS.md 了解面向代理的工作流。如果你需要规则级别的细节，在改代码之前先检查 rules/，因为那里放的是驱动这个技能输出的可执行指导。

什么样的输入效果最好

当你同时提供组件、路由或 server action，以及要解决的性能问题时，这个技能效果最好。一个高质量的请求会明确框架、用户可感知的问题和约束，例如：“重构这个 Next.js dashboard，减少 waterfalls，保持相同 API contract，并避免新增 client-side dependencies。”这样就能让 vercel-react-best-practices usage 路径获得足够上下文，选出合适的规则。

推荐工作流

建议按这个流程走：先定位瓶颈，再对应到规则类别，最后提出定向重写或审查请求。针对数据获取，要说明任务是否可以并行化或延后执行。针对 bundle 问题，要明确希望调整 import、动态加载，还是延后第三方脚本。针对渲染问题，要点出 flicker、hydration mismatch 或高成本 rerender，这样技能才能把注意力放到影响最大的修复上。

优先先读哪些文件

先读 SKILL.md，了解分类映射，再读 AGENTS.md，看更完整的结构。如果任务涉及异步行为，请查看 rules/async-defer-await.md、rules/async-dependencies.md、rules/async-api-routes.md 和 rules/async-suspense-boundaries.md。如果问题与 bundle 相关，先看 rules/bundle-barrel-imports.md、rules/bundle-dynamic-imports.md 和 rules/bundle-defer-third-party.md。

vercel-react-best-practices 技能 FAQ

这只适用于 Next.js 吗？

不是。它在 Next.js 应用中最有价值，但这些 React 性能模式同样适用于普通 React 前端。当代码同时混用了 client components、server rendering 和数据获取时，vercel-react-best-practices skill 尤其有用。

它和普通提示词有什么不同？

普通提示词往往只会给出“用 memoization”“拆分组件”之类的泛泛建议。这个技能更适合你需要有规则依据的决策，比如何时延后 await、避免 barrel imports，或把工作移到服务端。这也是为什么 vercel-react-best-practices guide 在代码审查和重构场景里更可靠。

什么情况下不该用它？

不要把它用于设计系统品牌、仅后端 API 逻辑，或者与性能无关的 bug。如果任务只是一个很小的 UI 文案修改，或者只是没有 React/Next.js 实现细节的纯架构讨论，这个技能提供的价值就很有限。它也不能替代产品层面的判断，比如某个功能到底该不该存在。

它适合初学者吗？

适合，但前提是把它当作带路式重构助手，而不是完整的理论课程。初学者最适合一次只问一个聚焦问题，并贴出最小且相关的组件或路由。这样建议更可执行，也能减少误判。

如何改进 vercel-react-best-practices 技能

给技能加上正确的约束

效果最好的输入会包含真正有约束力的信息：server 还是 client component、数据源、bundle 预算、延迟目标，以及哪些内容绝不能改。若想让 vercel-react-best-practices for Frontend Development 给出的建议更精确，就要说明是否可以改 imports、拆分组件、加 Suspense，或把逻辑移到服务端。

按依赖顺序提供代码

不要只贴症状，要贴出造成瓶颈的那些文件。例如，把 page component、data loader，以及触发额外 fetching 的子组件一起提供出来。这样技能才能识别 waterfall、重复状态或不必要的 rerender，而不是只根据片段去猜。

先问规则，再要重写

一个很有用的追问是：“先说明最可能的规则类别，解释为什么适用，然后在尽量少改变行为的前提下重写代码。”这样可以强制输出始终围绕 vercel-react-best-practices usage 模型，也能避免给出泛泛而谈的大范围优化建议。

围绕可衡量结果迭代

第一轮之后，可以用更具体的目标继续收敛：更少请求、更小的 client bundle、更低的 hydration 成本，或者更少的 render churn。如果输出过于激进，就明确说要保留哪种权衡，比如可读性、可测试性或浏览器兼容性。这是让 vercel-react-best-practices 技能产出真正能上线代码的最快方式。