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
Install
seed-hypermedia/seed/xstate · repository language: TypeScript
git clone https://github.com/seed-hypermedia/seed
cp -r seed/.agents/skills/xstate ~/.claude/skills/xstatenpx skillfed install seed-hypermedia/seed/xstateFrequently 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)
Read as markdown · JSON record · Browse the source repository
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