@slamb2k/mad-skills 2.0.6

package/skills/distil/instructions.md

@@ -0,0 +1,255 @@
+# Distil Instructions
+
+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 specification to all content and sections
+    - Follow anti-AI-slop rules strictly (no Inter, no default blue, no cookie-cutter layouts)
+    - Include purposeful animations with proper easing
+    - Each design must be self-contained in a single file
+    - Import and render DesignNav from '../components/DesignNav'
+
+    After creating all designs, update:
+    1. `src/App.tsx` — Add import and route for EVERY design (existing + new)
+    2. Each design file's DesignNav `designs` array — Include ALL designs (existing + new)
+
+    ## Design File Requirements
+    Each design file must have:
+    - A metadata comment at the top: style name, key visual traits, color palette
+    - Import DesignNav from '../components/DesignNav'
+    - A `designs` array listing ALL designs (existing + new) with id and name
+    - ALL sections from the site specification with realistic content
+    - Custom color palette (not default Tailwind)
+    - Animations with proper easing (ease-out for entrances, ease-in-out for movement)
+    - Responsive layout (mobile-first)
+    - Lucide React icons for iconography
+
+    ## App.tsx Requirements
+    The App.tsx must:
+    - Import ALL design components (existing + new)
+    - Have a route for each: <Route path='/{N}' element={<DesignN />} />
+    - Default route redirects to /1
+
+    Return DESIGN_REPORT (max 30 lines):
+    - List each design created: number, style name, key visual traits
+    - Total design count (existing + new)
+    - Files created and modified
+    - Any issues encountered
+  "
+)
+```
+
+Parse DESIGN_REPORT. If any design failed, report the error and offer retry.
+
+## Step 5: Start Dev Server
+
+Launch as a **background Bash** to avoid blocking the primary agent:
+
+```
+Task(
+  subagent_type: "Bash",
+  run_in_background: true,
+  description: "Start Vite dev server",
+  prompt: "{package_manager} run dev --port {PORT}"
+)
+```
+
+If the dev server is already running, HMR should pick up the new files
+automatically — skip this step.
+
+## Step 6: Present Designs
+
+Inform the user:
+- Dev server is running at `http://localhost:{PORT}`
+- Each design is available at `/1`, `/2`, `/3`, etc.
+- Briefly describe each design's unique approach (from DESIGN_REPORT)
+- Note which designs are new vs existing (if appending)
+- Remind they can iterate with `--favorites` to refine preferred designs
+
+## Context Protection Summary
+
+| Step | Agent | Model | Why |
+|---|---|---|---|
+| 1: Load spec | Primary | — | Small file, needed for subagent prompt |
+| 2a: Skill check | Explore | haiku | Avoids reading 2000+ lines of skill content |
+| 2b: Project scan | Explore | haiku | Avoids reading existing design files |
+| 3: Init project | Bash | haiku | Shell commands only |
+| 4: Create designs | general-purpose | default | Heavy lifting: reads skills, writes files |
+| 5: Dev server | Bash (background) | — | Non-blocking, no output in primary |
+| 6: Present | Primary | — | User-facing, uses compact DESIGN_REPORT |
+
+## Troubleshooting
+
+- If package manager commands fail, try the next in the fallback chain
+- If port is in use, suggest killing the process or using a different port
+- If design imports fail, check file naming consistency
+- If no site spec is found, always ask the user before proceeding
+- If a design skill is missing, offer to install it before proceeding
+- If the subagent fails, check error details and retry with adjusted parameters

package/skills/distil/references/design-guide.md

