Xstate V5

This is for working with XState v5 state machines and statecharts in TypeScript. It knows the difference between when you actually need a state machine versus when @xstate/store is enough, and it won't over-engineer simple problems. The skill handles design, implementation, code review, and v4-to-v5 migrations. It prefers sketching the machine shape first when requirements are fuzzy, uses modern setup patterns for new code, and knows to preserve existing style when editing legacy machines. Good for modeling non-trivial UI flows, async workflows, or any system with meaningful finite modes. It understands actors, guards, parallel states, and how to connect machines to React, Vue, Svelte, or Solid.

skills.sh installs: 524
GitHub stars: 50
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add statelyai/skills --skill xstate-v5 --agent claude-code

Installs into .claude/skills of the current project.

Files

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 xstate and @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 shape when the problem is not just assign(...) plus fromPromise(...)
connect machines and actors to @xstate/react, @xstate/vue, @xstate/svelte, or @xstate/solid when needed

First pass

In an existing codebase:

Inspect local package.json files and imports.
Read nearby machines, stores, actors, and adapter usage.
Distinguish between new code, local edits, and migration work before choosing how opinionated to be.
Preserve surrounding style by default.