jakubkrehel skills (state-machine, better-interface, break, variant)

jakubkrehel/skills

Jakub Krehel’s (jakub.kr, Interfaces magazine) collection of interface-building agent skills — UI, typography, colors, accessibility, layout, product writing. 7.8k★ at capture. Surfaced by his /state-machine demo thread (684❤/20.5k views, captured) quoting the original announcement.

/state-machine (the skill that names the capture)

Verbatim from SKILL.md (6.3KB, read at capture): “Renders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state.” A workbench, not a review — the page stays up while you work, one state on screen, every other a keypress away. Deliberately separated from siblings: stacking hostile scenarios on one page = break, exploring alternative designs = variant, reviewing finished work = interface-review.

The method, which generalizes far past UI:

1. Scope one component — “the settings page” spans several; list and ask.
2. Find the states in the code — “the states are the branches the component already has”: data states (loading/empty/error/typical/scrollable/mixed-pending/stale-refetching), account states (plan/role/owner-vs-member), feature states (flags/trials/limits/disabled), and everything conditional in markup or hooks. Leave out states the code cannot reach, and list missing ones — no fabricated branches to show a state.
3. Render the real component — import from the project; never a rebuilt lookalike, never restyled or re-themed.
4. Feed each state at the data boundary — props or the app’s data seam (seeded query cache/mock provider), never a fixture threaded five levels down; “make the data look like the product… Three rows of ‘Test item’ make every state look fine.”
5. A switcher (__state search param — every state is a link) + confirm every state renders (mock-data-never-appears is the common plumbing failure) before handover.
6. Re-check every state after each change — “a fix for one state often breaks another”; remove the page in one step on the user’s word.

Kin

• State machines — the concept note: this skill is UI-state enumeration as an agent workflow (the “enumerate the states, make everything else impossible” discipline applied to component branches)
• Design inspirations — the same agent-applies-taste workflow family (agent builds, human reviews)
• Agent skills — skills as the packaging format