---
name: "xstate-v5-actor-state-machines"
description: "Model complex multi-step application logic and UI flows with mathematical state machines."
metadata:
  author: "Stately"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create xstate v5 machine"
  - "xstate guards and actions"
  - "useActorRef react xstate"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# XState v5 Actor Model & Finite State Machines

Designs state machines with XState v5: defining states and events with setup and createMachine, entry/exit actions, guard conditions, invoked actor promises, and visualizing machines with Stately Studio.

## When to Invoke
Invoke this skill whenever you need to:
- create xstate v5 machine
- xstate guards and actions
- useActorRef react xstate

## Execution SOP & Rules
1. Create machine with setup({ types: ... }).createMachine({ initial: 'idle', states: { ... } }).
2. Define transitions with on: { SUBMIT: { guard: 'isValid', target: 'processing' } }.
3. Consume in React: const [state, send] = useActor(checkoutMachine).
4. Inspect active state with state.matches('processing') to render appropriate UI views deterministically.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.