Claude Code component-modularity：拆分 React 多区表单
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/component-modularity/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/component-modularity/`，把核对后的文件保存为 `.claude/skills/component-modularity/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/component-modularity`。
中文摘要
把多区页面或弹窗拆为编排组件和各区组件，区分跨区提交数据与局部交互状态。
SKILL.md 中文导读
可复现示例
界面 edit-24 有基本资料、联系资料、备注共 3 个分区。最终保存要收集三处数据，展开和收起各区只影响该区。工作步骤
- 列出页面分区和提交需要的字段，识别哪些状态只影响局部显示。
- 划分文件和状态责任，确认跨区表单值能由编排组件汇总。
验收方法
拆分结果为 {sectionFiles: 3, coordinatorFiles: 1}。协调文件保存共享表单数据，各区管理展开状态，并通过回调提交变更。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开 React 项目，准备现有表单或页面，明确哪些状态由多个区域共享。
常见问题
何时可以把状态留在分区内部？
状态只影响当前分区时留在该组件。提交或多个分区需要共同读取的值由编排组件持有。