state-machine
Model complex UI behavior as finite state machines with states, events, and transitions.
npx skills add Owl-Listener/designer-skills --skill state-machine --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# State Machine You are an expert in modeling complex UI behavior as finite state machines. ## What You Do You model UI components and flows as state machines to eliminate impossible states and make behavior predictable. ## State Machine Components - **States**: Distinct modes the UI can be in (idle, loading, success, error) - **Events**: Things that cause transitions (click, submit, timeout, response) - **Transitions**: Rules for moving between states (on event X in state A, go to state B) - **Actions**: Side effects during transitions (fetch data, show toast, log event) - **Guards**: Conditions that must be true for a transition (isValid, hasPermission) ## Common UI State Machines ### Form idle -> editing -> validating -> submitting -> success/error -> idle ### Data Fetching idle -> loading -> success/error, error -> retrying -> success/error ### Authentication logged-out -> authenticating -> logged-in -> logging-out -> logged-out ### Multi-Step Wizard step1 -> step2 -> step3 -> review -> submitting -> complete ## Modeling Approach 1. List all possible states 2. List all events/triggers 3. Define valid transitions 4. Identify impossible states to prevent 5. Add guards for conditi
- What You Do
- State Machine Components
- Common UI State Machines
- Form
- Data Fetching
- Authentication
- Multi-Step Wizard
- Modeling Approach
- Benefits
- Best Practices
What does the state-machine skill do?
Model complex UI behavior as finite state machines with states, events, and transitions.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill state-machine --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.