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.

Install to Claude Code

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