XState State Machines

Model complex UI logic with XState v5 state machines and statecharts. Eliminates impossible states, makes async flows explicit, and visualizes app behavior.

This skill produces XState v5 setup machines with strict typings, actor model patterns, parallel and history states, invoke-based async services, and integrations with React (useMachine, useActor) and Vue. It also helps migrate from boolean-soup useStates to proper state machines.

When to use

Use when modeling multi-step flows (checkout, wizards, auth, drag-drop), eliminating bug-prone boolean flag combinations, or when you need to visualize and reason about UI state.

Examples

Checkout wizard machine

Model a multi-step checkout with guards and async submit

Build an XState v5 machine for a 4-step checkout with cart, address, payment, review states; guards for validation; invoke for payment intent

Drag-drop file upload

Parallel states for drag, drop, upload progress, and validation

Create an XState machine for drag-and-drop file upload with parallel regions for hover state and upload progress with retry