词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

vercel-composition-patterns

Claude Code 用 Vercel 组合模式重构 React 组件

Claude Code 安装步骤

  1. 打开固定版本的 GitHub 原文，从同一提交取得 `skills/composition-patterns/` 完整目录。
  2. 复制时将来源目录 `skills/composition-patterns` 存入 `.claude/skills/vercel-composition-patterns/`，保留 `rules/` 与引用文件。
  3. 从项目根目录启动 Claude Code，确认命令菜单显示 `/vercel-composition-patterns`，再用下方样例验证。

中文摘要

分析 React 组件被多个布尔开关挤满的场景，用显式子组件和状态边界降低调用复杂度。

SKILL.md 中文导读

可复现示例

现有 Composer 有 showToolbar、showAttachments、showSubmit 三个布尔属性。给出评论区和私信窗口两个调用例，要求保持现有提交回调和键盘操作。

工作步骤

  1. 列出现有调用方、状态归属和需要保留的交互。
  2. 为两个调用方设计显式组合接口，并给出迁移后的调用示例。
  3. 检查键盘提交、附件隐藏和取消输入的行为是否一致。

验收方法

两个调用例通过显式组合选择工具栏和附件，提交回调的参数、触发次数和键盘路径与原版本一致。

GitHub 原文 · 更新日期

适用环境

Claude Code 与 React 项目。先检查项目 React 版本，涉及 React 19 的规则只在项目版本支持时采用。

常见问题

React 组件的布尔开关太多，Claude Code 怎么用组合模式重构？

先用真实调用方证明哪些变体需要保留，再把界面部件拆成显式组合，最后回归行为。

相关指南

相关推荐