/interaction-design
Turn IA plus task flows into interaction design — state diagrams, sequence diagrams, user flows. Final step in the UX translation chain before decompose.
/interaction-designType it bare, or paste it with loose context after — Claude figures out the rest.
Nav and entities are drawn but the flow between screens is not. Devs invent transitions.
State diagrams and sequence diagrams that name every screen transition and API call.
Takes in
- IA model plus task flows
Returns
- State diagrams
- Sequence diagrams
- User flow overview
What it does
Translate IA and task flows into formal interaction specifications. Final layer: JTBD → HTA → IA → Interaction Design.
The most rigorous tool. Each screen or component mode is a state; user actions and system events are transitions.
Read the full skill
The complete instructions live at .claude/skills/interaction-design/SKILL.md in your repo after bassclef-sync. Open with your editor for phases, rules, and worked examples.
Where in the SDLC
Why this phase: State diagrams + sequence diagrams + user flows.
Related
- Skills catalog — browse all skills grouped by lifecycle phase
- Tier system — what each tier gives you
FAQ
Terms from bassclef vocabulary that appear on this page.
- skill
- A user-invocable command (like `/kiss` or `/temperance`) that runs a specific bassclef workflow. Every skill lives at `.claude/skills/<name>/SKILL.md` with frontmatter + procedure. Adopters type the slash command; Claude Code loads the skill and runs it.
Shipped by @kingofrock · Read the essays
/ia-model
Build information architecture from an entity inventory plus task flows. Derives nav structure, labeling, and screen map from the domain nouns.
/launch
Compare variants of an idea. Get a mock gallery. Pick a direction. Get a spec, user stories, and a plan to build. Two sizes — medium and full. Three modes — full, local, scratch.