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

Claude Code component-modularity for multi-section React forms

Split a page or dialog into an orchestrator and section components, distinguishing shared submission data from local interaction state.

中文

Install in Claude Code

Open a React project in Claude Code with the current page or form. Identify state needed by more than one section.

  1. Review `.claude/skills/component-modularity/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/component-modularity/` in your project and save the reviewed file as `.claude/skills/component-modularity/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/component-modularity` in the slash menu.

Example task

Screen edit-24 has 3 sections: basics, contact details, and notes. Save needs data from all three sections, while collapse affects its own section only.

What to check

Produce {sectionFiles: 3, coordinatorFiles: 1}. The coordinator owns shared form data, and sections own collapse state and report updates through callbacks.

Original SKILL.md on GitHub · Updated

Frequently asked question

When should state stay in a section component?

Keep local-only state in its section. A value needed for submission or across multiple sections belongs in the orchestrator.