Xstate

This is a comprehensive XState v5 skill that guides you through designing, implementing, and migrating state machines in TypeScript. It knows when to recommend the simpler @xstate/store instead of a full machine, which is refreshingly practical. The skill emphasizes modeling first and API correctness second, walking you through the right questions before you write code: what are the finite states, what belongs in context, should this be a guard or a separate state. It handles three distinct modes (new code, local edits, migrations) and adjusts its opinionation accordingly, so it won't bulldoze your existing codebase with unnecessary refactors. Particularly strong on v5-specific patterns like setup scoped actions, tags for UI semantics, and choosing the right actor type for your async work.

skills.sh installs: 541
GitHub stars: 59
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add seed-hypermedia/seed --skill xstate --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.

In Seed, the main repo currently uses xstate@5.19.2 and @xstate/react@4.1.3, especially under frontend/packages/shared/src/models/**. Read nearby Seed machines and hooks before editing them, particularly document-machine.ts, document-card-cleanup-machine.ts, use-document-machine.ts, use-editor-gate.ts, and React usage of useActorRef(...), useMachine(...), and useSelector(...).

Your job:

SKILL.md on GitHub

Details

Repository: github.com/seed-hypermedia/seed
Category: Frontend Development
First seen: Jun 3, 2026

Xstate

Install

Files

XState v5

Details

Recommended