Agent skill · software engineering · pedronauck
xstate
Comprehensive guide for XState v5 ecosystem including state machines, actors, @xstate/store, and TanStack Query integration. Use when implementing state machines, event-driven stores, client state management, or integrating XState with React and TanStack Query for data fetching orchestration.
Why this skill is useful
Provides specific integration patterns and best practices for using XState with React and TanStack Query that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-01. 564 stars on the source repository.
What this skill does
XState v5 Developer Guide This skill provides comprehensive guidelines, patterns, and best practices for working with the XState v5 ecosystem in this project, including: XState State Machines - Finite state machines and actors for complex application logic @xstate/store - Simple event-driven stores for lightweight state management XState + TanStack Query - Integration patterns for data fetching orchestration Quick Reference Use Case Tool Reference ---------- ------ ----------- Complex state flows, guards, hierarchical states XState Machines references/machine-patterns.md Simple event-driven state, atoms, undo/redo @xstate/store references/store-patterns.md Data fetching with state orchestration XState + TanStack Query references/query-patterns.md Core Principles XState State Machines Explicit States: Model application logic as explicit finite states and events Actor Model: Embrace the actor model for complex orchestration Impossible States: Use statecharts to eliminate impossible states Declarative Thinking: Think declaratively about state transitions Visualization: Use Stately Editor for visual machine creation and debugging @xstate/store Event-Driven Updates: Use events for all state updates (never direct mutations) Keep Stores Simple: Focus on data management, not complex logic Optimized Subscriptions: Leverage selectors for efficient state access Reactive State: Use atoms for composable, reactive state Upgrade Path: Migrate to XState machines when complexity grows XState + TanStack Query Integration XState for Orchestration: Use XState machines for workflow orchestration TanStack Query for Data: Use TanStack Query for data fetching and caching Actors as Bridges: Wrap Query operations as XState actors Cache Updates in Mutations: Keep query cache updates in mutation callbacks --- XState State Machines Creating a Machine with setup() API Always use the setup() API for type-safe machines: React Integration Use useMachine() for component-scoped machines and .provide( …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills pedronauck/xstate