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>
This commit is contained in:
Bastien Chanot
2026-06-02 15:48:10 +02:00
co-authored by Claude Opus 4.8
parent 6e30af0a01
commit 0d9f3d41eb
3 changed files with 73 additions and 2 deletions
+20 -2
View File
@@ -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
- Visual audit, design polish → invoke design-review which call ui-ux-pro-max
- Design system, brand → invoke design-consultation, then full design toolchain (see "Design work" below)
- 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.