Saltar al contenido
Marketplace

state-machine

de owl-listener

Model component behaviour as explicit states, events, and transitions. Use when a component has many interacting states that must be exhaustive. For the feel and feedback of a single interaction, use `micro-interaction-spec`.

Resumen

SKILL.mdLeída en 9a6930c

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 conditional transitions
  6. Define entry/exit actions per state

Benefits

  • Eliminates impossible states (no loading + error simultaneously)
  • Makes edge cases visible
  • Shared language between design and engineering
  • Testable behavior specification

Best Practices

  • Start with the happy path, then add error states
  • Every state should have a way out (no dead ends)
  • Keep state machines focused (one per concern)
  • Document with visual diagrams
  • Map each state to a UI representation

Archivos 1 archivo

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add owl-listener/designer-skills --skill state-machine

Más de owl-listener

  • presentation-deckowl-listenerStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.2,800 instalaciones en skills.sh0
  • typography-scaleowl-listenerCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).2,300 instalaciones en skills.sh0
  • visual-hierarchyowl-listenerEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).2,300 instalaciones en skills.sh0
  • color-systemowl-listenerBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).2,200 instalaciones en skills.sh0
  • dark-mode-designowl-listenerAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.2,200 instalaciones en skills.sh0
Todas las skills de owl-listener