Skip to content
Get packs

State Machine Workbench

Renders a component in every state on a throwaway page with mock data and a state switcher

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
3 files

What it does

When you ask the agent to work on a UI component, this skill makes it build a temporary page inside your app that shows that component in each state it can be in, such as loading, empty, error, or a locked feature. Mock data feeds each state without changing the component itself, and a small switcher lets you flip between states with a click or a URL parameter. When you are finished, the temporary page and its files can be deleted in one step.

Great for

  • Front-end developers who need to see loading, empty, and error states of a component without triggering them in production
  • Designers and developers reviewing how one component looks across account tiers, roles, or feature flags
  • Teams that want a repeatable, removable scratch page for visual work on a single component

Skip it if

  • Reviewing finished work or auditing a whole page, since the skill is explicitly a workbench for one component at a time (the skill points to other skills for that)
  • Projects without a component framework or where the agent cannot load a browser to verify, because the skill expects to check every state renders
  • Components whose states depend on editing the component itself to accept fixtures, since the skill asks for approval before adding any data seam

Try asking

  • “Show every state of the audit log table, including empty, error, and a long scrolling list”
  • “Render the billing card for free, trial, and limit-reached plans on a throwaway page”
  • “Build a state switcher for the network panel so I can flip through its loading and error states”
  • “Remove the state workbench page I made for the settings card”
Step-by-step guide: how to use State Machine WorkbenchInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    state-machine.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip state-machine.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip state-machine.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the single component you want covered; the skill asks you to choose one if you name a page with several components.
  • Tell the agent up front if you are fine with a small seam (such as a mock provider) being added, since it will otherwise ask first.
  • After the page is built, ask it to remove the workbench in one step when done, using the route and fixture names it reports.

What's inside

  • agents/openai.yaml
  • SKILL.md
  • switcher.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.