弹窗有太多布尔模式
把 compact、confirm、destructive、showFooter 等属性组合改成有名称的组件组合，让调用方看得出行为。
Vercel Composition Patterns by Vercel Labs
使用 Vercel Labs 的 Vercel Composition Patterns，梳理 React 组件 API 与共享状态。针对不断增加的布尔属性、复杂变体和组件库扩展需求，探索复合组件、Provider 与明确变体，让组件结构更贴近实际调用方式。
安装与快速上手
选择你使用的 Agent，查看对应的安装或使用方式。在 Floatboat 中，可复制请求让 Agent 读取原始说明；其他选项会显示该 Skill 的安装命令或发布者提供的原生步骤。
选择 Agent
在 Floatboat 中开始
复制请求，粘贴到 Floatboat 对话
请阅读 https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md 中的 Vercel Composition Patterns 原始说明，介绍它的用途、所需工具和安装方式，再协助我使用。由 Agent 读取原始说明，再确认当前环境的使用方式。
下载 Floatboat ↗试试这样提问
把这个带六个布尔属性的 Modal 重构成能支持确认和编辑流程、又不会出现意外组合的 API。
关于 Vercel Composition Patterns
Vercel Composition Patterns 是 Vercel Labs 发布的 React 组件设计与重构 Skill，重点处理属性和行为模式不断增加后难以理解的组件 API。它介绍复合组件、由 Provider 管理的共享状态、明确变体，以及通过 children 组织结构的方式，帮助 Agent 从真实调用出发，区分共享行为与界面表现，提出更清晰的接口。原始规则还包含 React 19 专属 API 建议，使用时需要对应项目版本。它适合组件库设计和已有复杂组件的整理；实施时应检查代表性调用，逐步迁移并验证交互，避免只为采用某种模式而增加抽象。
React 组件组合的使用场景
探索组件属性与状态关系已经影响扩展的设计任务，例如模式过多的弹窗、共享状态的多个控件，或需要开放布局能力的组件库。围绕实际调用需求，判断复合组件、Provider 和明确变体分别适合解决哪些问题。
兄弟控件需要共享状态
把状态与操作集中到 Provider，而不是逐层传给所有中间组件。
组件库使用者需要可控的灵活性
提供复合部件或明确变体，让使用者能组合布局，同时不必重新实现内部逻辑。
如何设计 React 组件 API
把组件和代表性调用一起交给 Agent，找出含义不清的属性组合与状态归属。根据实际需求选择组合模式，先迁移少量常见和边缘用法，验证交互与接口后再扩大范围。
- 01
检查组件与调用方
提供组件与代表性调用。找出含义不清的属性组合，并列出调用方真正需要的变化。
- 02
设计组合方式
让 Agent 提议复合部件、明确变体或共享状态 Provider。选择具体 API 前先核对 React 版本要求。
- 03
迁移并验证调用
将常见和边缘用法迁移到新接口。验证交互，并在迁移期间保持其余调用正常工作。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Vercel Composition Patterns 常见问题
什么是复合组件？
它把相关部件放在同一套组件 API 下，通常通过上下文协调状态，让调用方按需要组合结构。
所有布尔属性都要删除吗？
不用。问题在于行为模式膨胀和组合含义不清；如果一个简单开关依然清楚，就无需强行移除。
这个 Skill 会提升运行性能吗？
它主要解决组件架构的可维护性。如果重构目的是性能提升，仍需单独测量。
React 18 项目可以用吗？
通用模式可以使用；原文单独标记了 React 19 专属建议，旧版本不应套用。
已有组件如何逐步迁移？
先挑一个难以理解的属性组合，提供语义清楚的组合方式，并保持旧调用仍可工作。验证新接口后再扩大范围，不必一次重写整个组件库。
什么时候不需要引入共享 Context？
如果某个值只传给一个直接子组件，普通属性通常更清晰。只有多个相关组件确实需要共享状态契约时，才有必要引入 Provider。
组件 API 审查应提供哪些文件？
提供组件、已有状态 Provider 和几个真实调用方，并注明 React 版本及难以维护的属性组合，让 Agent 围绕实际用途设计接口。