State Machine

This turns Claude into someone who models UI behavior as finite state machines instead of wrestling with boolean flags and nested conditionals. You get help defining states (idle, loading, success, error), events that trigger transitions, guards for conditional logic, and actions for side effects. It's most useful when you're building forms, data fetching flows, auth states, or multi-step wizards where keeping track of what's possible gets messy fast. The real win is eliminating impossible states like "loading and errored at the same time" and making edge cases visible upfront. If you've ever debugged a component where you had no idea how it got into a weird state, this approach forces you to be explicit about every valid transition.

skills.sh installs: 2.4K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add owl-listener/designer-skills --skill state-machine --agent claude-code

Installs into .claude/skills of the current project.

Files

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)