do-design-systemlisted

# Design System Skill Translate a visual moodboard (Cosmos, Pinterest, Are.na, a plain image folder) into concrete, additive edits to a design system — `.pen` source, charter, downstream CSS tokens — and enforce the canonical organization of design files (`docs/designs/`: `design-system.pen`, `charter.md`, `gap-audit.md`, `inspiration/`, `product/`) in the repo. Success: 3–7 charter-grounded additive edits landed in one commit, with downstream CSS in sync and the pass logged in `gap-audit.md`. Do **not** run a pass when the moodboard is abstract (vibes only, no reusable motifs) or when the existing system already matches — additive changes without a concrete signal waste effort. ## Repo Context Probe If `.claude/skill-context/do-design-system.md` exists, read it and honor its declarations; otherwise use the generic defaults described below. The moodboard scrape, `.pen` JSON editing, motif tables, and gap-audit log are all generic — they need only a browser surface and a JSON-editable `.pen`. The context file declares the repo-specific machinery for Steps 5–7: the **deterministic generator** that emits downstream artifacts (`brand.css`, `source.css`, `design-system.md`) from the `.pen` source, any **PreToolUse hooks** that guard those generated artifacts, and the reference implementation. When the file is absent (the common case in a foreign repo), there is no generator — sync `brand.css` from the `.pen` variables by hand (Step 6) and skip the hook-specific guidance. ##