frontend-design

# Frontend Design (visual & UX quality) <!-- routing-eval reads this line; it lives in the BODY so the always-on skill LISTING stays inside Claude Code's budget (1% of the context window) — an overflowing listing gets descriptions truncated or dropped, which strips the very keywords a match depends on. --> Trigger phrases: "visual design", "design system", "make it look good", "UI polish", "layout", "spacing", "typography" `frontend` decides how the code is structured; `a11y` decides whether everyone can use it; **this skill decides whether it looks considered and feels right.** The through-line: **a few consistent decisions, applied everywhere, read as "designed" — many one-off decisions read as "assembled".** Design is subtraction and rhythm, not adding flourish. > **Kit adaptation (local, .claude/):** Stack-agnostic. **Detect and respect the project's existing design system** > (tokens, component library, brand) — never impose a personal aesthetic or a new library. Accessibility is a floor, > not a trade-off: apply `a11y` alongside (contrast, focus, motion). §4 Prohibitions apply. ## The six levers (order = impact; fix hierarchy before you touch color) 1. **Hierarchy** — the eye must land on the one primary thing first. Establish it with size, weight, and space — not with more color. One primary action per view; everything else is visibly secondary. 2. **Spacing & rhythm** — consistent spacing from a single scale (e.g. 4/8px steps). Group related things with ...