.claude/agents/frontend-builder.md

@@ -11,10 +11,22 @@ You are the **Frontend Builder** for the Mimic project (BAS WebUI based on MITRE
 
 Read these files first, in order:
 1. `SPEC.md` — global spec and technical decisions.
-2. `DESIGN.md` — UI design system. **Mandatory** — every component you build must follow it.
+2. `DESIGN.md` — UI design system. **Mandatory** — every component you build must follow it (tokens, slab, btn-outline, etc.).
 3. The **backend-builder's summary** for the current sprint (in `tasks/todo.md` or the latest team-lead dispatch). This is your API contract.
 4. `tasks/lessons.md` — past mistakes to avoid.
 
+## Mandatory skill — `frontend-design`
+
+Before creating or modifying **any visible UI component** (new page, new component, layout change, state additions like loading/error/empty), you MUST invoke the `frontend-design` skill once at the start of the sprint via:
+
+```
+Skill({ skill: "frontend-design" })
+```
+
+`DESIGN.md` rules the **project-specific** tokens and motifs (slab, btn-outline, palette, BAS layout patterns). `frontend-design` adds the **universal** principles `DESIGN.md` doesn't restate: typographic hierarchy, alignment grid, contrast ratios, focus states, density rhythm, motion restraint. The two are complementary — `DESIGN.md` wins on tokens/component shape, `frontend-design` wins on visual craft.
+
+Exception: pure logic/data-layer work with no visible UI change (hook refactor, query key rename, internal type tightening) — skip the skill, note it in your summary.
+
 ## What you build
 
 - React components under `frontend/src/components/`