Loading...
Loading...
Found 7 Skills
Draw how any system moves between states, such as a product flow, a protocol, or a service, as a Mermaid statechart from a TLA+ model. Each bug is a numbered path with blue borders to a state that breaks a rule. Use for /statechart, to show a bug as a path through states, or to turn an agreed chart into a TLA+ skeleton.
Gewu · Crayon Statechart—turn a workflow, a business, or a system into a “crayon statechart short film”: follow Ann Nguyen's *the making of nhang* (a crayon poster that grows downward page by page, with receipt cards and pushpins, arrows carrying events and red [conditions], small dots running along the arrows, text typed out character by character, cards popping out inside pink circles, lines constantly trembling, and surrounding illustrations always moving), with four purely synthesized voices, or add your own. The default is 3:4 and 2–3 minutes, and both the aspect ratio and duration can be specified. Each chapter produces one directly shareable poster. The film contains only data and scene scripts, enabling batch production. Use it for “statechart videos,” “statechart posters,” “hand-drawn process diagrams,” and “explaining a process clearly”; do not use it for photorealistic animation, voice-over explainer videos, or purely static infographics.
Draw what an app's user sees as a Mermaid statechart from a TLA+ model. States are gray if they work, red if still wrong, and green if fixed. Each bug TLC finds is a numbered path. Use for /statechart, "show the PM the bug", or to turn an agreed chart into a TLA+ skeleton.
Statechart and state machine modeling for lifecycle and behavior specification
Design, implement, review, and migrate XState v5 state machines and statecharts in TypeScript using modern v5 patterns. Use this whenever the user mentions XState, actors, state machines, statecharts, guards, transitions, workflows, or Stately, or is modeling non-trivial UI/app/process logic in a codebase that uses XState. Prefer a short machine sketch before code when requirements are fuzzy. If the problem is too simple for a state machine, say so and recommend @xstate/store instead.
Helps create XState v5 state machines in TypeScript and React. Use when building state machines, actors, statecharts, finite state logic, actor systems, or integrating XState with React/Vue/Svelte components.
Use when a feature involves multiple states or transitions. Recognizes the shape, names states and events, designs guards, actions, and hierarchy, and visualizes or simulates the result.