state-machine
by jakubkrehel11 days agoRenders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state.
Install
Show step-by-stepHide step-by-step
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.
Where it lives
Comments
"An example of the /state-machine skill in practice. Made a couple of improvements so it scales better when working with a lot of different states."
"I added a new /state-machine skill to the collection. It renders any component you want in all of its states on a throwaway page with mock data. I enjoy..."
"I added a new /state-machine skill to the collection. It renders any component you want in all of its states on a throwaway page with mock data. I enjoy..."
Related skills
code-review
Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes: Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/spec asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to \"review since X\".
implement
Implement a piece of work based on a spec or set of tickets.
to-tickets
Break a plan, spec, or the current conversation into a set of tracer-bullet tickets, each declaring its blocking edges, published to the configured tracker (edges as text in one file per ticket locally, or native blocking links on a real tracker).
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.