xstate

Design and orchestrate XState v5 state machines with TypeScript.

Updated Dec 17, 2025
One-click install
npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill xstate-lrmdom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: xstate
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/xstate
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill xstate-lrmdom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

XState v5 Skill helps design and implement XState v5 state machines, actors, and statecharts in TypeScript and React, ensuring you follow the v5 API patterns and avoid legacy v4 approaches.

Core Features & Use Cases

  • State machine and statechart design with setup(), createMachine(), and createActor().
  • Actor systems and various actor types (Promise, Callback, Observable, Transition) for complex async orchestration.
  • Framework integration across React, Vue, and Svelte for UI state management.

Quick Start

Create a basic counter machine using setup, assign, and createActor, then start the actor and trigger events to observe state changes.

Frequently Asked Questions about xstate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build state machines with XState v5 and TypeScript?

Build XState v5 state machines in TypeScript by using setup() to configure types and actions, then createMachine() to define states, and createActor() to instantiate and start the machine for event-driven state transitions.

What is the best way to handle async orchestration in XState v5?

Handle async orchestration in XState v5 using actor logic creators like fromPromise(), fromCallback(), and fromObservable() to manage complex Promise, Callback, and Observable actor types within your statecharts.

Can I use XState v5 state machines with React, Vue, or Svelte?

XState v5 state machines integrate with React, Vue, or Svelte for UI state management, allowing you to orchestrate actors and statecharts across different frontend frameworks using its framework-agnostic core APIs.

How does XState v5 handle hierarchical, parallel, and nested states?

XState v5 handles hierarchical, parallel, and nested states through statechart configurations in createMachine(), enabling complex state structures and robust simultaneous state management within a single actor.

Why should I migrate from XState v4 to v5 setup and createActor APIs?

Migrating to XState v5 APIs like setup() and createActor() ensures you follow current v5 patterns, avoiding legacy v4 approaches while gaining robust actor systems and typed state machine orchestration.