vercel-composition-patterns · 把布尔参数过多的组件拆清楚

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

旧接口：<Dialog showFooter showCancel isDanger />；不同业务需要不同按钮。

输出

编辑示例 · 未运行

<Dialog open={open} onOpenChange={setOpen}>
  <Dialog.Title>删除草稿</Dialog.Title>
  <Dialog.Body>此操作将移除当前草稿。</Dialog.Body>
  <Dialog.Footer>
    <Button onClick={close}>取消</Button>
    <Button onClick={removeDraft}>删除</Button>
  </Dialog.Footer>
</Dialog>

用组合组件、上下文和状态提升重构 React 组件接口。

具体任务

重构布尔参数堆积：通过显式组合和变体表达实际界面结构。

分离状态与展示：明确谁拥有状态，保持调用方行为和无障碍合同。

必需材料

待重构组件及真实调用方

React版本和必须保留的行为

可选材料

现有测试

组件库约定

使用门槛

有真实复杂组合问题，不为了形式单独增加抽象。

这个 Skill 额外提供的方法

让调用处直接看见界面结构，减少难以解释的布尔组合。

编辑示例（未运行）

把可选页脚改成组合入口

任务：为Dialog设计更明确的调用方式

输入：
旧接口：<Dialog showFooter showCancel isDanger />；不同业务需要不同按钮。

结果片段：
```jsx
<Dialog open={open} onOpenChange={setOpen}>
  <Dialog.Title>删除草稿</Dialog.Title>
  <Dialog.Body>此操作将移除当前草稿。</Dialog.Body>
  <Dialog.Footer>
    <Button onClick={close}>取消</Button>
    <Button onClick={removeDraft}>删除</Button>
  </Dialog.Footer>
</Dialog>
```

以下为官方编辑构造的示例，未运行上游 Skill。展示调用API草案，内部仍需实现焦点管理和Dialog语义；未声称重构已完成。

首次任务

任务：重构布尔参数堆积。
任务重点：通过显式组合和变体表达实际界面结构。

必需材料：
- 待重构组件及真实调用方：[填写或粘贴我的材料；未具备则说明]
- React版本和必须保留的行为：[填写或粘贴我的材料；未具备则说明]

可选补充：
- 现有测试：[可填写，未提供不应假定存在]
- 组件库约定：[可填写，未提供不应假定存在]

请交付适配现有环境的代码或配置、必要说明及验证办法。仅依据这些材料处理；缺少决定结果的信息时先说明缺口，不补造事实。未执行的检查、修改或外部操作明确标为未执行。

使用前提：有真实复杂组合问题，不为了形式单独增加抽象。
处理边界：React19相关API需匹配项目版本；重构不能破坏键盘语义、状态同步或受控用法

验收要求：
1. 真实调用组合保持行为一致。
2. 状态归属和上下文范围明确。
3. 键盘及可访问性合同保留。

验收方法

真实调用组合保持行为一致

状态归属和上下文范围明确

键盘及可访问性合同保留

依赖与准备

React项目与完整composition rules；按当前React版本采用适用模式。

使用边界

React19相关API需匹配项目版本

重构不能破坏键盘语义、状态同步或受控用法

排错

复合组件层数过多：回看真实调用需求，删除没有独立价值的抽象。

状态不再同步：检查受控值和provider是否有唯一来源。

固定来源

https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/composition-patterns/SKILL.md

先看看示例

输入

输出

方法说明