marketing-shibata50/designer-skills
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
designer-skills/interaction-design/commands/map-states.md

952 B
Raw Blame History

description argument-hint
Model the states and transitions for a complex UI component. [component name, e.g., 'media player' or 'multi-step checkout']

/map-states

Model states and transitions for a complex component.

Steps

  1. Identify states — List all possible states using state-machine skill.
  2. Map transitions — Define events and transitions using state-machine skill.
  3. Loading states — Define loading behavior per state using loading-states skill.
  4. Error states — Map error conditions using error-handling-ux skill.
  5. Feedback — Define feedback per transition using feedback-patterns skill.
  6. Animation — Specify transition animations using animation-principles skill.

Output

Complete state machine diagram with states, events, transitions, guards, actions, and UI representation per state. Consider following up with /design-interaction for detailed interaction specs.