← ClaudeAtlas

designlisted

What a user-facing change must have to be finished — screens and their four states, layout and hierarchy, copy, responsiveness, keyboard and focus, consistency with the design foundation — and how it is proven (the `shows:` lines of a UI step, screenshots from the rules file's screenshots command). Loaded by team-planner when a plan touches a UI path, by team-implementer and team-builder for a UI step, and by team-reviewer for the ux lens; at /kickoff for the design foundation.
jaewhi-park/GARAGISTE · ★ 1 · Web & Frontend · score 77
Install: claude install-skill jaewhi-park/GARAGISTE
# design Nobody on the team is a designer, so the design is a checklist and a foundation, not taste. A screen that passes the checklist looks like the rest of the product and does not embarrass the CEO in front of a user; that is the bar. Taste comes from the CEO's own words in the brief's appendix and from "이거 별로네" after they try it. ## The design foundation (decided at /kickoff, in the stack ADR's "Design foundation" section) - A component library or a small set of primitives (button, input, list, card, dialog, toast) — never one-off styling per screen. - Tokens: colour, spacing, type scale, radius — a single file the whole product reads. Dark mode only if the brief says so. - A layout shell: navigation, page frame, empty page — every screen lives inside it. - The screenshots command (a headless browser script that renders each screen in each state to docs/screens/<plan-slug>/<screen>-<state>.png; docs/screens/ is git-ignored) registered under "## Commands" as `screenshots:`. ## The checklist — every screen a step adds or changes 1. **Four states**, each designed, not defaulted: empty (first use — what the user does next), loading (no layout jump), error (what went wrong, what to do; never a stack trace), success (the content). A list also needs its one-item and many-items case. 2. **Hierarchy**: one primary action per screen, visible without scrolling on a phone; secondary actions look secondary; destructive actions confirm. 3. **Copy**: labels say what happens ("저장" no