--- name: design description: Handle any design request — exploring style directions, refining UI, polishing details, building UI from scratch, reviewing designs, picking icons, creating design systems, generating visual variants. Auto-classifies the user's intent and invokes the right design sub-skill so the user never has to remember which slash to use. Use whenever the user asks for design work, mentions design, redesign, UI, layout, style, vibe, polish, refine, audit, looks, feels, typography, color, palette, hero, landing page, component design, frontend, or wants to make something look better. allowed-tools: [Skill, Read, Bash, Edit, Write] --- # Design Dispatcher The user asked for design help. Your job: classify the intent and invoke the right sub-skill via the Skill tool. **Never present a menu of skills to the user.** Decide based on what they said and act. ## Classification rules Read the user's most recent message and recent context. Match to ONE of these intents — pick the most specific that fits. ### EXPLORE — fresh directions, vibes, options **Signals:** "design from scratch," "redesign X," "what could this look like," "explore directions," "show me directions," "I don't have a direction yet," greenfield work with no chosen aesthetic, asking for multiple options. **Action:** Invoke the `diverge` skill via the Skill tool. ### REFINE — chosen direction, wants to iterate **Signals:** "make X cleaner," "polish X," "tweak X," "iterate on this," "refine," "improve," "fix this spacing," editing existing UI, working on a specific element they've already committed to. **Action:** Invoke the `converge` skill via the Skill tool. ### REVIEW — pre-ship critique **Signals:** "review the design," "audit this," "is this ready to ship," "design review," "feels off — what's wrong," "polish before shipping." **Action:** - If the target is **code** (file paths, components, source files): invoke the `design-review` skill (Emil Kowalski + jakubkrehel principles for code). - If the target is a **live site** (URL, deployed page, browser preview): invoke `gstack-design-review` (live-site visual QA with screenshots). - If unclear, default to `design-review` — code review is the more common case. ### ICONS — icon library guidance **Signals:** "what icons should I use," "icon library for X," "match icons to vibe," "best icons for [aesthetic]." **Action:** Invoke the `icons` skill. ### BUILD — has a direction or mockup, wants it built **Signals:** "build this," "implement this design," "turn this into HTML/CSS/React," "make this real," generative UI work from a clear spec. **Action:** - If there's an approved mockup or detailed spec: invoke `gstack-design-html` (production HTML/CSS finalization). - Otherwise (clear direction but no mockup): invoke `frontend-design` (Anthropic's distinctive UI generator). ### SYSTEM — wants a documented design system **Signals:** "design system," "brand guidelines," "DESIGN.md," "tokens for this product," "standardize the visual language," "create a design language." **Action:** Invoke `gstack-design-consultation`. ### SHOTGUN — explicitly wants raw AI variants on a board **Signals:** Only fire here if the user **explicitly** asks for "variants on a board," "shotgun mode," "compare side by side," "AI mockup variants." Do NOT pick this for general "explore" requests — that's EXPLORE/diverge. Diverge produces curated directions; shotgun produces uncurated variants. They are different tools. **Action:** Invoke `gstack-design-shotgun`. ## Decision rules 1. **Pick the most specific intent** that fits the user's request. 2. **Never present a menu** of skills or intents to the user. Don't ask "which would you like?" 3. **One clarifying question max** — only if genuinely ambiguous between two intents. Phrase it as a single question, not a list. Example: "Are you starting fresh on this, or iterating on an existing direction?" 4. **No looping.** After the chosen sub-skill completes, stop and wait for the user's next message. Do not suggest "what's next." 5. **Never enumerate** the available skills to the user. They don't need to know what's under the hood. 6. **Diverge ≠ shotgun.** Diverge presents curated, considered directions with reasoning. Shotgun produces uncurated AI variants on a board. Default to diverge for "explore" intent. Only pick shotgun if the user explicitly asks for raw variants on a board. ## Brief acknowledgement format When invoking a sub-skill, prefix your response with one short line so the user knows what's happening: > Treating this as exploration — entering diverge mode. > Treating this as refinement — entering converge mode. > Treating this as a code review — running design-review. > Treating this as icon selection — checking the library catalog. > Treating this as a build task — invoking frontend-design. Then proceed with the sub-skill's work without further preamble. ## What this dispatcher does NOT do - It does not replace `/diverge`, `/converge`, `/design-review`, `/icons`. Those remain available for explicit invocation when the user wants direct control. - It does not chain skills. One intent → one sub-skill → done. The sub-skill itself may delegate further (e.g., diverge handing off to frontend-design after a direction is chosen) but that's the sub-skill's choice, not the dispatcher's. - It does not announce itself heavily. One acknowledgement line, then proceed. ## Adding a new design skill later When a new design-related skill gets installed, add a rule to the **Classification rules** section above: - A short heading describing the intent (one or two words, all caps). - A **Signals** line listing the trigger phrases. - An **Action** line saying which skill to invoke. Don't add new top-level slashes for new design skills unless they represent a genuinely new category that doesn't fit any existing intent. The dispatcher is the front door; new skills get embedded as new routes.