distil

What this skill does

# Distil - Design Variation Generator

When this skill is invoked, IMMEDIATELY output the banner below before doing anything else.
Pick ONE tagline at random — vary your choice each time.
CRITICAL: Reproduce the banner EXACTLY character-for-character. The first line of the art has 4 leading spaces — you MUST preserve them.

```
{tagline}

⠀   ██╗██████╗ ██╗███████╗████████╗██╗██╗
   ██╔╝██╔══██╗██║██╔════╝╚══██╔══╝██║██║
  ██╔╝ ██║  ██║██║███████╗   ██║   ██║██║
 ██╔╝  ██║  ██║██║╚════██║   ██║   ██║██║
██╔╝   ██████╔╝██║███████║   ██║   ██║███████╗
╚═╝    ╚═════╝ ╚═╝╚══════╝   ╚═╝   ╚═╝╚══════╝
```

Taglines:
- 🔥 Heating up the column...
- 🧪 Fractioning the design space!
- 💎 Condensing pure creativity!
- 🔬 Separating signal from noise!
- ⚗️ Extracting the essence!
- 🔄 Refining through iteration!
- ✨ Distilling N variations of brilliance!
- 🎨 From crude concept to pure design!

---

## Output Formatting

After the banner, display parsed input:
```
┌─ Input ────────────────────────────────────────
│  {Field}:  {value}
│  Flags:    {parsed flags or "none"}
└────────────────────────────────────────────────
```

Pre-flight results:
```
── Pre-flight ───────────────────────────────────
  ✅ {dep}           {version or "found"}
  ⚠️ {dep}           not found → {fallback detail}
  ❌ {dep}           missing → stopping
──────────────────────────────────────────────────
```

Stage/phase headers: `━━ {N} · {Name} ━━━━━━━━━━━━━━━━━━━━━━━━━`

Status icons: ✅ done · ❌ failed · ⚠️ degraded · ⏳ working · ⏭️ skipped

---

Generate multiple unique, creative web interface designs for any website or
web application. The primary agent acts as a thin orchestrator — all heavy
reading and file creation is delegated to subagents to protect the primary
context window.

## Arguments

Parse the following from the skill invocation:
- **count** (required): Number of designs to create (e.g., 5)
- **--spec** (optional): Path to a file containing site specification
- **--url** (optional): URL to existing site to review for context
- **--port** (required): Port for the Vite dev server
- **--favorites** (optional): Comma-separated list of design numbers for iteration mode

### Examples
```
/distil 5 --spec ./site-spec.md --port 5173
/distil 3 --favorites 2,4 --port 5173
```

If `--favorites` is provided, follow `references/iteration-mode.md` instead
of the steps below.

---

## Pre-flight

Before starting, check all dependencies in this table:

| Dependency | Type | Check | Required | Resolution | Detail |
|-----------|------|-------|----------|------------|--------|
| npm | cli | `npm --version` | yes | stop | https://bun.sh or use npm |
| bencium-innovative-ux-designer | skill | `~/.claude/skills/bencium-innovative-ux-designer/SKILL.md` | no | ask | `npx skills add bencium/bencium-claude-code-design-skill@bencium-innovative-ux-designer -g -y` |
| web-animation-design | skill | `~/.claude/skills/web-animation-design/SKILL.md` | no | ask | `npx skills add connorads/dotfiles@web-animation-design -g -y` |
| design-system | skill | `~/.claude/skills/design-system/SKILL.md` | no | ask | `npx skills add lobbi-docs/claude@design-system -g -y` |

For each row, in order:
1. Run the Check command (for cli/npm) or test file existence (for agent/skill)
2. If found: continue silently
3. If missing: apply Resolution strategy
   - **stop**: notify user with Detail, halt execution
   - **url**: notify user with Detail (install link), halt execution
   - **install**: notify user, run the command in Detail, continue if successful
   - **ask**: notify user, offer to run command in Detail, continue either way (or halt if required)
   - **fallback**: notify user with Detail, continue with degraded behavior
4. After all checks: summarize what's available and what's degraded

---

## Site Specification

The specification can be provided via:

