Claude Code collaborative-design with visible scenarios
Explain a feature with input and output pairs, UI states, and timelines. Compare options, check risky assumptions, and record decisions before implementation.
中文Install in Claude Code
Use Claude Code with the task, known constraints, and representative states. Apply the workflow before building the feature.
- Review `.claude/skills/collaborative-design/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/collaborative-design/` in your project and save the reviewed file as `.claude/skills/collaborative-design/SKILL.md`.
- Start Claude Code from that project's root, then select `/collaborative-design` in the slash menu.
Example task
In feature design-26, a mobile filter drawer starts at {filter: 'All', pending: null}. The user selects Workshops but wants results unchanged until pressing Apply.What to check
The state comparison shows {beforeApply: 'All', afterApply: 'Workshops'}. Compare immediate updating and explicit application, then record the chosen behavior.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does this stage immediately change production code?
Use concrete scenarios and state changes to validate decisions first. Implement after the risks are checked and the design is agreed.