From 57309b80f80e486cd2a8b6d4c661a60fb3b180ee Mon Sep 17 00:00:00 2001 From: bastien Date: Thu, 16 Apr 2026 01:50:56 +0200 Subject: [PATCH] feat(agents): add design gate for automatic ui-ux-pro-max detection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lightweight skills (feat, hotfix, bugfix) had zero plugin awareness — design tasks ran without ui-ux-pro-max even when relevant. Add a design gate (lib/design-gate.md) that auto-detects UI/style signals in task description and filesystem, then asks the user to activate ui-ux-pro-max if inactive. Orchestrators already handle this via their STEP 0 plugin-check. Co-Authored-By: Claude --- CLAUDE.md | 7 ++++++ agents/bugfixer.md | 9 +++++++- agents/feater.md | 9 +++++++- agents/hotfixer.md | 9 +++++++- agents/plugin-advisor.md | 4 +++- lib/design-gate.md | 50 ++++++++++++++++++++++++++++++++++++++++ tasks/TODO.md | 8 +++++++ 7 files changed, 92 insertions(+), 4 deletions(-) create mode 100644 lib/design-gate.md diff --git a/CLAUDE.md b/CLAUDE.md index 8655d1e..75c0705 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -159,3 +159,10 @@ Key routing rules: - Security audit → invoke cso - Initialize new project from scratch → invoke init-project - Onboard existing project → invoke onboard + +Design gate (automatic): +All lightweight skills (feat, hotfix, bugfix) include a design gate that auto-detects +UI/style signals in the task. If design signals found and ui-ux-pro-max is inactive, +the agent asks the user whether to activate it before proceeding. +Gate spec: lib/design-gate.md. Orchestrators (ship-feature, init-project) already +handle this via their STEP 0 plugin-check. \ No newline at end of file diff --git a/agents/bugfixer.md b/agents/bugfixer.md index 628592e..7a227e3 100644 --- a/agents/bugfixer.md +++ b/agents/bugfixer.md @@ -34,6 +34,13 @@ Identify: git log --oneline -20 --all -- ``` +## STEP 1.5 — DESIGN GATE + +Follow `$HOME/.claude/lib/design-gate.md`: +- Scan $ARGUMENTS and target files for design/UI/style signals (CSS, component, layout, animation). +- If signals found and `ui-ux-pro-max` inactive → ask user to activate. +- If no signals → skip (zero overhead). + ## STEP 2 — INVESTIGATE Trace the bug from symptom to root cause: @@ -126,7 +133,7 @@ Execute in automatic mode: ## RULES - No fix without understanding the root cause first. -- No plugin check (lightweight skill, not an orchestrator). +- Design gate only if UI/style signals detected. See STEP 1.5. - If investigation reveals a design flaw requiring significant refactoring → stop, explain, suggest `/ship-feature` for the proper fix. diff --git a/agents/feater.md b/agents/feater.md index cd346f0..d347fca 100644 --- a/agents/feater.md +++ b/agents/feater.md @@ -39,6 +39,13 @@ Print a one-line scope confirmation: FEAT: — ~ files, ``` +## STEP 0.5 — DESIGN GATE + +Follow `$HOME/.claude/lib/design-gate.md`: +- Scan $ARGUMENTS and target files for design/UI/style signals. +- If signals found and `ui-ux-pro-max` inactive → ask user to activate. +- If no signals → skip (zero overhead). + ## STEP 1 — MINI-PLAN Quick mental model, not a formal plan document: @@ -116,7 +123,7 @@ Execute in automatic mode: ## RULES - Max 5 files. If more needed → `/ship-feature`. -- No plugin check (not an orchestrator). +- Design gate only (not full plugin check). See STEP 0.5. - No brainstorm/design phase (if needed → `/ship-feature`). - No subagents — direct implementation. - Keep scope tight. If scope creep happens mid-work, stop diff --git a/agents/hotfixer.md b/agents/hotfixer.md index 8a579de..b84f694 100644 --- a/agents/hotfixer.md +++ b/agents/hotfixer.md @@ -31,6 +31,13 @@ git log --oneline -3 "This looks deeper than a hotfix. Load `$HOME/.claude/agents/bugfixer.md` and run the BUGFIXER agent on this target." +## STEP 1.5 — DESIGN GATE + +Follow `$HOME/.claude/lib/design-gate.md`: +- Scan $ARGUMENTS and target files for design/UI/style signals (CSS, component, styling, animation). +- If signals found and `ui-ux-pro-max` inactive → ask user to activate. +- If no signals → skip (zero overhead). + ## STEP 2 — FIX Apply the minimal change that fixes the bug: @@ -72,7 +79,7 @@ Execute in automatic mode: ## RULES - Max 2 files changed. If more needed → `/bugfix`. - No refactoring. No "while we're here" improvements. -- No plugin check (overhead > value for a hotfix). +- Design gate only if CSS/style signals detected. See STEP 1.5. - If root cause is unclear → escalate to `/bugfix`. - If fix touches >5 lines of logic → reconsider if this is truly a hotfix. diff --git a/agents/plugin-advisor.md b/agents/plugin-advisor.md index 845d12f..98041e9 100644 --- a/agents/plugin-advisor.md +++ b/agents/plugin-advisor.md @@ -165,12 +165,14 @@ When the plugin-advisor detects a `simple` or `hotfix` signal, suggest the appro |---|---|---|---| | Typo, CSS fix, wrong value, missing import | `/hotfix` | Root cause obvious, 1-2 files max | ~30s | | Bug with unclear root cause, multi-file | `/bugfix` | Needs investigation before fixing, up to ~5 files | ~3 min | -| Small feature, 1-5 files | `/feat` | Well-scoped addition, no design needed | ~2 min | +| Small feature, 1-5 files | `/feat` | Well-scoped addition, design gate included | ~2 min | | Large feature, design decisions needed | `/ship-feature` | Multi-file, needs brainstorm + plan + review | ~10 min | | New project from scratch | `/init-project` | Full project setup with scaffolding | ~15 min | **Escalation path:** `/hotfix` → `/bugfix` → `/ship-feature` (bugs), `/feat` → `/ship-feature` (features). Each skill documents when to escalate to the next level. +**Design gate:** `/feat`, `/hotfix`, and `/bugfix` include a lightweight design gate (`lib/design-gate.md`) that auto-detects UI/style signals and asks the user to activate `ui-ux-pro-max` if inactive. This covers the gap where lightweight skills previously had no plugin awareness for design tasks. + --- ## COMPATIBILITY MATRIX diff --git a/lib/design-gate.md b/lib/design-gate.md new file mode 100644 index 0000000..d3c0762 --- /dev/null +++ b/lib/design-gate.md @@ -0,0 +1,50 @@ +# DESIGN GATE — Auto-detect design tasks, activate ui-ux-pro-max + +Inline snippet. Include in any agent STEP 0 that may touch UI/design. + +## WHEN TO RUN + +Run this gate when the task description OR target files match design signals. + +## DETECTION + +Check BOTH the task description AND the filesystem: + +**Task description signals** (case-insensitive match on $ARGUMENTS): +- UI keywords: `component`, `button`, `card`, `modal`, `dialog`, `tooltip`, `dropdown`, `sidebar`, `navbar`, `header`, `footer`, `layout`, `grid`, `form`, `input`, `table` +- Style keywords: `css`, `style`, `theme`, `color`, `font`, `spacing`, `margin`, `padding`, `border`, `shadow`, `animation`, `transition`, `hover`, `responsive`, `dark mode`, `light mode` +- Design keywords: `design`, `ui`, `ux`, `visual`, `polish`, `pixel`, `figma`, `mockup`, `wireframe`, `prototype` +- Framework UI: `tailwind`, `styled-component`, `emotion`, `chakra`, `radix`, `shadcn`, `headless` + +**Filesystem signals** (quick check, no deep scan): +- Target files have `.tsx`, `.jsx`, `.css`, `.scss`, `.less`, or `.module.css` extension +- `tailwind.config` or `postcss.config` present in project root +- `tokens/`, `theme/`, or `design-system/` directory exists +- Storybook config (`.storybook/`) present + +## DECISION + +If **at least one signal** is detected: + +1. Check if `ui-ux-pro-max` is active: + ```bash + source "$HOME/.claude/lib/detect-plugins.sh" + detect_uiux_pro_max && echo "ACTIVE" || echo "INACTIVE" + ``` + +2. If **ACTIVE** → proceed silently. The plugin context is already available. + +3. If **INACTIVE** → ask the user: + ``` + 🎨 DESIGN DETECTED — task touches UI/styling. + ui-ux-pro-max is not active. Activate it for design-aware guidance? + (yes / no) + ``` + - On **yes** → print `⚡ Activating ui-ux-pro-max...` and proceed with design context. + - On **no** → print `Proceeding without design plugin.` and continue normally. + +## IMPORTANT + +- This gate adds ~5 seconds overhead. Worth it for design quality. +- Do NOT run this gate on pure backend/API/CLI tasks (no signals = no gate). +- If no signal detected → skip entirely, zero overhead. diff --git a/tasks/TODO.md b/tasks/TODO.md index f0af0d7..35e65c2 100644 --- a/tasks/TODO.md +++ b/tasks/TODO.md @@ -22,3 +22,11 @@ ## Skill /doc - [x] Mettre à jour doc-syncer.md pour gérer ajouts/suppressions de features - [x] Mettre à jour SKILL.md description pour mentionner feature delta + +## Auto-activation ui-ux-pro-max sur détection design +- [x] Créer `lib/design-gate.md` — snippet réutilisable (detect design signals + ask to activate ui-ux-pro-max) +- [x] Intégrer dans feater.md — STEP 0.5 entre scope check et mini-plan +- [x] Intégrer dans hotfixer.md — STEP 1.5 (si CSS/style/animation) +- [x] Intégrer dans bugfixer.md — STEP 1.5 (si bug UI/style) +- [x] Mettre à jour plugin-advisor.md — PHASE 4 : cohérence avec le design gate +- [x] Mettre à jour CLAUDE.md skill routing — documenter le comportement auto