用途：Composition Patterns 是 Agent Skills 系列中的一个技能，教智能体用组合模式构建灵活、可维护的 React 组件，替代僵化、属性繁多的 API。
主要能力：涵盖四类互补模式——复合组件（compound components）用于相关 UI 家族；状态提升（state lifting）用于跨组件共享状态；内部组合（internal composition）用于封装子渲染；渲染委托（render delegation）用于最大化使用方控制。资料指出，智能体在 React 中最常见的错误是构建带大量布尔属性的单体组件（如 showHeader、isCompact、isLoading），每个布尔值都会使状态空间翻倍，造成指数级测试面并难以扩展；组合模式用结构化组合替代这些布尔值。
使用方式：当组件有超过 3 个布尔配置属性、相关组件需共享隐式状态（标签页、手风琴、选择器）、使用方需控制子元素布局或顺序、组件需支持设计时未预料到的用例、将“上帝组件”重构为可组合片段，或构建组件库/设计系统时使用。实现上，复合组件通过 Context 由父组件提供状态、子组件消费；状态放在最近的共同祖先；组件内部自行组合；使用方传入渲染函数。资料给出 Tabs 与 Card 的示例，展示用 Tabs.Tab、Tabs.Panel、Card.Header 等组合式 API 替代布尔属性。
最佳实践：子元素共享隐式状态时用复合组件；新增功能时暴露可组合 API 而非加布尔标志；保持 Context 提供者窄小，一个关注点一个 Context；提供合理默认值；用使用示例而非仅属性表记录组合式 API；用 TypeScript 可辨识联合替代布尔属性组合。
平台兼容：Cursor、VS Code、Windsurf、Claude Code、Cline 为完全支持，aider 为部分支持（组合感知有限）。相关技能包括 React Best Practices、View Transitions、Web Design Guidelines、Edge Rendering。
限制：资料未提供收费、价格、安装命令或具体版本要求等信息。