State machine

This skill does one thing: it puts every state a component can really be in on one throwaway page, so a designer can work on each state with the real component, real styles and believable data. It does not stress-test long text or tiny containers (that's edge-case), invent new designs (that's design-variant) or score the craft (that's ui-review).

The page is a workbench, not a deliverable. It lives in one folder, never ships, and is deleted in one step when the user is done.

Stance

The states come from the code, not from imagination. A designer opens this page to answer "what does the user see when the connection drops?", and the answer must be what production would really render.

Two failure modes, and the first is worse:

1. Faking a state. Editing the component, adding a branch, or mocking so deep that the page shows something production never could.
2. Missing a state. A branch exists in the code (auth expired, partial data) and the switcher does not offer it, so nobody designs it.

Hard rules