mcpField
X
xstate-store

xstate-store

github.com/pedronauckDevelopment64485 installsUpdated 1w ago
Repository

About xstate-store

xstate-store is a coding skill for working with @xstate/store v4 and @xstate/store-react v2 in TypeScript projects. It guides primitive selection and provides focused references for store logic, React integration, testing, and migration.

Key features

  1. 01Choose a state primitive
  2. 02Implement store transitions and effects
  3. 03Use atoms and selectors
  4. 04Connect stores to React
  5. 05Test and migrate stores

Use cases

  1. 01Select a state model for a feature
  2. 02Add async effects and emitted events
  3. 03Wire store state into React components
  4. 04Migrate a v3 or Zustand store

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/pedronauck/skills --skill xstate-store

After installing, type/xstate-storein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
effects-and-events.md
extensions.md
migration-v4.md
react.md
schemas-and-validation.md
selectors-and-atoms.md
store-core.md
store-logic-and-input.md
testing-and-interop.md

Details

From the project README

XState Store

Targets @xstate/store v4 and @xstate/store-react v2 (TypeScript 5.4+). Read the reference matched by the API or behavior being changed. Load adjacent references only for concerns the change crosses; reuse relevant context already read.

Pick the primitive first

StatePrimitiveWhy
Domain state updated through named eventscreateStore({ context, on })Typed trigger, can, emitted events, replayable transitions
Per-instance state built from inputcreateStoreLogic({ context: (input) => … })One definition, many instances; selectors come along
A single value set directlycreateAtom(value)No event vocabulary to justify a store
A value computed from other atoms or selectorscreateAtom(() => …)Read-only, recomputes on dependency change
Modes, guards, delays, hierarchical or parallel statesxstate machineA store models data, not lifecycle

Done when: the primitive is chosen from this table and its justification holds.

Branches

When you are…Reference
Creating a store, writing transitions, using trigger/send/can, or Immerreferences/store-core.md
Enqueuing effects, emitting events, or doing async workreferences/effects-and-events.md
Declaring schemas or turning on runtime validationreferences/schemas-and-validation.md
Reading state with store.select, atoms, derived/async/reducer atomsreferences/selectors-and-atoms.md
Building reusable/per-instance stores with createStoreLogic, input, or selectorsreferences/store-logic-and-input.md
Adding persist, undoRedo, reset, or composing .with(...)references/extensions.md
Wiring a store into React componentsreferences/react.md
Testing transitions, inspecting a store, or interoperating with XStatereferences/testing-and-interop.md
Upgrading a v3 store to v4, or porting an existing Zustand store overreferences/migration-v4.md

Apply the technical rules relevant to the changed behavior.

Tripwires

Transitions — return the complete next context (spread the old one); return undefined to mark an event disallowed, which is what store.can.*() reports.

Effects — call enqueue.effect, enqueue.emit.*, and enqueue.trigger.* synchronously inside the transition; async work goes inside enqueue.effect(async () => …) and reports back by triggering another event.

Imports — framework bindings come from @xstate/store-react (and siblings), never @xstate/store/react; extensions come from @xstate/store/persist, /undo, /reset, /validate.

Schemas — schemas types the store; only .with(validateSchemas()) validates at runtime.

Atoms — computed atoms read dependencies via .get(); their first parameter is the previous computed value, so annotate createAtom<T>(…) when using it.

React — module-scoped stores for app-wide state, useStore(logic, input) for component-scoped state; subscribe through useSelector/useAtom rather than getSnapshot().

Comments

Markdown supported