Agent skill

State Machine

by WellApp-ai in WellApp-ai/Well

Document UI component states (current vs expected) with transitions

MITAuto-check passed

Install State Machine

skills CLI
$ npx skills add WellApp-ai/Well --skill state-machine -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install WellApp-ai/Well state-machine --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/WellApp-ai/Well.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cursor-rules/skills/state-machine .claude/skills/state-machine && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
state-machine
GitHub stars
345
Token cost
~1k tokens
SKILL.md length
339 words
Files
1
Skills in repo
36
Repo updated
First seen
Licence
MIT

At a glance

Document UI component states (current vs expected) with transitions

  • Works in 5 steps: Identify States → Map Transitions → State Diagram → …
  • SKILL.md covers When to Use, Instructions, Output Format and Invocation, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

State Machine is an agent skill from WellApp-ai/Well. Document UI component states (current vs expected) with transitions

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: No more Sundays on Finance. We build the infrastructure that retrieves, processes, and routes your financial and business data to your FinOps stack, so founders can ship, not… The licence is MIT.

Example prompts

  • “/state-machine”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Identify States
  2. Map Transitions
  3. State Diagram
  4. Data Requirements
  5. Edge Cases

What it can do on your machine

Read from SKILL.md and the folder at commit c740217. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are mermaid and markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

State Machine loads about 1k tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 339 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~20
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from WellApp-ai/Well at commit c740217, republished under its MIT licence (© WellApp-ai). 339 words, ~1,008 tokens.