1. **--spec flag**: Read the file at the provided path
2. **Pasted text**: Check conversation for a description of the site
3. **--url flag**: Use WebFetch to analyze an existing site

**If no specification is found, ask the user before proceeding.**

---

## Step 1: Load Site Specification

Parse and store the site context for use when generating each design.
This is the only file the primary agent reads directly (specs are typically small).

## Step 2: Reconnaissance (launch in parallel)

Launch two subagents **in parallel** to gather context without bloating
the primary agent.

### 2a: Verify Design Skills

Design skill availability is checked in the Pre-flight section above.
Use the results from pre-flight to populate SKILL_REPORT:
- For each design skill: name, installed (yes/no)
- If any skill was missing and the user declined to install, note it as unavailable

### 2b: Scan Existing Project

```
Task(
  subagent_type: "Explore",
  model: "haiku",
  description: "Scan existing design project",
  prompt: "Check if src/designs/ directory exists. If it does:
    1. List all DesignN.tsx files (glob for src/designs/Design*.tsx)
    2. For each file, read ONLY the first 10 lines to extract the
       metadata comment (style name, key traits)
    3. Determine the highest design number
    Return PROJECT_REPORT (max 20 lines):
    - project_exists: true/false
    - package_manager: detected from lockfile (bun.lockb/pnpm-lock/yarn.lock/package-lock)
    - design_count: N
    - highest_number: N
    - designs: list of (number, style_name) pairs
    If no src/designs/ directory, return project_exists: false."
)
```

### Parse Recon Results

From SKILL_REPORT: Gate on missing skills before proceeding.
From PROJECT_REPORT:
- If `project_exists`: set `START_INDEX = highest_number + 1`, skip Step 3
- If not: set `START_INDEX = 1`, proceed to Step 3

## Step 3: Initialize Project

**Skip this step if an existing project was detected in Step 2b.**

Launch **Bash subagent** (haiku) to set up the project:

```
Task(
  subagent_type: "Bash",
  model: "haiku",
  description: "Initialize distil project",
  prompt: "Follow the project setup instructions:
    1. Detect package manager (bun -> pnpm -> yarn -> npm)
    2. Create Vite React-TS project
    3. Install dependencies: tailwindcss, postcss, autoprefixer,
       react-router-dom, lucide-react
    4. Configure Tailwind (content paths, index.css directives)
    5. Copy {skill_dir}/assets/DesignNav.tsx to src/components/DesignNav.tsx
    Return SETUP_REPORT (max 10 lines): status, package_manager, errors."
)
```

Parse SETUP_REPORT. If setup fails, fall back through the package manager
chain (bun -> pnpm -> yarn -> npm).

## Step 4: Create Designs via Subagent

Launch a **general-purpose subagent** to create all new designs.

**CRITICAL**: The subagent reads skill files and design guides directly.
Do NOT read them in the primary agent — pass file paths only.

```
Task(
  subagent_type: "general-purpose",
  description: "Create design variations",
  prompt: "
    You are creating {COUNT} new web design variations for a distil project.

    ## Site Specification
    {SITE_SPEC from Step 1}

    ## Design Knowledge — Read These Files
    Load design principles and the 50+ style catalog from these skill files:
    - ~/.claude/skills/bencium-innovative-ux-designer/SKILL.md
    - ~/.claude/skills/bencium-innovative-ux-designer/MOTION-SPEC.md
    - ~/.claude/skills/web-animation-design/SKILL.md
    - ~/.claude/skills/design-system/SKILL.md
    - ~/.claude/skills/design-system/references/style-guide.md

    Also read the project design guide:
    - {skill_dir}/references/design-guide.md

    ## Existing Designs (avoid these styles)
    {Compact list from PROJECT_REPORT: number + style_name pairs,
     or 'None — fresh project'}

    ## Task
    Create designs numbered {START_INDEX} through {START_INDEX + COUNT - 1}.

    For each design, create `src/designs/Design{N}.tsx`:
    - Pick a DISTINCT style from the 50+ style catalog in the design-system skill
    - Do NOT reuse styles already used by existing designs
    - Apply the site