frontend-designlisted

# Frontend Design ## Scope gate — decide before you design Check the request against both columns before doing any design work. This gate is the whole point of this skill: it decides where the design actually gets *made*, not just how it's described. | Signal | Light — design inline | Heavy — hand off to the browser | |---|---|---| | Surface | One component, one page section, a targeted visual fix | A new page, a new flow, a whole product surface | | Anchor | An existing design system / token set to extend | No system to anchor to, or the brief asks to establish one | | Brief clarity | User already named the look, or it follows an established pattern | Ambiguous or exploratory ("make it look better", "redesign the dashboard") | | Iteration need | One good pass is enough; cheap to tweak inline afterward | User will want to compare directions, see it live, iterate visually | Any single "heavy" signal is usually enough to route heavy — visual exploration degrades badly in a terminal loop, and a wrong guess there costs more than the handoff. ## Light path: design inline Work this loop: ground it in the subject, apply the design principles below, cut the AI tells, explore a couple of concrete directions, then self-critique before you call it done. ### Ground it in the subject If the request doesn't pin down what's being designed, pin it yourself: name the concrete surface, its audience, and the one job it does — then state that choice rather than silently assuming it. Read