@@ -0,0 +1,118 @@
+# Design Quality Standards & Directions
+
+## Quality Standards
+
+Each design should:
+- Use custom color palettes (not default Tailwind)
+- Include purposeful animations with proper easing
+- Have responsive layouts (mobile-first)
+- Feature micro-interactions (hover states, focus states, active states)
+- Use thoughtful typography hierarchy with characterful fonts
+- Include iconography (use Lucide React icons)
+- Feel like a premium, polished product
+- Accurately reflect the site specification context
+- Avoid generic "AI slop" patterns (no Inter, no default blue, no cookie-cutter layouts)
+
+## Design Directions
+
+### Expanded Style Catalog (50+ styles)
+
+Draw from the full style catalog in:
+`~/.claude/skills/design-system/SKILL.md`
+
+Categories include:
+
+1. **Minimalist & Modern** — minimalist, brutalist, scandinavian, japandi, swiss
+2. **Historical & Classical** — art-deco, art-nouveau, baroque, victorian, renaissance
+3. **Retro & Nostalgic** — retro-80s, retro-90s, vaporwave, y2k, mid-century
+4. **Digital UI** — glassmorphism, neumorphism, material-design, fluent-design, skeuomorphic
+5. **Futuristic & Sci-Fi** — cyberpunk, cybernetic, space-age, dystopian, solarpunk
+6. **Nature-Inspired** — organic, botanical, coastal, desert, forest
+7. **Bold & Expressive** — maximalist, pop-art, psychedelic, graffiti, punk
+8. **Illustration & Artistic** — hand-drawn, watercolor, flat-illustration, isometric, line-art
+9. **Cultural & Regional** — mediterranean, nordic, asian-zen, tribal, moroccan
+10. **Special Purpose** — dark-mode, high-contrast, print-inspired, terminal, low-fi
+
+### Style Blending
+
+Designs can blend two styles using weighted ratios:
+- **Dominant style (70-80%)**: Core colors, primary typography, main spacing
+- **Accent style (20-30%)**: Secondary colors, accent fonts, decorative elements
+
+Example: "art-deco with cyberpunk 70/30" = Art Deco base with neon accent highlights.
+
+## Anti-Generic Rules
+
+Read and apply principles from:
+- `~/.claude/skills/bencium-innovative-ux-designer/SKILL.md`
+- `~/.claude/skills/design-system/references/style-guide.md`
+
+### NEVER use:
+- **Fonts**: Inter, Roboto, Arial, Space Grotesk as primary fonts
+- **Colors**: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
+- **Patterns**: Cookie-cutter layouts, predictable component arrangements
+- **Effects**: Apple design mimicry, liquid/blob backgrounds without purpose
+- **Overall**: Anything that looks "AI-generated" or machine-made
+
+### ALWAYS:
+- Commit FULLY to the chosen aesthetic direction — no half measures
+- Use unexpected, characterful typography choices (dig deep in Google Fonts)
+- Create atmosphere: textures, grain, dramatic shadows, gradient meshes
+- Use dominant colors with SHARP accents (not timid, evenly-distributed palettes)
+- Pick unique color pairs that aren't typical
+- Vary everything across designs — no two should share fonts, palettes, or layouts
+
+## Animation Standards
+
+Read and apply principles from:
+- `~/.claude/skills/web-animation-design/SKILL.md`
+- `~/.claude/skills/bencium-innovative-ux-designer/MOTION-SPEC.md`
+
+### Easing Blueprint
+- **ease-out**: Element entrances (dropdowns, modals, tooltips) — fast start, slow settle
+- **ease-in-out**: On-screen movement and morphing — natural acceleration/deceleration
+- **ease**: Hover states and color transitions — elegant, asymmetrical
+- **linear**: Only for constant-speed animations (spinners, marquees)
+- **Never ease-in for UI**: Makes interfaces feel sluggish
+
+### Duration Guidelines
+| Element Type | Duration |
+|---|---|
+| Micro-interactions (button hover) | 100-150ms |
+| Standard UI (tooltips, dropdowns) | 150-250ms |
+| Modals, drawers | 200-300ms |
+| Page transitions | 300-400ms |
+
+### Performance Rules
+- Only animate `transform` and `opacity` (GPU-accelerated)
+- Avoid animating `width`, `height`, `margin`, `padding`
+- Add `will-change: transform` for elements with shaky animations
+- Always respect `prefers-reduced-motion`
+- Include button press feedback: `transform: scale(0.97)` on `:active`
+
+## Typography Standards
+
+- Use 2-3 typefaces maximum, but make them CHARACTERFUL
+- **Headlines**: Emotional, personality-driven, attention-grabbing
+- **Body/UI**: Functional, highly legible, clarity over expression
+- Use a mathematical scale (1.25x major third or 1.333x perfect fourth)
+- Pair fonts with contrast: Serif + Sans, Geometric + Humanist, Display + System
+- Responsive typography: use `clamp()` for fluid scaling
+
+## Color Standards
+
+- **Neutral palette (4-5 colors)**: Backgrounds, surfaces, borders, text
+- **Accent palette (1-3 colors)**: CTAs, status indicators, emphasis
+- Choose warm or cool neutrals intentionally based on brand feel
+- Saturated accents should contrast clearly with both light and dark backgrounds
+- Every color must serve a purpose: hierarchy, function, status, or action
+
+## Technical Notes
+
+- All designs should be self-contained in their own file
+- Use Tailwind for all styling (no external CSS frameworks)
+- Each design should be fully functional (routing, state)
+- Avoid placeholder content — use realistic content from the site spec
+- Include all features and sections from the specification
+- Ensure WCAG AA contrast minimums (4.5:1 normal text, 3:1 large text)
+- Touch targets minimum 44x44px for interactive elements

