/skill-ui-ux-design

name: octopus-ui-ux-design
disable-model-invocation: true
aliases:
  - design-ui-ux
  - ui-ux-design
  - design
  - ui-design
  - ux-design
description: "Design UI/UX systems with style guides, palettes, typography, and component specs for new interfaces"
context: fork
agent: Explore
task_management: true
execution_mode: enforced
pre_execution_contract:
  - interactive_questions_answered
  - visual_indicators_displayed
  - design_intelligence_checked
validation_gates:
  - search_py_executed
  - design_spec_produced
trigger: |
  Use this skill when the user wants to "design a UI", "create a design system",
  "pick a color palette", "choose fonts for", "design a dashboard", "create component specs",
  "style guide for", or "UI/UX for my app".

  Execution: BM25 search via search.py + Claude synthesis with ui-ux-designer persona
paths:
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/components/**"

EXECUTION CONTRACT (MANDATORY - CANNOT SKIP)

<HARD-GATE> **CRITICAL: You MUST call the BM25 search engine (search.py) via Bash tool before producing any design recommendations. Do NOT rely solely on your own design knowledge. The search engine provides curated, data-driven design intelligence. If you produce a design system without at least 3 search.py calls, you have violated this contract.** </HARD-GATE>

This skill uses **ENFORCED execution mode**. You MUST follow this exact sequence.

STEP 1: Interactive Questions (BLOCKING)

**You MUST call AskUserQuestion before any other action.**

AskUserQuestion({
  questions: [
    {
      question: "What type of product are you designing for?",
      header: "Product Type",
      multiSelect: false,
      options: [
        {label: "SaaS/Dashboard", description: "Analytics, admin panels, B2B tools"},
        {label: "E-commerce", description: "Shopping, marketplace, product pages"},
        {label: "Landing page", description: "Marketing, conversion, product launch"},
        {label: "Mobile app", description: "iOS/Android native or responsive"}
      ]
    },
    {
      question: "What tech stack are you using?",
      header: "Stack",
      multiSelect: false,
      options: [
        {label: "React + Tailwind (Recommended)", description: "React/Next.js with Tailwind CSS"},
        {label: "React + shadcn/ui", description: "React with shadcn component library"},
        {label: "HTML + Tailwind", description: "Static or server-rendered HTML"},
        {label: "Vue/Nuxt", description: "Vue.js or Nuxt framework"}
      ]
    },
    {
      question: "What design deliverables do you need?",
      header: "Deliverables",
      multiSelect: true,
      options: [
        {label: "Design tokens", description: "Colors, spacing, typography as CSS/Tailwind config"},
        {label: "Component specs", description: "Component anatomy, states, props"},
        {label: "Page layouts", description: "Wireframe-level layout specifications"},
        {label: "Style guide", description: "Visual style direction with rationale"}
      ]
    },
    {
      question: "How adventurous should the design be?",
      header: "Dials",
      multiSelect: false,
      options: [
        {label: "Conservative (v3 m2 d4)", description: "Familiar patterns, minimal motion — enterprise, gov, finance"},
        {label: "Balanced (v5 m4 d5)", description: "Contemporary but safe — most SaaS and product work"},
        {label: "Expressive (v7 m6 d5)", description: "Distinctive direction, noticeable motion — marketing, launch pages"},
        {label: "Maximal (v9 m8 d6)", description: "Take real aesthetic risks — portfolios, creative brands"}
      ]
    }
  ]
})

The dial answer maps to `--variance/--motion/--density` values (v/m/d above) passed to every `search.py` call and stated in the design direction. When the user's brief already names a visual style (for example, "brutalist", "playful", or "corporate"), skip the Dials question and infer all three values from that style. Record the inferred values. If an explicit user answer is also available, the explicit user answer takes precedence over the inferred values. Otherwise, ask the Dials question normally.

All three dial values MUST be integers from 1 through 10. Use these presets when inferring from named styles; choose the closest row for synonyms and record the selected row with the values:

| Style cues | Variance | Motion | Density | |---|---:|---:|---:| | Corporate / enterprise / conservative | 3 | 2 | 4 | | Clean / modern / balanced | 5 | 4 | 5 | | Playful / expressive / retro | 7 | 6 | 5 | | Brutalist / maximal / experimental | 9 | 8 | 6 |

Validate the range before every `search.py` call. If an explicit or inferred value is missing, non-numeric, or outside 1-10, stop and obtain a valid value rather than clamp it.

STEP 2: Display Banner

**MANDATORY: You MUST use the Bash tool to run this provider check BEFORE displaying the banner. Do NOT skip it. Do NOT assume availability.**

bash "${HOME}/.claude-octopus/plugin/scripts/helpers/check-providers.sh"

**Use the ACTUAL results below. PROHIBITED: Showing only "🔵 Claude: Available ✓" without listing all providers.**

🐙 **CLAUDE OCTOPUS ACTIVATED** - UI/UX Design Mode
🎨 Design: [Brief description from user prompt]

Pipeline:
🔍 Phase 1: Design Research (BM25 search + context detection)
🎯 Phase 2: Design Direction (synthesis + style selection)
🐙 Phase 2b: Design Critique (adversarial review before committing)
🛠️ Phase 3: Design System (tokens, components, layouts)
✅ Phase 4: Validation (accessibility, handoff specs)

Providers:
🔴 Codex CLI: [Available ✓ / Not installed ✗] — Implementation critique
🟡 Antigravity CLI: [Available ✓ / Not installed ✗] — Ecosystem critique
🧭 Antigravity CLI: [Available ✓ / Not installed ✗] — Additional external-model challenge
🔵 Claude (Sonnet): Available ✓ — Design + independent critique

Tools:
🔍 BM25 Design Intelligence: [checking...]
🎨 Figma MCP: [Available /