feat(design): mandate full design toolchain on UI work via CLAUDE.md rule + hook

Add a tiered-by-scope "Design work — full toolchain" rule to the global
CLAUDE.md: trivial tweaks stay on /hotfix, building UI mobilizes ui-ux-pro-max,
frontend-design, Magic MCP, emil-design-eng, design-motion-principles, and
design-html; design systems start with design-consultation; reviews use
design-review + emil + motion audit. In doubt about scope, do not silently
skip the toolchain — ask or default to the Build tier.

Reinforce it with a design-toolchain-reminder UserPromptSubmit hook that
detects UI/design signals (broad FR+EN keyword set, \b-guarded against
substring false matches) and injects the tiered guidance into context. Soft
nudge, always exits 0, falls back to raw stdin when the hook JSON is missing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -187,8 +187,9 @@ Key routing rules:
 - Update docs after shipping → invoke document-release, or doc if no gstack
 - Stale docs audit, doc sync → invoke doc
 - Weekly retro → invoke retro
-- Design system, brand → invoke design-consultation and use ui-ux-pro-max if available
+- Design system, brand → invoke design-consultation, then full design toolchain (see "Design work" below)
-- Visual audit, design polish → invoke design-review which call ui-ux-pro-max
+- Build UI / component / page / screen → full design toolchain (see "Design work" below)
+- Visual audit, design polish → invoke design-review + emil-design-eng lens + design-motion-principles (audit mode)
 - Architecture review → invoke plan-eng-review
 - Save progress, checkpoint, resume → invoke context-save
 - Code quality, health check → invoke health
@@ -210,6 +211,23 @@ agent asks user whether to activate before proceeding.
 Gate spec: lib/design-gate.md. Orchestrators (ship-feature, init-project) already
 handle via STEP 0 plugin-check.
 
+Design work — full toolchain (tiered by scope):
+When a task touches design/UI, mobilize the available tools by scope. Reinforced by
+the design-toolchain-reminder UserPromptSubmit hook (injects this on UI signals).
+- Trivial (≤2 files, single cosmetic value, CSS tweak) → /hotfix, NO toolchain.
+- Build UI (new component, page, screen, redesign) → invoke ui-ux-pro-max (plan/build)
+  + frontend-design (anti AI-slop) + Magic MCP `/ui` (21st.dev component scaffold)
+  + emil-design-eng (polish pass, invisible details) + design-motion-principles
+  (when motion/transitions) + design-html (when static HTML / Pretext-native).
+- Design system / brand → design-consultation FIRST (aesthetic, type, color, spacing,
+  motion), THEN the build tools above.
+- Review / audit → design-review (visual QA + fix) + emil-design-eng lens
+  + design-motion-principles (audit mode, catch slop motion).
+In doubt about scope (is this a trivial tweak or a real UI change?) → do NOT silently
+skip the toolchain. Ask the user, or default to the Build tier rather than /hotfix.
+Magic MCP (@21st-dev/magic) is configured globally and costs API calls — use it for
+component generation, not micro-tweaks.
+
 ## graphify
 
 This project has a knowledge graph at graphify-out/ with god nodes, community structure, and cross-file relationships.

hooks/design-toolchain-reminder.sh

@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+# design-toolchain-reminder.sh
+#
+# UserPromptSubmit hook. When the prompt carries a UI/design signal, inject a
+# reminder to mobilize the full design toolchain (tiered by scope, per CLAUDE.md
+# "Design work — full toolchain"). A UserPromptSubmit hook's stdout is appended
+# to the model's context, so the cat block below becomes additional guidance.
+#
+# This is a soft nudge: the tiered rule itself says trivial work uses NO
+# toolchain, so a false positive (e.g. "API design") costs only a reminder the
+# model can disregard. Always exits 0 so it never blocks prompt submission.
+
+set -euo pipefail
+
+input="$(cat)"
+
+# Extract the user's prompt from the hook JSON; fall back to the raw stdin if
+# python or the expected field is unavailable.
+prompt="$(printf '%s' "$input" \
+  | python3 -c 'import sys, json; print(json.load(sys.stdin).get("prompt", ""))' \
+  2>/dev/null || true)"
+[ -z "$prompt" ] && prompt="$input"
+
+lc="$(printf '%s' "$prompt" | tr '[:upper:]' '[:lower:]')"
+
+# UI/design build and review signals (FR + EN). Word boundaries (\b) avoid
+# substring false matches like perform/platform/information. Some broad tokens
+# (page, color, screen, card, menu) are kept deliberately for coverage — they
+# over-fire on non-UI prompts, which is harmless: the reminder self-cancels.
+pattern='design|redesign|refonte|refont|ui/ux|ux/ui|\bui\b|\bux\b|ui kit|design system|design-system|interface|frontend|front-end|front end|composant|component|\bnavbar\b|\bsidebar\b|\bmodal\b|\bbouton\b|\bbutton\b|\bcard\b|\bcarte\b|\bform\b|formulaire|\bhero\b|\bheader\b|\bfooter\b|\bmenu\b|dropdown|tooltip|\bbadge\b|\bchart\b|graphique|accordion|carousel|\bslider\b|landing|dashboard|homepage|home page|\baccueil\b|\bpage\b|\bpages\b|\bécran\b|\becran\b|\bscreen\b|portfolio|maquette|mockup|wireframe|prototype|\blook\b|\bjoli\b|\bjolie\b|\bbeau\b|\bbelle\b|esth[eé]tique|aesthetic|\bvisuel\b|\bvisual\b|embellir|fignol|peaufin|polish|styliser|\bstyle\b|styling|stylesheet|\bskin\b|charte graphique|\bbrand\b|branding|\blogo\b|favicon|ic[oô]ne|\bicon\b|\bcss\b|tailwind|shadcn|couleur|\bcolor\b|palette|gradient|d[eé]grad[eé]|\bshadow\b|\bombre\b|spacing|espacement|\bmarge\b|\bpadding\b|\bmargin\b|\bradius\b|arrondi|\bhover\b|dark mode|light mode|\btheme\b|th[eè]me|typograph|\bfont\b|\bfonts\b|font pairing|\bpolice\b|animation|\bmotion\b|transition|micro-interaction|keyframe|glassmorph|neumorph|claymorph|skeuomorph|brutalis|bento|minimalis|responsive|figma'
+
+if printf '%s' "$lc" | grep -Eq "$pattern"; then
+  cat <<'EOF'
+[design-toolchain] UI/design signal detected. Apply CLAUDE.md "Design work — full toolchain (tiered by scope)":
+- Trivial (≤2 files, single cosmetic value, CSS tweak) → /hotfix, NO toolchain.
+- Build UI (component/page/screen/redesign) → ui-ux-pro-max (plan/build) + frontend-design (anti-slop) + Magic MCP /ui (21st.dev scaffold) + emil-design-eng (polish) + design-motion-principles (if motion) + design-html (if static/Pretext).
+- Design system/brand → design-consultation FIRST, then the build tools above.
+- Review/audit → design-review + emil-design-eng lens + design-motion-principles (audit mode).
+If genuinely trivial/non-UI, ignore this and proceed. IN DOUBT about scope (trivial vs real UI change) → do NOT silently skip: ask the user, or default to the build tier rather than /hotfix.
+EOF
+fi
+
+exit 0

settings.json

@@ -230,6 +230,16 @@
             "statusMessage": "Tracking caveman mode..."
           }
         ]
+      },
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "bash ~/.claude/hooks/design-toolchain-reminder.sh",
+            "timeout": 5,
+            "statusMessage": "Checking design signals..."
+          }
+        ]
       }
     ]
   },