package/skills/distil/references/iteration-mode.md

@@ -0,0 +1,186 @@
+# Distil Iteration Mode
+
+When `--favorites` is provided, generate new designs inspired by existing
+favorites. This allows iterative refinement over multiple sessions.
+
+The primary agent acts as a thin orchestrator — all heavy file reading
+and design creation is delegated to subagents.
+
+## Workflow
+
+### Step I1: Reconnaissance via Subagent
+
+Launch a single **Explore subagent** to gather all needed context:
+
+```
+Task(
+  subagent_type: "Explore",
+  model: "haiku",
+  description: "Scan project and favorites",
+  prompt: "Gather context for design iteration mode.
+
+    1. Check src/designs/ exists. If not, report project_exists: false and stop.
+    2. List all DesignN.tsx files (glob src/designs/Design*.tsx)
+    3. For each design, read ONLY the first 10 lines to extract the
+       metadata comment (style name, key traits)
+    4. Determine the highest design number
+    5. For favorites {FAVORITES_LIST}, read the FULL content of each
+       favorite design file and extract:
+       - Color palette, design style/theme, typography choices
+       - Layout patterns, animation styles, component patterns
+    6. Check package manager from lockfile (bun.lockb/pnpm-lock/yarn.lock/package-lock)
+    7. Check skill availability:
+       - ~/.claude/skills/bencium-innovative-ux-designer/SKILL.md
+       - ~/.claude/skills/web-animation-design/SKILL.md
+       - ~/.claude/skills/design-system/SKILL.md
+
+    Return RECON_REPORT (max 40 lines):
+    - project_exists: true/false
+    - package_manager: detected
+    - design_count: N
+    - highest_number: N
+    - all_designs: list of (number, style_name) pairs
+    - favorite_summaries: for each favorite, a 3-5 line summary of its
+      visual characteristics (palette, style, typography, layout, animations)
+    - skills_installed: list of (name, yes/no)
+  "
+)
+```
+
+If `project_exists` is false, inform user they need an initial generation first.
+If any skill is missing, inform user and offer to install.
+
+### Step I2: Generate New Designs via Subagent
+
+Set `START_INDEX = highest_number + 1`.
+
+Launch a **general-purpose subagent** to create the new variations:
+
+```
+Task(
+  subagent_type: "general-purpose",
+  description: "Create design iterations",
+  prompt: "
+    You are creating {COUNT} new design variations inspired by existing favorites.
+
+    ## Site Specification
+    {SITE_SPEC}
+
+    ## 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
+
+    ## Favorite Designs (Inspiration Sources)
+    {favorite_summaries from RECON_REPORT}
+
+    Also read the full source of each favorite for detailed inspiration:
+    {List favorite file paths: src/designs/Design{N}.tsx}
+
+    ## All Existing Designs (avoid duplicating styles)
+    {all_designs from RECON_REPORT}
+
+    ## Task
+    Create designs numbered {START_INDEX} through {START_INDEX + COUNT - 1}.
+    Each new design should be a VARIATION inspired by the favorites.
+
+    For each design, create `src/designs/Design{N}.tsx`:
+    - Pick 1-2 favorites as primary inspiration
+    - Create a NEW variation using one of these strategies:
+      - Color shift: Keep structure, change palette
+      - Style blend: Combine elements from multiple favorites
+      - Intensity variation: More/less bold, more/less minimal
+      - Animation evolution: Add or modify motion design
+      - Layout remix: Keep aesthetic, reorganize layout
+      - Detail enhancement: Add micro-interactions and polish
+      - Theme variation: Same colors, different visual style
+    - Apply anti-AI-slop rules from the loaded skills
+    - Include purposeful animations with proper easing
+    - Each design must be self-contained in a single file
+    - Import and render DesignNav from '../components/DesignNav'
+
+    After creating all designs, update:
+    1. `src/App.tsx` — Add routes for ALL designs (existing + new)
+    2. Each design file's DesignNav `designs` array — Include ALL designs
+
+    ## Design File Requirements
+    Each design file must have a metadata comment:
+    - Style name (hint at inspiration, e.g. 'Neo Dark', 'Glass Aurora')
+    - Which favorites inspired it
+    - Key visual traits and variation strategy used
+
+    ## DesignNav Names
+    Use descriptive names hinting at inspiration:
+    - Inspired by 'Dark Premium' (#2): 'Neo Dark', 'Midnight Gold', 'Dark Luxe'
+    - Inspired by 'Glassmorphism' (#1): 'Glass Aurora', 'Frost Bloom', 'Crystal'
+    - Blending multiple: 'Cyber Glass', 'Warm Noir'
+
+    ## App.tsx Requirements
+    Import ALL design components (existing + new).
+    Route each: <Route path='/{N}' element={<DesignN />} />
+    Default route redirects to /1.
+
+    Return DESIGN_REPORT (max 30 lines):
+    - Each design: number, name, inspiration source(s), variation strategy
+    - Total count (existing + new)
+    - Files created and modified
+  "
+)
+```
+
+### Step I3: Restart Dev Server
+
+If running, HMR should pick up changes — skip this step.
+Otherwise launch as background Bash:
+
+```
+Task(
+  subagent_type: "Bash",
+  run_in_background: true,
+  description: "Start Vite dev server",
+  prompt: "{package_manager} run dev --port {PORT}"
+)
+```
+
+### Step I4: Present New Designs
+
+Report to user (from DESIGN_REPORT):
+- How many new designs were created
+- Which favorites inspired each
+- New design numbers and names
+- Remind they can iterate again with new favorites
+
+## Context Protection Summary
+
+| Step | Agent | Model | Why |
+|---|---|---|---|
+| I1: Recon | Explore | haiku | Reads all files, returns compact summary |
+| I2: Create | general-purpose | default | Reads skills + favorites, writes designs |
+| I3: Dev server | Bash (background) | — | Non-blocking |
+| I4: Present | Primary | — | User-facing, uses compact DESIGN_REPORT |
+
+Primary agent context: site spec + RECON_REPORT (~40 lines) + DESIGN_REPORT (~30 lines).
+
+## Scalability (50+ designs)
+
+- Consider pagination or grouping in DesignNav
+- Move designList to a separate `src/data/designs.ts`
+- Consider lazy loading design components
+
+## Design Metadata
+
+For large collections, add lineage comments:
+```tsx
+/**
+ * Design 8: Midnight Aurora
+ * Inspired by: #2 (Dark Premium), #5 (Organic Curves)
+ * Strategy: Style blend — dark theme with flowing organic shapes
+ * Created: Iteration 2
+ */
+```

