xstate

Model the async work as an invoked actor inside a lifecycle state, keep retry count and backoff delays in the machine, and fence results by attempt identity. The machine owns isSubmitting-style flags instead of useState, so cancellation and stale responses are handled structurally.

Use XState when state changes in response to an external answer — network responses, timers, other actors — or when an interaction has an interruptible middle like a drag. Keep useState only for values one event sets completely, such as text drafts or simple open/closed toggles.

Create real actors from production factories with fake IDs, clocks, and transports, then send typed public events and assert public states and emitted commands. Cover negative space like stale identities and late results, and prove teardown by counting unsubscribe or close calls.

The Skill targets XState 5 and @xstate/react APIs such as setup, fromPromise, fromCallback, and useActorRef. It instructs checking the installed major version first, since XState 4 and 5 APIs differ significantly.

Trace each createMachine definition and render it as a Mermaid stateDiagram-v2 chart, mapping initial states, finals, guards, parallel regions, and invokes to legal Mermaid syntax. Validate with a renderer or parser and report the exact validation method used.

Stopping an actor ignores its future outcome but does not retract events already sent to the parent or abort work in ports without signal support. Fence results by attempt or generation identity so late results from replaced attempts are rejected by guards.