Download SKILL.mdSave it as .claude/skills/state-machine/SKILL.md (or your agent's skills folder).
name
state-machine
description
Document UI component states (current vs expected) with transitions

State Machine Skill

Document the state machine for UI components, comparing current behavior to expected behavior and mapping all state transitions.

When to Use

  • During Ask mode CONVERGE loop for stateful components
  • When refactoring existing components with complex state
  • Before implementing new interactive UI components

Instructions

Phase 1: Identify States

List all possible states for the component:

StateCurrent BehaviorExpected Behavior
Initial[What happens now][What should happen]
Loading[Current loading UX][Expected loading UX]
Success[Current success display][Expected success display]
Error[Current error handling][Expected error handling]
Empty[Current empty state][Expected empty state]

Common States to Consider:

State TypeExamples
Data statesInitial, Loading, Success, Error, Empty, Stale
Interaction statesIdle, Hover, Focus, Active, Disabled
Visibility statesHidden, Visible, Collapsed, Expanded
Selection statesUnselected, Selected, Partially selected
Validation statesValid, Invalid, Pending validation
Phase 2: Map Transitions

Define what triggers each state change:

FromToTriggerSide Effects
InitialLoadingUser action / MountStart fetch
LoadingSuccessData receivedPopulate UI
LoadingErrorRequest failedShow error message
LoadingEmptyEmpty responseShow empty state
ErrorLoadingRetry clickedRestart fetch
SuccessLoadingRefresh clickedRefetch data
Phase 3: State Diagram

Create a Mermaid state diagram:

mermaid
stateDiagram-v2
    [*] --> Initial
    Initial --> Loading : fetch
    Loading --> Success : data received
    Loading --> Error : request failed
    Loading --> Empty : no data
    Error --> Loading : retry
    Success --> Loading : refresh
    Empty --> Loading : refresh
    Success --> [*] : unmount
Phase 4: Data Requirements

For each state, define what data is needed:

StateRequired DataUI Elements
InitialNonePlaceholder or skeleton
LoadingNoneSpinner, skeleton, progress
Success[List required fields]Full component
ErrorError message, retry actionError banner, retry button
EmptyEmpty message, CTAEmpty illustration, CTA button
Phase 5: Edge Cases

Identify edge cases and how to handle:

Edge CaseCurrentExpected
Network timeout[Current]Show timeout message, retry option
Partial data[Current]Graceful degradation, show available
Stale data[Current]Show stale indicator, background refresh
Concurrent updates[Current]Optimistic update, rollback on conflict
Auth expired[Current]Redirect to login, preserve state

Output Format

markdown
## State Machine: [Component Name]

### State Table

| State | Current | Expected | Data Required |
|-------|---------|----------|---------------|
| Initial | [Behavior] | [Behavior] | [Data] |
| Loading | [Behavior] | [Behavior] | [Data] |
| Success | [Behavior] | [Behavior] | [Data] |
| Error | [Behavior] | [Behavior] | [Data] |
| Empty | [Behavior] | [Behavior] | [Data] |

### Transition Diagram

[Mermaid stateDiagram]

### Edge Cases

| Case | Handling |
|------|----------|
| [Case] | [How to handle] |

### Summary
- States: [N] identified
- Transitions: [N] mapped
- Edge cases: [N] documented

Invocation

Invoke manually with "use state-machine skill" or follow Ask mode CONVERGE loop which references this skill.

  • qa-planning - Uses states to define test coverage
  • design-context - Check existing component states in Storybook

© WellApp-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in cursor-rules/skills/state-machine of WellApp-ai/Well.

Open the folder on GitHubat commit c740217

Compare with similar skills

State Machine next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

State Machine compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
State Machine this skillWellApp-ai/Well345—~1kAutomated safety check: PassMIT
Audit State Machineben-manes/caffeine18k—~1.1kAutomated safety check: PassApache-2.0
State MachineOwl-Listener/designer-skills2.9k1 repos~488Automated safety check: PassMIT
State Machinejame581/GodotPrompter795—~3.5kAutomated safety check: PassMIT
View Transitionsthedaviddias/Front-End-Checklist74k—~528Automated safety check: PassMIT
Vercel React View Transitionssickn33/agentic-awesome-skills47k1 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Audit State Machine

    ben-manes/caffeine

    Audit explicit state machines (drain status, node lifecycle, async-value lifecycle) for illegal or missed transitions

    18k GitHub stars~1.1k tokensUpdated 3 days ago
    Auto-check passed
  • State Machine

    Owl-Listener/designer-skills

    Model component behaviour as explicit states, events, and transitions.

    2.9k GitHub starsUsed in 1 repo~488 tokens
    Frontend & DesignAuto-check passed
  • State Machine

    jame581/GodotPrompter

    A skill your agent uses when implementing state machines in Godot — enum-based, node-based, and resource-based FSM patterns with trade-offs

    795 GitHub stars~3.5k tokensUpdated 2 days ago
    Game DevelopmentAuto-check passed
  • View Transitions

    thedaviddias/Front-End-Checklist

    A skill your agent uses when adding page transition animations, image expand/contract effects, shared-element transitions, or improving navigation UX in a single-page or multi-page application.

    74k GitHub stars~528 tokensUpdated 2 days ago
    Auto-check passed
  • Vercel React View Transitions

    sickn33/agentic-awesome-skills

    Guide React and Next.js view transitions, shared element animations, route transitions, transition types, and reduced-motion-safe UI state animation.

    47k GitHub starsUsed in 1 repo~3.1k tokens
    Auto-check passed
  • Robius State Management

    sickn33/agentic-awesome-skills

    CRITICAL: Use for Robius state management patterns. An agent skill from sickn33/agentic-awesome-skills.

    47k GitHub starsUsed in 2 repos~3.3k tokens
    Frontend & DesignAuto-check passed

More from WellApp-ai/Well

All 36 skills in this repo
  • Tech Divergence

    WellApp-ai/Well

    Evaluate technical options with scoring matrix, trigger Gate 4 for significant decisions

    345 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed
  • Ar Aging

    WellApp-ai/Well

    Produce an accounts-receivable aging report and surface overdue invoices for a Well workspace.

    345 GitHub stars~532 tokensUpdated yesterday
    Auto-check passed
  • Autonomous Loop

    WellApp-ai/Well

    Iterate until success or limit, composing existing skills with Jidoka integration

    345 GitHub stars~1k tokensUpdated yesterday
    Auto-check passed
  • Balance Sheet

    WellApp-ai/Well

    Build a balance sheet (bilan) from a Well workspace. An agent skill from WellApp-ai/Well.

    345 GitHub stars~534 tokensUpdated yesterday
    Auto-check passed
  • Bpmn Workflow

    WellApp-ai/Well

    Generate and maintain BPMN 2.0 diagrams linked to Gherkin scenarios

    345 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed
  • Cash Flow Forecast

    WellApp-ai/Well

    Forecast cash flow and runway for a Well workspace from booked invoices and collected bank transactions.

    345 GitHub stars~567 tokensUpdated yesterday
    Auto-check passed

Questions about State Machine

What does State Machine do?

Document UI component states (current vs expected) with transitions. State Machine is an agent skill from WellApp-ai/Well.

How do I install State Machine in Claude Code?

Run `npx skills add WellApp-ai/Well --skill state-machine -a claude-code`. Or copy the skill folder (cursor-rules/skills/state-machine in WellApp-ai/Well) into .claude/skills/state-machine in your project. Claude Code loads it when a task matches its description.

How do I install State Machine in Codex?

Run `npx skills add WellApp-ai/Well --skill state-machine -a codex`. Or copy the skill folder (cursor-rules/skills/state-machine in WellApp-ai/Well) into .agents/skills/state-machine in your project. Codex loads it when a task matches its description.

Can I use State Machine in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add WellApp-ai/Well --skill state-machine -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/state-machine, .gemini/skills/state-machine, .github/skills/state-machine and .opencode/skills/state-machine in your project.

What does State Machine need to run?

SKILL.md names no scripts, command-line tools or credentials: State Machine is instructions for the agent only.

Does State Machine access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is State Machine safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does State Machine use?

State Machine is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does State Machine use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to State Machine?

Skills that share tags, products or a category with State Machine: Audit State Machine (ben-manes/caffeine, 18k stars), State Machine (Owl-Listener/designer-skills, 2.9k stars), State Machine (jame581/GodotPrompter, 795 stars) and View Transitions (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains State Machine?

WellApp-ai (a GitHub organization) maintains it in WellApp-ai/Well, which has 345 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on October 7, 2026.

Source: WellApp-ai/Well on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.