package/skills/distil/references/project-setup.md

@@ -0,0 +1,92 @@
+# Distil Project Setup
+
+Steps 2-4 of initial project creation.
+
+## Package Manager Detection
+
+Detect available package manager (fallback chain):
+1. `bun` -> use bun commands
+2. `pnpm` -> use pnpm commands
+3. `yarn` -> use yarn commands
+4. `npm` -> use npm commands (always available)
+
+## Step 2: Initialize Project
+
+```bash
+# Using detected package manager (example: bun)
+bun create vite . --template react-ts
+bun install
+bun add -d tailwindcss postcss autoprefixer
+bunx tailwindcss init -p
+bun add react-router-dom
+bun add lucide-react
+```
+
+## Step 3: Configure Tailwind
+
+Update `tailwind.config.js`:
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: { extend: {} },
+  plugins: [],
+}
+```
+
+Update `src/index.css`:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Step 4: Set Up Routing
+
+Copy `assets/DesignNav.tsx` to `src/components/DesignNav.tsx`.
+
+Create `src/App.tsx` with routes for each design:
+```tsx
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import Design1 from './designs/Design1'
+// ... import each design
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/1" replace />} />
+        <Route path="/1" element={<Design1 />} />
+        {/* ... route per design */}
+      </Routes>
+    </BrowserRouter>
+  )
+}
+```
+
+## DesignNav Usage
+
+Each design file imports and renders the shared nav:
+```tsx
+import DesignNav from '../components/DesignNav'
+
+const designs = [
+  { id: 1, name: 'Glassmorphism' },
+  { id: 2, name: 'Dark Premium' },
+  // ... all designs
+]
+
+export default function Design1() {
+  return (
+    <div>
+      {/* Design content */}
+      <DesignNav designs={designs} variant="glass" />
+    </div>
+  )
+}
+```
+
+Variant selection:
+- `variant="light"` for light-themed designs
+- `variant="dark"` for dark-themed designs
+- `variant="glass"` for glassmorphism or translucent designs

package/skills/distil/tests/evals.json

@@ -0,0 +1,28 @@
+[
+  {
+    "name": "banner-and-tagline",
+    "prompt": "Generate 3 design variations for my SaaS landing page",
+    "assertions": [
+      { "type": "contains", "value": "██" },
+      { "type": "regex", "value": "(Heating up|Fractioning the|Condensing pure|Separating signal|Extracting the|Refining through|variations of brilliance|crude concept to pure)" },
+      { "type": "semantic", "value": "The response begins with an ASCII art banner displayed BEFORE any explanation or workflow steps" }
+    ]
+  },
+  {
+    "name": "tech-stack",
+    "prompt": "Create 5 different designs for a portfolio website --port 5173",
+    "assertions": [
+      { "type": "contains", "value": "██" },
+      { "type": "regex", "value": "(Vite|React|Tailwind)", "flags": "i" },
+      { "type": "semantic", "value": "Describes creating a project with Vite, React, TypeScript, and Tailwind CSS, producing multiple distinct design variations accessible at numbered routes like /1, /2, /3" }
+    ]
+  },
+  {
+    "name": "spec-handling",
+    "prompt": "Distil 4 --spec ./site-brief.md --port 3000",
+    "assertions": [
+      { "type": "contains", "value": "██" },
+      { "type": "semantic", "value": "Describes reading a site specification from the provided file path and creating 4 unique design variations, with a dev server running on the specified port" }
+    ]
+  }
+]