---

name: state-machine description: Document UI component states (current vs expected) with transitions

State Machine Skill

Document the state machine for UI components, comparing current behavior to expected behavior and mapping all state transitions.

When to Use

• During Ask mode CONVERGE loop for stateful components
• When refactoring existing components with complex state
• Before implementing new interactive UI components

Instructions

Phase 1: Identify States

List all possible states for the component:

Common States to Consider:

Phase 2: Map Transitions

Define what triggers each state change:

Phase 3: State Diagram

Create a Mermaid state diagram:

CopystateDiagram-v2
    [*] --> Initial
    Initial --> Loading : fetch
    Loading --> Success : data received
    Loading --> Error : request failed
    Loading --> Empty : no data
    Error --> Loading : retry
    Success --> Loading : refresh
    Empty --> Loading : refresh
    Success --> [*] : unmount

Phase 4: Data Requirements

For each state, define what data is needed:

Phase 5: Edge Cases

Identify edge cases and how to handle:

Output Format

Copy## State Machine: [Component Name]

### State Table

| State | Current | Expected | Data Required |
|-------|---------|----------|---------------|
| Initial | [Behavior] | [Behavior] | [Data] |
| Loading | [Behavior] | [Behavior] | [Data] |
| Success | [Behavior] | [Behavior] | [Data] |
| Error | [Behavior] | [Behavior] | [Data] |
| Empty | [Behavior] | [Behavior] | [Data] |

### Transition Diagram

[Mermaid stateDiagram]

### Edge Cases

| Case | Handling |
|------|----------|
| [Case] | [How to handle] |

### Summary
- States: [N] identified
- Transitions: [N] mapped
- Edge cases: [N] documented

Invocation

Invoke manually with "use state-machine skill" or follow Ask mode CONVERGE loop which references this skill.

Related Skills

• qa-planning - Uses states to define test coverage
• design-context - Check existing component states in Storybook