xstate
Build and refine state machines and statecharts using XState v5 patterns in TypeScript. This skill handles machine design from fuzzy requirements, code implementation and review, v4-to-v5 migration, and integration with React, Vue, Svelte, or Solid frameworks. It also helps you choose between XState and @xstate/store based on your domain's complexity.
XState helps you design and implement v5 state machines and statecharts in TypeScript for complex application logic.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
XState helps you design and implement v5 state machines and statecharts in TypeScript for complex application logic. Build and refine state machines and statecharts using XState v5 patterns in TypeScript. This skill handles machine design from fuzzy requirements, code implementation and review, v4-to-v5 migration, and integration with React, Vue, Svelte, or Solid frameworks. It also helps you choose between XState and @xstate/store based on your domain's complexity.
Use it when
- XState is a state machine and statechart library suited for complex, event-driven logic with explicit state definitions, guards.
- XState v5 introduces breaking changes in API design and TypeScript support.
Verify before relying
Read SKILL.md below before installing (10 files). Open directory: indexed for reading, not audited.
Install
seed-hypermedia/seed/xstate · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use XState v5 to build state machines?
XState v5 provides a modern TypeScript-first API for designing and implementing state machines and statecharts. Start by defining states, events, and transitions using the `createMachine` function. XState v5 emphasizes type safety, async workflows via actors, and cleaner syntax compared to earlier versions. Use guards to conditionally route transitions, context to store domain data, and child actors to compose complex logic. The skill covers machine setup patterns, event naming conventions, and how to structure machines for clarity and maintainability.
What is the difference between XState and @xstate/store?
XState is a state machine and statechart library suited for complex, event-driven logic with explicit state definitions, guards, and transitions. @xstate/store is a lighter reactive store for simpler state management without the overhead of formal state machines. Choose XState when your domain has complex workflows, parallel states, or intricate guard logic; choose @xstate/store for straightforward reactive state that doesn't require state machine formalism. This skill helps you evaluate your problem's complexity to pick the right tool.
How do I migrate XState v4 code to v5 patterns?
XState v5 introduces breaking changes in API design and TypeScript support. Key migration steps include updating machine definitions to use the new syntax, refactoring actors and async logic with `fromPromise` and other actor creators, and leveraging improved type inference. The skill guides you through common v4-to-v5 patterns, shows how to adapt guards, transitions, and context typing, and helps you adopt modern TypeScript practices to ensure your migrated code is both correct and maintainable.
How do XState actors and workflows handle async operations?
XState v5 uses actors as composable units that can manage async workflows. The `fromPromise` callback creator lets you wrap async operations (API calls, timers) and emit events on success or failure. Child actors allow you to spawn and manage multiple concurrent workflows, each with its own state machine. This skill covers designing async workflows, handling race conditions, coordinating multiple actors, and integrating them into your main machine's logic for robust, event-driven async handling.
How do I integrate XState machines with React, Vue, Svelte, or Solid?
XState provides framework-specific hooks and bindings to connect machines to UI libraries. In React, use `@xstate/react` hooks; in Vue, Svelte, or Solid, use their respective XState integrations. The skill covers subscribing to machine state, dispatching events from UI handlers, and syncing context updates with component rendering. You'll learn how to wire machines into your framework's lifecycle, manage side effects, and keep UI and state logic cleanly separated for testability and reusability.
What are XState guards, transitions, and tagged states for UI?
XState guards are conditional functions that determine whether a transition fires based on context or event data. Transitions move the machine from one state to another in response to events. Tagged states let you label states with semantic tags (e.g., 'loading', 'error') for easier UI mapping without hardcoding state names. This skill teaches you to design clear guard logic, structure transitions for readability, and use tags to decouple your UI from internal machine structure, making code reviews and refactoring safer.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
XState v5
Use this skill for state machine and statechart engineering first and API correctness second.
This skill is v5-only. When examples, blog posts, answers, or local code smell v4-ish, translate them rather than mixing versions. Prefer local repo code and official v5 docs over generic memory.
Your job:
- choose between
xstateand@xstate/store - design a sound machine or actor system from messy requirements
- write modern XState v5 TypeScript code in a consistent style
- review, repair, or improve existing XState code
- migrate legacy v4-ish patterns when they appear
- choose the right actor kind and action
(truncated - see the full file via the links below)
File tree — 10 files
.agents/skills/xstate/SKILL.md
.agents/skills/xstate/evals/evals.json
.agents/skills/xstate/evals/extract_and_typecheck.py
.agents/skills/xstate/evals/regrade_weighted.py
.agents/skills/xstate/references/adapters.md
.agents/skills/xstate/references/advanced-patterns.md
.agents/skills/xstate/references/examples.md
.agents/skills/xstate/references/observables-and-inspection.md
.agents/skills/xstate/references/react.md
.agents/skills/xstate/references/v4-to-v5-quick-ref.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Design and implement XState v5 state machines and statecharts for complex app logic”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Xstate v5 provides patterns for finite state machines, the actor model, and lightweight event-driven stores using @xstate/store. Learn how to eliminate impossible states, orchestrate workflows with TanStack Query integration, and apply type-safe machine design with the setup() API in React applications.
XState Store guides you through building typed, event-driven state with createStore or createStoreLogic, adding persistence and undo-redo via extensions, and wiring stores into React. Learn when to reach for atoms, how to enqueue effects and emit events, declare runtime schemas, and migrate from v3.
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
Zustand State Builder guides you through creating minimal, type-safe state stores with optional middleware for persistence, debugging, and immutable updates. Learn to structure stores for async operations, split logic into modular slices, and connect them to React components.
Master state management by understanding which tool fits each scenario: Zustand for straightforward global state, Jotai for fine-grained atomic updates, and Context for dependency injection. This skill covers practical patterns, including how to structure complex stores with slices, leverage derived atoms, and keep server data separate using TanStack Query.
Master Zustand 5.x state management with practical patterns for React applications. This reference covers store creation, middleware composition, selector optimization, and persistence strategies—all with TypeScript examples and clear anti-patterns to avoid.