vercel-composition-patterns

此技能提供了一套用于应用 React 组合模式的结构化框架，以确保可维护且可扩展的前端架构。它专为软件工程师、前端架构师以及负责重构旧有组件或构建新设计系统的 AI 编码助手而设计。通过优先考虑“组合而非配置”，此技能帮助开发者摆脱布尔属性滥用的技术债，转向更灵活的 API 设计，例如复合组件、渲染属性 (render props) 和上下文提供者 (context providers)。

• 支持使用组件分解和状态提升至提供者等模式进行架构重构。

• 为实作上下文接口模式提供具体指导，以改善依赖注入和状态管理。

• 包含对现代 React 19 API 变更的支持，例如以直接属性访问取代 forwardRef，以及利用 use() Hook 进行上下文访问。

• 依据影响力将规则分类：组件架构 (高)、状态管理 (中) 和实作模式 (中)，协助 AI 代理优先处理重构工作。

• 标准化复合组件的代码结构，确保子组件在共享内部状态的同时，为终端用户维持干净、声明式的 API。

• 适用于构建可重用组件库、设计系统或复杂 UI 组件（如菜单、模态框和数据网格）的场景。

• 输入要求：展现高循环复杂度、过度属性钻取 (prop drilling) 或难以维护的布尔属性的代码库或组件文件。

• 输出内容：引导式重构步骤、基于上下文的提供者实作、子组件组合逻辑以及对 React 19 最佳实践的遵循。

• 限制：此技能主要针对 React 和 Next.js 项目；用户需注意 React 19 特定模式需要相应的环境升级。

• 实作建议：始终采取架构优先的方法，先识别可以提升的状态，在实作个别子组件之前先定义上下文接口。