State Machine skill: what it does and how to install it
Renders a web component's reachable UI states on a temporary page with realistic fixtures and a grouped switcher for visual work.
Summary generated from the skill's documentation.
Install
$ npx skills add jakubkrehel/skills --skill state-machineRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Inspects one component and its data paths to list reachable data, account and feature states. It builds a temporary app route using the real component, product-shaped fixtures at the data boundary, and a grouped __state switcher, then checks every state and hands over the URL and keys.
When to use it. Use it to work through one component's visuals across its implemented states. It is not a finished-work review, an alternative-design exercise, or a way to show branches the code cannot reach.
History
Repo stars
8.6k+1.1k since 1 Oct 2026
Stars are counted for the whole repository, which holds 13 skills.
Show as a table
| Date | Repo stars |
|---|---|
| 26 Oct 2026 | 8,551 |
| 25 Oct 2026 | 8,258 |
| 24 Oct 2026 | 8,219 |
| 23 Oct 2026 | 8,182 |
| 22 Oct 2026 | 8,145 |
| 21 Oct 2026 | 8,102 |
| 20 Oct 2026 | 8,053 |
| 19 Oct 2026 | 8,038 |
| 18 Oct 2026 | 8,012 |
| 17 Oct 2026 | 7,994 |
| 16 Oct 2026 | 7,968 |
| 15 Oct 2026 | 7,935 |
| 14 Oct 2026 | 7,916 |
| 13 Oct 2026 | 7,883 |
| 12 Oct 2026 | 7,835 |
| 11 Oct 2026 | 7,732 |
| 10 Oct 2026 | 7,691 |
| 9 Oct 2026 | 7,620 |
| 8 Oct 2026 | 7,532 |
| 7 Oct 2026 | 7,513 |
| 6 Oct 2026 | 7,497 |
| 5 Oct 2026 | 7,469 |
| 4 Oct 2026 | 7,441 |
| 3 Oct 2026 | 7,428 |
| 2 Oct 2026 | 7,422 |
| 1 Oct 2026 | 7,407 |
Installs
3.8k
Tracking since . A chart appears once there are 7 days of data.
Installs via skills.sh
Similar skills
- BreakStress-tests a UI component by rendering production-reachable scenarios on a temporary page and marking visible breaks in a visual report.
- Design Taste Frontend V2 ExperimentalGuides React and Next.js frontend work with brief-led visual direction, design dials, responsive layouts and accessible interaction states.
- Tailwind CSS DevelopmentBuilds layouts with Tailwind CSS utilities: responsive grids, flex and grid page structures and component styling.