vercel-composition-patterns

vercel-composition-patterns 技能为构建灵活、可维护且可扩展的 React 组件架构提供了严谨的框架。它专为需要重构复杂 UI 或为新项目建立架构的软件工程师与 AI 编码代理而设计。通过优先考虑“组合而非配置”的原则，此技能协助开发人员摆脱导致组件库僵化且难以扩展的“属性钻取 (prop drilling)”与“布尔属性扩散 (boolean prop proliferation)”问题。

此技能特别适用于构建可重复使用的组件库，或是设计需要子组件间深度状态同步的复杂接口。它强调现代 React 实践，包括有效利用 Context Provider 进行状态管理、复合组件 (compound components) 模式以实现直观的 API 设计，以及通过状态提升 (lifting state) 来降低耦合。这些指南同时涵盖了最新的 React 19 API 变更，确保所产生的代码与当前最佳实践保持同步。

• 架构：强制执行复合组件与组合模式，以取代繁琐的布尔属性配置。

• 状态管理：提供通过 Context 接口与状态提升来将实现细节与 UI 解耦的模式。

• 实现：提供具体策略，利用 children 组合而非 render props 来提高性能与可读性。

• React 19 就绪：包含关于现代 Hooks 的特定指南，并在适当时将 forwardRef 等旧有模式替换为 use() hook。

• 优先级：依影响力（高、中、低）对规则进行分类，协助代理优先执行基础架构的重构。

• 当您需要重构因属性过多而难以维护的旧有组件时，请使用此技能。

• 适合用于设计需要高度灵活以适应不同终端用户配置的组件 API。

• 此技能的输入通常为组件文件或架构提示；输出将是一组基于规则库的模式与重构建议。

• 限制：主要专注于 React 与 Next.js 生态系统；建议结合其他专门的性能或无障碍技能以实现全栈覆盖。

• 在实现时，优先参考提供的规则文档，以确保大型代码库中的一致性。