{"enrichment":{"faq":[{"a":"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.","q":"How do I use XState v5 to build state machines?"},{"a":"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.","q":"What is the difference between XState and @xstate/store?"},{"a":"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.","q":"How do I migrate XState v4 code to v5 patterns?"},{"a":"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.","q":"How do XState actors and workflows handle async operations?"},{"a":"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.","q":"How do I integrate XState machines with React, Vue, Svelte, or Solid?"},{"a":"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.","q":"What are XState guards, transitions, and tagged states for UI?"}],"shadow_tags":["finite-state-machines","workflow-orchestration","actor-systems","typescript-patterns","ui-state-management","async-coordination","process-modeling","guard-logic","state-transitions","visual-modeling"],"summary_rewrite":"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."},"files":[{"bytes":13586,"path":".agents/skills/xstate/SKILL.md","sha256":"6193996932e735f9cc62232306f627f9df280abcd83757c1ebe9d5c76e34aeaf","url":"https://skillfed.io/files/seed-hypermedia/seed/xstate/bf23fbaa/SKILL.md"}],"id":"seed-hypermedia/seed/xstate","links":{"html":"https://skillfed.io/seed-hypermedia/seed/xstate","md":"https://skillfed.io/seed-hypermedia/seed/xstate.md","repo":"https://github.com/seed-hypermedia/seed"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":11,"language":"TypeScript","last_updated":"2026-07-27","license":"Apache-2.0","name":"xstate","publisher":"seed-hypermedia","stars":55},"relations":{"similar":[{"id":"statelyai/skills/xstate-v5"},{"id":"bobmatnyc/claude-mpm-skills/react-state-machine"},{"id":"pedronauck/skills/xstate"},{"id":"statelyai/skills/state-management"},{"id":"statelyai/skills/readme"},{"id":"vercel-labs/json-render/xstate"},{"id":"pedronauck/skills/xstate-store"},{"id":"rivet-dev/skills/collaborative-text-editor"},{"id":"PlamenTSV/plamen/outcome-determinism"},{"id":"Italink/UnrealClientProtocol/unreal-actor-editing"}]},"slug":{"owner":"seed-hypermedia","repo":"seed","skill":"xstate"},"version":"bf23fbaa"}