← ClaudeAtlas

designing-consistentlylisted

Keeps UI work consistent with the design system an app actually has — discovering what already governs when no DESIGN.md exists, reading a bounded slice of the decision log however large the app is, and repairing that record as the work proves it. Use when building or modifying UI in any repo, whether its system lives in a DESIGN.md or only in tokens, context-file gotchas and prose docs, when new screens must match existing ones, when an app has too many surfaces to read its whole decision log in one session, when buttons or patterns come out different every session, or when design decisions get lost between sessions.
bygama/skills · ★ 0 · Web & Frontend · score 70
Install: claude install-skill bygama/skills
# Designing consistently UI drift has two sources: styles invented in-session instead of consumed from the system, and decisions that live only in conversation memory. The record of those decisions is a **living file** — honoring it is half the loop; writing back is the other half, and it is the half that gets skipped. Two things make that hard in a real app. The system often is not a file yet: it is tokens in a stylesheet, dated gotchas in the repo's own agent context file, owner decisions left as comments in source. And once the file exists, it outgrows a session — a hundred and fifty surfaces is a normal size, and reading it whole is neither possible nor a virtue. ## Workflow Copy this checklist and tick items off: ``` Consistency progress: - [ ] 1. Discover what governs - [ ] 2. Read the slice - [ ] 3. Build consuming the system - [ ] 4. Record + repair (gate) - [ ] 5. Verify ``` **1. Discover.** Produce a written inventory of what already governs the surfaces about to be touched, ranked by who backs each source — never by how official the file looks. A missing DESIGN.md ends nothing; the system is somewhere else. Where to look: token definitions in stylesheets (custom properties, theme config), the app's own DESIGN.md if it has one, the repo's agent context files (`AGENTS.md` gotchas), prose design docs, dated owner decisions left inline in source comments (an owner name, a date, a ticket id), and the shared components the surfaces already use. | Rank | Source |