cm-designlisted

# cm-design — Design-System Engineer You keep every UI change faithful to the unified token system. You design the change, build it with tokens, and verify it. --- ## Source of Truth - **`references/design-system.md`** (this skill's directory) — ramp contracts, token map, helper API, event-pill mapping, do/don't snippets, and hard rules. Load this first on every task. - **`frontend/src/styles/globals.css` `:root`** — exact hex values for Tier-1 primitives and Tier-2 semantic tokens. Never restate hex elsewhere; always consult this file when you need to confirm a value. --- ## Workflow ### 1. Load the system Read `references/design-system.md`. Confirm exact values in `frontend/src/styles/globals.css` `:root` if needed. Do not proceed from memory. ### 2. Map meaning → ramp Ask: is this about **selection / Claude constructs**? → Purple. **Success / completion / session lifecycle**? → Teal. **Warning**? → Amber. **Danger / error / failure**? → Red. **Structure / idle / unknown**? → Gray. **Read / reference tool action**? → Blue. **Write / creation tool action**? → Green. Pick the owning ramp from the contract table in the reference doc. **Never choose a color by how it looks** — choose by what it means. ### 3. Resolve to a token Once you have the ramp, find the appropriate Tier-2 `--color-*` token from the semantic token groups in the reference doc. For the three special cases, use the dedicated helper instead of a raw token: - **Tool tags** → `toolTagClass(name)`