xstate-machine-modeling

What problem does it solve?

This Skill helps users design and model XState v5 state machines from scratch, addressing the complexity of defining states, events, context, actions, and actors.

Core Features & Use Cases

• Systematic Modeling Process: Guides users through 5 steps: listing events, tasks, dividing tasks into actions/actors, defining initial state, and building states iteratively.
• State vs. Context Decision Making: Provides clear rules and examples for when to use finite states versus context variables.
• Action vs. Actor Decision Making: Offers a detailed comparison table and code examples to differentiate between actions and actors.
• Event Design: Recommends using dot-notation for namespacing events for better organization and wildcard transitions.
• State Naming Conventions: Advises on naming states based on the machine's current activity rather than past events.
• Anti-Patterns: Highlights common mistakes like using boolean flags instead of states, missing error states, and over-modeling.
• Complete Example: Includes a fully modeled data fetcher machine.

Quick Start

Use the xstate-machine-modeling skill to learn how to design an XState v5 state machine for a user authentication flow.