/**
 * Embedded Design Skill Workflows
 *
 * Each skill is a structured workflow that guides the LLM through producing
 * a specific kind of design artifact. Skills are based on the Open Design
 * project (https://github.com/nexu-io/open-design).
 *
 * The LLM reads the skill workflow, then uses its existing tools (write, read,
 * bash) to produce output files in the working directory.
 */
export const DESIGN_SKILLS = [
    {
        name: "web-prototype",
        scenario: "design",
        description: "General-purpose web prototype. Single self-contained HTML file with modern CSS, responsive layout, and polished design tokens.",
        outputKind: "html",
        workflow: `# Web Prototype Skill

Produce a single, self-contained HTML file for a web page prototype. This is your workflow — follow it exactly.

## Phase 0 — Pre-flight (before writing any code)

1. Read the active DESIGN SYSTEM (provided below). Map its color tokens to CSS custom properties.
2. Determine: what kind of page? Landing page, marketing site, docs, SaaS, portfolio?
3. Vocalize the system you'll use before writing: "I'll use the [X] design system with [Y] color palette and [Z] typography."

## Phase 1 — HTML Shell

Create \`index.html\` with this skeleton:

\`\`\`html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; }

    :root {
      /* Map design system tokens here */
      --color-bg: ...;
      --color-text: ...;
      --color-accent: ...;
      --font-sans: ...;
      --font-serif: ...;
      --radius: 8px;
      --max-width: 1080px;
    }

    body {
      font-family: var(--font-sans);
      color: var(--color-text);
      background: var(--color-bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

    /* Write all component styles below */
  </style>
</head>
<body>
  <!-- Sections go here -->
</body>
</html>
\`\`\`

## Phase 2 — Compose Sections

Pick from these section patterns based on the page type. Each section is a semantic HTML block inside \`.container\`:

### Hero (always first)
\`\`\`html
<section class="hero">
  <div class="container">
    <h1>Bold headline that states the value</h1>
    <p>One-sentence subtext that adds context. 20-30 words max.</p>
    <div class="hero-actions">
      <a href="#" class="btn-primary">Primary CTA</a>
      <a href="#" class="btn-secondary">Secondary</a>
    </div>
  </div>
</section>
\`\`\`

### Feature Grid
\`\`\`html
<section class="features">
  <div class="container">
    <h2>Section heading</h2>
    <div class="grid-3">
      <div class="feature-card">
        <div class="feature-icon">[icon]</div>
        <h3>Feature name</h3>
        <p>Concise description. One sentence.</p>
      </div>
      <!-- repeat 3-6 times -->
    </div>
  </div>
</section>
\`\`\`

### Social Proof
\`\`\`html
<section class="proof">
  <div class="container">
    <h2>Trusted by</h2>
    <div class="logo-strip">[company logos or names]</div>
    <blockquote>"Compelling quote from a real-sounding persona." <cite>— Name, Role at Company</cite></blockquote>
  </div>
</section>
\`\`\`

### CTA Footer
\`\`\`html
<section class="cta">
  <div class="container">
    <h2>Ready to start?</h2>
    <p>One-sentence prompt.</p>
    <a href="#" class="btn-primary">Get Started</a>
  </div>
</section>
\`\`\`

### Pricing (if needed)
\`\`\`html
<section class="pricing">
  <div class="container">
    <h2>Simple pricing</h2>
    <div class="grid-3">
      <div class="pricing-card">
        <h3>Starter</h3>
        <div class="price">$X<span>/mo</span></div>
        <ul>
          <li>Feature one</li>
          <li>Feature two</li>
        </ul>
        <a href="#" class="btn-primary">Get Started</a>
      </div>
      <!-- 2-3 tiers -->
    </div>
  </div>
</section>
\`\`\`

## Phase 3 — Component Styles

Apply design-system tokens to each component:

- **Hero**: Full-bleed background matching --color-bg-secondary or --color-bg-primary (dark systems). h1 at 48-80px, 700-800 weight, tight line-height. Subtext at 18-20px, --color-text-secondary.
- **Grid**: CSS Grid, \`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\`, 24-32px gap.
- **Feature Cards**: Padding 32px, background --color-bg-surface, border-radius --radius, subtle border from --color-border.
- **Buttons**: Display inline-flex, align-items center, padding 12px 24px, border-radius --radius, font-weight 600. Primary: --color-accent bg, white text. Secondary: transparent, accent border.
- **Responsive**: Mobile-first. At 768px, adjust grid columns, reduce heading sizes by 25%, stack hero content vertically.

## Phase 4 — Anti-Slop Check

Before finalizing, verify:
- [ ] No warm beige/cream/peach backgrounds (unless the design system specifies them)
- [ ] No Inter or Roboto unless the design system calls for them
- [ ] No gradient backgrounds unless the design system uses them
- [ ] No emoji as icons — use Unicode symbols or SVG
- [ ] No lorem ipsum — every word is meaningful
- [ ] No rounded-left-border accent cards (the "AI slop" signature)
- [ ] Colors come from the design system, not defaults
- [ ] Typography scale is consistent (not random sizes)`,
    },
    {
        name: "saas-landing",
        scenario: "marketing",
        description: "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Production-ready marketing page structure.",
        outputKind: "html",
        workflow: `# SaaS Landing Skill

Produce a single-page SaaS landing page. This is your workflow — follow it exactly.

## Phase 0 — Pre-flight

1. Read the design system. Map all color tokens.
2. Determine: product name, tagline, audience, has pricing? how many social proof items?
3. Vocalize: "I'll build a SaaS landing for [product] using the [system] design system. Sections: hero, features (6), social proof (3 logos + quote), pricing (3 tiers), CTA."

## Phase 1 — Shell

Create \`index.html\` with the same skeleton as web-prototype, but use this section order:

1. **Navigation** — Sticky top, 64px height. Logo left, nav links right (Features, Pricing, Docs), "Sign In" + "Get Started" CTA.
2. **Hero** — Two-column: left = headline + subtext + CTA + "no credit card" badge, right = product screenshot or illustration.
3. **Trust Strip** — 5-6 company logos, grayscale, 80px height each.
4. **Features** — 3×2 grid. Each card: icon, title, description. Focus on benefits, not specs.
5. **How It Works** — 3-step horizontal flow. Number + title + short description.
6. **Social Proof** — Quote block + person attribution.
7. **Pricing** — 3-tier cards. Highlight the middle tier with a "Popular" badge.
8. **FAQ** — Accordion or simple Q&A list, 4-6 items.
9. **CTA Footer** — Full-width, centered, strong headline.
10. **Footer** — Logo, copyright, link columns.

## Phase 2 — Key Component Styles

### Navigation
\`\`\`css
.nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; backdrop-filter: blur(12px); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-links { display: flex; gap: 32px; align-items: center; }
\`\`\`

### Hero
\`\`\`css
.hero { padding: 120px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.hero p { font-size: 20px; color: var(--color-text-secondary); margin: 24px 0 32px; max-width: 480px; }
\`\`\`

### Pricing Cards
\`\`\`css
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { padding: 40px 32px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.pricing-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); transform: scale(1.03); }
.price { font-size: 48px; font-weight: 800; margin: 16px 0; }
.price span { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); }
\`\`\`

## Phase 3 — Content Rules

- Every headline sells a benefit, not describes a feature
- Pricing: use specific numbers ($29, $79, $199) not "Free / Pro / Enterprise" placeholders
- Social proof: realistic company names, real-sounding quote
- CTA button text: action-oriented — "Start Building", "Get Early Access", "See Plans"
- No lorem ipsum, no placeholder images that look like placeholders — use gradient shapes

## Phase 4 — Anti-Slop Check

Same checklist as web-prototype, plus:
- [ ] Pricing cards don't all look identical — featured tier is visually distinct
- [ ] Hero doesn't use a gradient background (use solid, pattern, or image)
- [ ] Trust logos are monochrome, same height, evenly spaced`,
    },
    {
        name: "slide-deck",
        scenario: "marketing",
        description: "Presentation slide deck as a single HTML file. Fixed 16:9 canvas with keyboard navigation, slide counter, and print-to-PDF support.",
        outputKind: "slides",
        workflow: `# Slide Deck Skill

Produce a presentation deck as a single HTML file. 16:9 ratio (1920×1080), keyboard navigation, slide counter.

## Phase 0 — Pre-flight

1. Read the design system for color tokens.
2. Determine: deck title, audience, number of slides, tone (pitch, educational, report).
3. Vocalize the plan: "I'll create a [N]-slide deck: [slide titles in order]."

## Phase 1 — Framework Skeleton

Create \`deck.html\` with this exact framework. The scaling/navigation JS is load-bearing — copy it verbatim.

\`\`\`html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Deck Title</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; }

    :root {
      --slide-w: 1920px;
      --slide-h: 1080px;
      /* Design system tokens here */
    }

    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font-sans); }

    #scaler {
      position: absolute;
      top: 50%; left: 50%;
      transform-origin: 0 0;
    }

    .slide {
      position: absolute;
      top: 0; left: 0;
      width: var(--slide-w);
      height: var(--slide-h);
      display: none;
      overflow: hidden;
    }
    .slide.active { display: flex; }

    #counter {
      position: fixed; bottom: 16px; right: 16px; z-index: 100;
      background: rgba(0,0,0,0.6); color: #fff; padding: 4px 12px;
      border-radius: 4px; font-size: 14px; font-family: monospace;
    }

    @media print {
      html, body { width: auto; height: auto; overflow: visible; background: #fff; }
      #scaler { position: static; transform: none; }
      .slide { position: relative; display: block !important; break-after: page; }
      #counter { display: none; }
    }
  </style>
</head>
<body>
  <div id="scaler">
    <div class="slide active" data-slide="1"><!-- content --></div>
    <div class="slide" data-slide="2"><!-- content --></div>
    <!-- ... -->
  </div>
  <div id="counter">1 / N</div>
  <script>
    const slides = document.querySelectorAll('.slide');
    let current = 0;
    function show(i) {
      slides[current].classList.remove('active');
      current = (i + slides.length) % slides.length;
      slides[current].classList.add('active');
      document.getElementById('counter').textContent = (current + 1) + ' / ' + slides.length;
    }
    function scale() {
      const scaler = document.getElementById('scaler');
      const sw = window.innerWidth, sh = window.innerHeight;
      const ratio = Math.min(sw / 1920, sh / 1080);
      scaler.style.transform = 'translate(' + (sw/2) + 'px,' + (sh/2) + 'px) scale(' + ratio + ')';
    }
    document.addEventListener('keydown', e => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); show(current + 1); }
      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); show(current - 1); }
      if (e.key === 'Home') { e.preventDefault(); show(0); }
      if (e.key === 'End') { e.preventDefault(); show(slides.length - 1); }
    });
    window.addEventListener('resize', scale);
    scale();
    localStorage.setItem('deck-slide', current);
  </script>
</body>
</html>
\`\`\`

## Phase 2 — Slide Layouts

Each slide is a \`.slide\` div with \`.active\` on the first. Tag slides with \`data-slide="N"\`.

### Title Slide
\`\`\`html
<div class="slide active" data-slide="1">
  <div class="slide-content title-slide">
    <p class="slide-label">Company · Date</p>
    <h1>Deck Title</h1>
    <p class="slide-subtitle">One-line subtitle</p>
  </div>
</div>
\`\`\`
Style: centered content, 80px headline, dark background with design-system colors.

### Text-Only Slide
\`\`\`html
<div class="slide" data-slide="2">
  <div class="slide-content text-slide">
    <h2>Section Title</h2>
    <ul>
      <li>Bullet point one — keep it short, 8-12 words</li>
      <li>Bullet point two</li>
      <li>Bullet point three</li>
    </ul>
  </div>
</div>
\`\`\`

### Two-Column Slide
\`\`\`html
<div class="slide" data-slide="3">
  <div class="slide-content two-col">
    <div class="col">
      <h2>Left Heading</h2>
      <p>Descriptive text. 20-40 words.</p>
    </div>
    <div class="col">
      <div class="chart-placeholder">[chart, image, or code block]</div>
    </div>
  </div>
</div>
\`\`\`

### Metrics Slide
\`\`\`html
<div class="slide" data-slide="4">
  <div class="slide-content metrics-slide">
    <h2>Key Results</h2>
    <div class="metrics-grid">
      <div class="metric">
        <span class="metric-value">85%</span>
        <span class="metric-label">Metric name</span>
      </div>
      <!-- 3-4 metrics -->
    </div>
  </div>
</div>
\`\`\`

### Closing Slide
\`\`\`html
<div class="slide" data-slide="N">
  <div class="slide-content title-slide closing">
    <h1>Thank You</h1>
    <p class="slide-subtitle">contact@company.com</p>
  </div>
</div>
\`\`\`

## Phase 3 — Slide Styles

\`\`\`css
.slide-content { width: 100%; height: 100%; padding: 80px 120px; display: flex; flex-direction: column; justify-content: center; }

.title-slide { align-items: center; text-align: center; background: var(--color-bg-primary); }
.title-slide h1 { font-size: 80px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.slide-label { font-size: 20px; color: var(--color-text-secondary); margin-bottom: 24px; }
.slide-subtitle { font-size: 28px; color: var(--color-text-secondary); margin-top: 16px; }

.text-slide h2 { font-size: 48px; font-weight: 700; margin-bottom: 40px; }
.text-slide ul { font-size: 28px; line-height: 1.8; }
.text-slide li { margin-bottom: 12px; color: var(--color-text-secondary); }
.text-slide li::marker { color: var(--color-accent); }

.two-col { flex-direction: row; gap: 80px; }
.two-col .col { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.two-col h2 { font-size: 48px; margin-bottom: 24px; }
.two-col p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }

.metrics-slide { align-items: center; justify-content: center; text-align: center; }
.metrics-grid { display: flex; gap: 80px; margin-top: 48px; }
.metric-value { font-size: 72px; font-weight: 800; color: var(--color-accent); display: block; }
.metric-label { font-size: 20px; color: var(--color-text-secondary); margin-top: 8px; display: block; }

.closing { background: var(--color-bg-primary); }
\`\`\`

## Phase 4 — Content Rules for Slides

- Slide text is never smaller than 24px — this is a 16:9 canvas, not a web page
- Headlines: 48-80px, one line preferred
- Body text: 24-28px
- Bullet points: 28px, max 5 per slide, each 6-12 words
- Every slide gets a \`data-slide="N"\` attribute
- Slides are 1-indexed
- Max 12 slides unless the user asks for more
- The closing slide always says "Thank You" with contact info`,
    },
    {
        name: "mobile-app",
        scenario: "design",
        description: "Mobile app prototype. Phone-frame-contained HTML with iOS/Android patterns, touch targets, and native-feel interactions.",
        outputKind: "html",
        workflow: `# Mobile App Prototype Skill

Produce a mobile app prototype as a single HTML file. Phone-frame contained, touch-friendly, native-feel interactions.

## Phase 0 — Pre-flight

1. Read the design system for color tokens.
2. Determine: app name, screens needed (2-5), platform style (iOS or Material).
3. Vocalize: "I'll build [app name] with [N] screens: [screen names]. [iOS/Material] patterns."

## Phase 1 — Shell with Phone Frame

Create \`app.html\` with a phone frame wrapper:

\`\`\`html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>App Name</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; }

    :root {
      --phone-w: 390px;
      --phone-h: 844px;
      --phone-radius: 44px;
      --safe-top: 54px;
      --safe-bottom: 34px;
      /* Design system tokens */
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0f0f0;
      font-family: -apple-system, "SF Pro Text", "Inter", sans-serif;
    }

    .phone-frame {
      width: var(--phone-w);
      height: var(--phone-h);
      background: var(--color-bg-primary);
      border-radius: var(--phone-radius);
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 0 8px #1a1a1a, 0 0 0 10px #333, 0 20px 60px rgba(0,0,0,0.3);
    }

    .status-bar {
      height: var(--safe-top);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
      font-size: 14px;
      font-weight: 600;
      background: var(--color-bg-primary);
    }

    .screen {
      position: absolute;
      top: var(--safe-top);
      left: 0;
      right: 0;
      bottom: var(--safe-bottom);
      display: none;
      flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .screen.active { display: flex; }

    .bottom-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--safe-bottom);
      display: flex;
      border-top: 1px solid var(--color-border);
      background: var(--color-bg-surface, var(--color-bg-primary));
    }
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 10px;
      color: var(--color-text-secondary);
      cursor: pointer;
      user-select: none;
    }
    .nav-item.active { color: var(--color-accent); }
    .nav-icon { font-size: 22px; line-height: 1; }
  </style>
</head>
<body>
  <div class="phone-frame">
    <div class="status-bar">
      <span>9:41</span>
      <span>●●●○ WiFi ▮▮▮</span>
    </div>

    <div class="screen active" id="screen-home"><!-- Home content --></div>
    <div class="screen" id="screen-detail"><!-- Detail content --></div>
    <div class="screen" id="screen-settings"><!-- Settings content --></div>

    <div class="bottom-nav">
      <div class="nav-item active" onclick="showScreen('home')">
        <span class="nav-icon">🏠</span>Home
      </div>
      <div class="nav-item" onclick="showScreen('detail')">
        <span class="nav-icon">🔍</span>Search
      </div>
      <div class="nav-item" onclick="showScreen('settings')">
        <span class="nav-icon">👤</span>Profile
      </div>
    </div>
  </div>

  <script>
    function showScreen(id) {
      document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
      document.getElementById('screen-' + id).classList.add('active');
      document.querySelectorAll('.nav-item').forEach((n, i) => {
        n.classList.toggle('active', n.textContent.trim().toLowerCase().includes(id));
      });
    }
  </script>
</body>
</html>
\`\`\`

## Phase 2 — Component Patterns

### List Item (44px minimum tap target)
\`\`\`css
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 44px;
  gap: 12px;
  border-bottom: 0.5px solid var(--color-border);
  cursor: pointer;
}
.list-item:active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); }
.list-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
.list-item-content { flex: 1; }
.list-item-title { font-size: 16px; font-weight: 500; }
.list-item-subtitle { font-size: 14px; color: var(--color-text-secondary); margin-top: 2px; }
.list-item-trailing { color: var(--color-text-secondary); font-size: 14px; }
\`\`\`

### Card
\`\`\`css
.card {
  background: var(--color-bg-surface, #fff);
  border-radius: 16px;
  padding: 16px;
  margin: 8px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card-image { width: 100%; height: 180px; border-radius: 12px; object-fit: cover; background: var(--color-bg-secondary); }
.card-title { font-size: 17px; font-weight: 600; margin: 12px 0 4px; }
.card-subtitle { font-size: 14px; color: var(--color-text-secondary); }
\`\`\`

### Input Field
\`\`\`css
.input-group { padding: 8px 16px; }
.input-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }
.input-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 16px;
  background: var(--color-bg-secondary, #f5f5f5);
  outline: none;
}
.input-field:focus { border-color: var(--color-accent); }
\`\`\`

### Button
\`\`\`css
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin: 8px 16px;
  user-select: none;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-secondary { background: var(--color-bg-secondary, #f0f0f0); color: var(--color-text-primary); }
.btn:active { opacity: 0.8; transform: scale(0.98); }
\`\`\`

## Phase 3 — Mobile-Specific Rules

- Minimum touch target: 44×44px
- Font sizes: 13px (captions), 15px (body), 17px (headlines), 22px (titles), 28px (hero)
- Padding: 16px horizontal standard, 8-16px card margins
- Never use hover effects — use :active for tap feedback
- Scrollable content uses \`overflow-y: auto; -webkit-overflow-scrolling: touch;\`
- Status bar: 54px height standard, dark or light based on design system
- Bottom safe area: 34px for home indicator
- Images: use \`object-fit: cover\` with fixed aspect ratios, gradient placeholders
- No hamburger menus — use tab bar navigation (3-5 items)`,
    },
    {
        name: "dashboard",
        scenario: "design",
        description: "Data dashboard with cards, charts, tables, and KPIs. Clean information hierarchy with grid layout.",
        outputKind: "html",
        workflow: `# Dashboard Skill

Produce a data dashboard as a single HTML file. Card-based layout with KPIs, charts (CSS-only or SVG), tables, and activity feeds.

## Phase 0 — Pre-flight

1. Read the design system. Dashboards work best with clean, muted systems (Linear, Notion, Vercel).
2. Determine: dashboard name, key metrics, sections needed.
3. Vocalize: "I'll build a [name] dashboard with [N] sections: [section names]."

## Phase 1 — Shell

Create \`dashboard.html\` with sidebar + main content layout:

\`\`\`html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; }

    :root {
      --sidebar-w: 240px;
      /* Design system tokens */
    }

    body {
      display: flex;
      min-height: 100vh;
      font-family: var(--font-sans);
      background: var(--color-bg-secondary);
      color: var(--color-text-primary);
    }

    .sidebar {
      width: var(--sidebar-w);
      background: var(--color-bg-primary);
      border-right: 1px solid var(--color-border);
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
    }
    .sidebar-logo { font-size: 18px; font-weight: 700; margin-bottom: 32px; }
    .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
    .sidebar-link {
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 14px;
      color: var(--color-text-secondary);
      text-decoration: none;
      cursor: pointer;
    }
    .sidebar-link:hover, .sidebar-link.active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); color: var(--color-text-primary); }

    .main {
      flex: 1;
      padding: 32px;
      overflow-y: auto;
    }
    .main-header { margin-bottom: 32px; }
    .main-header h1 { font-size: 28px; font-weight: 700; }
    .main-header p { color: var(--color-text-secondary); margin-top: 4px; }
  </style>
</head>
<body>
  <aside class="sidebar">
    <div class="sidebar-logo">Dashboard</div>
    <nav class="sidebar-nav">
      <a class="sidebar-link active">Overview</a>
      <a class="sidebar-link">Analytics</a>
      <a class="sidebar-link">Reports</a>
      <a class="sidebar-link">Settings</a>
    </nav>
  </aside>
  <main class="main">
    <div class="main-header">
      <h1>Overview</h1>
      <p>Last updated: just now</p>
    </div>
    <!-- Content sections here -->
  </main>
</body>
</html>
\`\`\`

## Phase 2 — Component Patterns

### KPI Cards (4-up row)
\`\`\`css
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.kpi-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 20px; }
.kpi-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 32px; font-weight: 700; margin-top: 8px; }
.kpi-change { font-size: 13px; margin-top: 4px; }
.kpi-change.up { color: var(--color-success, #30a46c); }
.kpi-change.down { color: var(--color-danger, #e5484d); }
\`\`\`

### Chart (CSS-only bar chart)
\`\`\`css
.chart-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius, 8px); padding: 24px; margin-bottom: 24px; }
.chart-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
.bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-accent); min-height: 4px; position: relative; transition: height 0.3s; }
.bar:hover { opacity: 0.8; }
.bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--color-text-secondary); }
\`\`\`

### Table
\`\`\`css
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.data-table tr:hover td { background: var(--color-bg-hover, rgba(0,0,0,0.02)); }
\`\`\`

### Activity Feed
\`\`\`css
.activity-feed { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 6px; flex-shrink: 0; }
.activity-content { flex: 1; }
.activity-text { font-size: 14px; }
.activity-time { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
\`\`\`

## Phase 3 — Layout Patterns

### Two-column main area
\`\`\`css
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
\`\`\`

### Responsive
\`\`\`css
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { padding: 16px; }
  .kpi-grid { grid-template-columns: 1fr; }
}
\`\`\`

## Phase 4 — Dashboard Design Rules

- Information hierarchy: KPIs → Main chart → Detail tables → Activity
- Use consistent card padding (24px)
- Numbers should be right-aligned in table columns
- Color code only the most important KPI change (1-2 per row max)
- Tables: max 6 columns, zebra striping optional, hover row highlight`,
    },
    {
        name: "social-carousel",
        scenario: "marketing",
        description: "Social media carousel. Multiple slides in a single HTML file with horizontal scroll, designed for Instagram/LinkedIn/Twitter export.",
        outputKind: "html",
        workflow: `# Social Carousel Skill

Produce a social media carousel as a single HTML file. 1080×1080 (Instagram) or 1200×628 (LinkedIn/Twitter), horizontal scroll, export-friendly.

## Phase 0 — Pre-flight

1. Read the design system.
2. Determine: platform (instagram=1080×1080, linkedin=1200×627), number of cards (3-10), topic.
3. Vocalize: "I'll create a [N]-card carousel for [platform] about [topic]."

## Phase 1 — Shell

Create \`carousel.html\`:

\`\`\`html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carousel</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; }

    :root {
      --card-w: 1080px;
      --card-h: 1080px;
      /* Design system tokens */
    }

    body {
      background: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: var(--font-sans);
    }

    .carousel-container {
      width: min(var(--card-w), 95vw);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      display: flex;
      gap: 16px;
      padding: 40px 0;
      -webkit-overflow-scrolling: touch;
    }

    .card {
      flex-shrink: 0;
      width: min(var(--card-w), 90vw);
      aspect-ratio: 1;
      scroll-snap-align: center;
      border-radius: 12px;
      overflow: hidden;
      background: var(--color-bg-primary);
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    }

    @media (max-width: 1100px) {
      .card { width: 85vw; }
    }
  </style>
</head>
<body>
  <div class="carousel-container">
    <div class="card">
      <!-- Card 1 content -->
    </div>
    <!-- More cards -->
  </div>
</body>
</html>
\`\`\`

## Phase 2 — Card Layouts

### Title Card (first)
A bold, eye-catching title. Centered, large typography, accent color background or dark solid.
\`\`\`css
.card-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-accent); color: #fff; }
.card-title .number { font-size: 14px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; }
.card-title h1 { font-size: 64px; font-weight: 800; line-height: 1.1; }
.card-title p { font-size: 24px; opacity: 0.9; margin-top: 16px; max-width: 600px; }
\`\`\`

### Content Card
\`\`\`css
.card-content { flex: 1; display: flex; flex-direction: column; padding: 64px; }
.card-content h2 { font-size: 42px; font-weight: 700; margin-bottom: 24px; }
.card-content p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
.card-content .number { font-size: 14px; color: var(--color-text-secondary); margin-top: auto; }
\`\`\`

### Stat Card
\`\`\`css
.card-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
.card-stat .stat-value { font-size: 120px; font-weight: 800; color: var(--color-accent); line-height: 1; }
.card-stat .stat-label { font-size: 24px; color: var(--color-text-secondary); margin-top: 16px; }
\`\`\`

### Quote Card
\`\`\`css
.card-quote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; }
.card-quote blockquote { font-size: 36px; font-style: italic; line-height: 1.4; max-width: 700px; }
.card-quote cite { font-size: 20px; color: var(--color-text-secondary); margin-top: 24px; font-style: normal; }
\`\`\`

### CTA Card (last)
\`\`\`css
.card-cta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; text-align: center; background: var(--color-bg-primary); }
.card-cta h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; }
.card-cta p { font-size: 24px; color: var(--color-text-secondary); margin-bottom: 32px; }
.card-cta .cta-text { font-size: 28px; font-weight: 600; color: var(--color-accent); }
\`\`\`

## Phase 3 — Content Rules

- Each card has a clear visual hierarchy: big number/headline → supporting text → card number
- Card number shows position (e.g., "1/8") in bottom corner
- Title card grabs attention — use solid accent or dark bg
- Content cards: 30-60 words max
- Stat cards: one big number, one-line label
- Last card: always a CTA or summary with contact/handle
- Consistent padding within cards (64-80px)
- Each card works as a standalone image when screenshot`,
    },
    {
        name: "design-brief",
        scenario: "design",
        description: "Parse a design brief into concrete tokens. Resolves 8 design dimensions (palette, accent, typography, display, layout, mood, density, constraints) from natural language or I-Lang structured format, then generates a DESIGN.md and visual preview.",
        outputKind: "html",
        workflow: `# Design Brief Skill

Parse a structured or natural-language design brief into a concrete DESIGN.md and optional visual preview HTML.

## Background

This skill resolves the 8 key design dimensions that every design artifact needs, using a closed vocabulary of symbolic values that map to concrete CSS tokens. It eliminates ambiguity from vague requests like "make it clean" or "make it professional."

## Phase 1 — Accept input

The user provides a design brief in one of two formats:

### Option A: I-Lang structured brief
\`\`\`
[PLAN:@DESIGN|type=saas_landing]
  |palette=navy_and_white|accent=coral
  |typography=inter|display=space_grotesk
  |layout=single_column|max_width=1200px
  |mood=professional_minimal
  |density=spacious|section_gap=96px
  |hero=headline+subhead+cta
  |sections=features,pricing,testimonials,footer
  |exclude=animations,parallax,gradients
  |responsive=mobile_first
\`\`\`

### Option B: Natural language
> "I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."

If the user provides Option B, convert it using the mapping table below, then proceed.

### Natural language → I-Lang mapping

| Natural language phrase | Dimension | I-Lang value |
|------------------------|-----------|-------------|
| "dark mode", "dark theme" | palette | \`monochrome_dark\` |
| "light", "white background" | palette | \`light_clean\` |
| "earthy", "warm tones" | palette | \`earth_tones\` |
| "pop of color", "vibrant" | accent | \`electric_blue\` or \`coral\` |
| "subtle accent" | accent | \`muted_sage\` or \`slate\` |
| "clean", "minimal", "simple" | mood | \`professional_minimal\` |
| "playful", "fun", "friendly" | mood | \`playful\` |
| "bold", "brutalist", "raw" | mood | \`brutalist\` |
| "editorial", "magazine-like" | mood | \`editorial\` |
| "spacious", "lots of whitespace" | density | \`spacious\` |
| "compact", "dense", "information-rich" | density | \`compact\` |
| "Inter", "system font" | typography | \`inter\` or \`system_ui\` |
| "serif", "traditional" | typography | \`georgia\` or \`playfair\` |
| "monospace", "code-like" | typography | \`jetbrains_mono\` |
| "no animations", "static" | exclude | \`animations\` |
| "no gradients" | exclude | \`gradients\` |
| "single page" | layout | \`single_column\` |
| "two columns", "sidebar" | layout | \`two_column\` |
| "mobile first" | responsive | \`mobile_first\` |

## Phase 2 — Validate 8 dimensions

Every design brief must resolve these 8 dimensions. If any are missing, select sensible defaults:

| # | Dimension | Key | Example values |
|---|-----------|-----|---------------|
| 1 | Color palette | \`palette\` | navy_and_white, earth_tones, monochrome_dark, light_clean |
| 2 | Accent color | \`accent\` | coral, electric_blue, emerald, muted_sage, slate |
| 3 | Body typography | \`typography\` | inter, system_ui, dm_sans, georgia |
| 4 | Display typography | \`display\` | space_grotesk, clash_display, same_as_body, playfair |
| 5 | Layout model | \`layout\` | single_column, two_column, asymmetric |
| 6 | Mood | \`mood\` | professional_minimal, playful, brutalist, editorial |
| 7 | Density | \`density\` | compact, balanced, spacious |
| 8 | Constraints | \`exclude\` | animations, gradients, stock_photos, carousel |

### Symbolic → concrete token resolution

| Symbolic value | Concrete tokens |
|---------------|----------------|
| \`palette=navy_and_white\` | Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8 |
| \`palette=monochrome_dark\` | Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA |
| \`palette=light_clean\` | Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B |
| \`palette=earth_tones\` | Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E |
| \`accent=coral\` | Accent: #F97316, Hover: #EA580C |
| \`accent=electric_blue\` | Accent: #3B82F6, Hover: #2563EB |
| \`accent=emerald\` | Accent: #10B981, Hover: #059669 |
| \`accent=muted_sage\` | Accent: #84A98C, Hover: #6B8F73 |
| \`accent=slate\` | Accent: #64748B, Hover: #475569 |
| \`density=compact\` | Section spacing: 48px, Content padding: 16px/24px |
| \`density=balanced\` | Section spacing: 72px, Content padding: 24px/40px |
| \`density=spacious\` | Section spacing: 96px, Content padding: 24px/48px |

### Default resolution rules

| Unspecified dimension | Default rule |
|----------------------|-------------|
| \`palette\` | If mood=editorial → \`light_clean\`. If mood=brutalist → \`monochrome_dark\`. Else → \`light_clean\`. |
| \`accent\` | If palette is dark → \`coral\`. If palette is light → \`electric_blue\`. |
| \`typography\` | Always → \`inter\` (highest cross-platform legibility). |
| \`display\` | If mood=editorial → \`playfair\`. If mood=brutalist → \`space_grotesk\`. Else → \`same_as_body\`. |
| \`layout\` | Always → \`single_column\`. |
| \`mood\` | Always → \`professional_minimal\`. |
| \`density\` | Always → \`balanced\`. |
| \`exclude\` | Always → none (no constraints unless specified). |

## Phase 3 — Generate DESIGN.md

Produce a DESIGN.md with these sections:
1. **Visual Theme & Atmosphere** — mood, feel, references
2. **Color Palette & Roles** — background, surface, text, accent, semantic colors
3. **Typography Rules** — display, body, mono font specs with sizes
4. **Component Stylings** — buttons, cards, inputs with concrete CSS values
5. **Layout Principles** — max width, grid, section spacing, content padding
6. **Depth & Elevation** — shadows, borders
7. **Do's and Don'ts** — 5-6 rules for agents
8. **Responsive Behavior** — breakpoints at 640px, 768px, 1024px, 1280px
9. **Agent Prompt Guide** — constraints for code generation

All color hex values, font stacks, and spacing values must come from the resolved tokens in Phase 2 — do not invent values.

## Phase 4 — Generate brief-preview.html

Create a single HTML file visualizing the resolved tokens with 4 sections:
1. **Color palette swatches** — labeled with role and hex code
2. **Typography specimens** — Display, Body, and Mono at declared sizes
3. **Spacing ruler** — section spacing and content padding, labeled
4. **Component preview** — 2-3 live components (button, card, input) using the resolved tokens

Style the preview itself with the resolved design system tokens.

## Phase 5 — Report defaults applied

List any dimensions the user did not specify and the defaults applied:
\`\`\`
Dimensions resolved from defaults:
- display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
- density: set to "balanced" (rule: no spacing preference given)
\`\`\`

This transparency prevents silent assumptions from propagating into the final design.`,
    },
    {
        name: "critique",
        scenario: "design",
        description: "5-dimension expert design review. Scores any HTML artifact on Philosophy Consistency, Visual Hierarchy, Detail Execution, Functionality, and Innovation (each 0-10). Outputs an HTML report with a radar chart, evidence-backed scores, and three action lists: Keep / Fix / Quick-wins.",
        outputKind: "html",
        workflow: `# Critique Skill · 5-Dimension Expert Review

Produce a single-file HTML design review report that scores any artifact across 5 dimensions and proposes actionable fixes.

## When to use
- After generating an artifact (deck, prototype, landing page) and the user asks "what's wrong with this?" or "review this"
- As a self-check loop before emitting output
- For comparing two variants of the same design

## The 5 Dimensions

### 1. Philosophy Consistency
> Does the artifact pick a clear direction and stick to it through every micro-decision?

Look for: one declared design direction vs three styles fighting; chrome/kicker vocabulary in one register; accent/serif/mono used by the same rule throughout.
0-4: Three styles fighting. 5-6: One direction but elements drift. 7-8: Coherent, occasional drift. 9-10: Every element argues for the same thesis.

### 2. Visual Hierarchy
> Can a stranger figure out what to read first, second, third — without being told?

Look for: largest type = most important thing; mono/serif/sans roles match information roles; clear primary/secondary/tertiary tiers.
0-4: Everything shouts. 5-6: Works on hero pages but breaks on body. 7-8: Clear tiers, occasional collision. 9-10: Eye moves with zero friction.

### 3. Detail Execution
> Alignment, leading, kerning at large sizes, image framing, edge-case spacing.

Look for: big numbers on baseline or floating; left/right column tops aligned; proportions consistent across pages; orphaned <br> causing single-character lines.
0-4: Visible tape and string. 5-6: Most pages clean, 1-2 ragged. 7-8: Polished, expert eye finds 2-3 misses. 9-10: Magazine-grade polish.

### 4. Functionality
> Does the artifact work for its intended use?

Look for: keyboard/wheel/touch nav working in decks; CTAs above the fold; phone numbers tappable on mobile; code blocks copyable; critical info readable from 4m away.
0-4: Visually fine but doesn't accomplish its job. 5-6: Core flow works, edge cases broken. 7-8: Robust through normal use. 9-10: Defensively engineered — handles iframe / fullscreen / paste / print.

### 5. Innovation
> Does this push past the median? Is there one element that makes people lean in?

Look for: one unexpected layout/motion/typographic move not required; or 100% safe generic output; innovation earned (matches direction) or grafted on.
0-4: Generic AI-slop median. 5-6: Competent and unmemorable. 7-8: One memorable moment, the rest solid. 9-10: Multiple moves you'd steal — each serving the thesis.

## Scoring Discipline
- **Always cite evidence** — "scored 4 because hero page mixes Playfair display with Inter sans on the same line" beats "feels inconsistent"
- **Don't average up** — if Hierarchy is 5 because page 3 is broken, don't bump to 7 because pages 1-2 are fine. The score is the worst sustained band.
- **Don't grade-inflate** — a 7 means strong, not acceptable. If every score is 7+, you're not reviewing critically.
- **Innovation is allowed to be low** — 5/10 is fine for production deliverables.

## Workflow

### Step 1 — Acquire the artifact
1. **Project file** — user said "review the index.html I just made": read it from the project folder.
2. **Pasted HTML** — user pasted code in chat: read it from the message.
3. **Self-critique** — you just emitted an artifact and want to self-critique: re-read your own output.

### Step 2 — Read enough to score
Skim the entire <style>, then read 6-8 representative content blocks. Do not score from intent alone — the score depends on executed design, not declared intent.

### Step 3 — Score with evidence
For each of the 5 dimensions, write the score and a 30-80 word evidence paragraph naming specific elements. Example:
\`\`\`
Dimension: Detail execution
Score: 6 / 10
Evidence: Stat-cards on page 3 align cleanly, but on page 8 the right column sits 2vh higher than the left because .callout has 3vh top margin while the figure doesn't. Image captions use mono on page 5 but sans on page 7 — pick one.
\`\`\`

### Step 4 — Build action lists
- **Keep** (3-5 bullets) — concrete things working that the user must not break. Cite by class/page/element.
- **Fix** (3-6 bullets) — must-do, ordered by visual cost saved per minute. Each bullet ≤ 1 sentence.
- **Quick wins** (3-5 bullets) — 5-15 minutes each, high signal-to-noise.

### Step 5 — Emit the report HTML
Build a single file with:
- Header: artifact name + date + reviewer + 1-line verdict
- Big radar chart (inline SVG, no library)
- 5 dimension cards in a 1-column or 2-column grid
- Three action lists at the bottom with checkbox affordance

Use the active design system tokens if one exists; otherwise default to a neutral light theme (white background, near-black text, one accent for radar fill).

## Radar Chart SVG Template
\`\`\`svg
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Pentagon grid lines -->
  <polygon points="200,40 352,152 294,340 106,340 48,152" fill="none" stroke="#e0e0e0" stroke-width="1"/>
  <polygon points="200,80 314,166 267,306 133,306 86,166" fill="none" stroke="#e0e0e0" stroke-width="1"/>
  <polygon points="200,120 276,180 240,272 160,272 124,180" fill="none" stroke="#e0e0e0" stroke-width="1"/>
  <!-- Score polygon (fill with accent at 20% opacity) -->
  <polygon points="..." fill="var(--accent, #3B82F6)" fill-opacity="0.2" stroke="var(--accent, #3B82F6)" stroke-width="2"/>
  <!-- Labels at each vertex -->
  <text x="200" y="30" text-anchor="middle" font-size="11">Philosophy</text>
  <text x="360" y="155" text-anchor="start" font-size="11">Hierarchy</text>
  <text x="300" y="355" text-anchor="middle" font-size="11">Detail</text>
  <text x="100" y="355" text-anchor="middle" font-size="11">Function</text>
  <text x="40" y="155" text-anchor="end" font-size="11">Innovation</text>
</svg>
\`\`\`

## Hard Rules
- **5 scores, every time** — partial reports are not allowed.
- **Evidence per score** — no "feels off" / "needs work". If you can't cite an element, the score is not justified.
- **Don't grade-inflate** — overall mean above 8 is suspicious.
- **Single-file HTML only** — no external CSS/JS. Inline everything.
- **Radar chart is mandatory** — gives the report a recognizable silhouette.`,
    },
    {
        name: "pricing-page",
        scenario: "marketing",
        description: "Standalone pricing page — header, plan tier cards, feature comparison table, and FAQ. Uses CSS Grid for plan rows and comparison table. 2-4 tiers with recommended tier accent.",
        outputKind: "html",
        workflow: `# Pricing Page Skill

Produce a single-screen pricing page that respects the active design system.

## Phase 1 — Classify the product

Pick a tier shape based on the brief:
- **3-tier** (most common): Free / Pro / Team or Starter / Growth / Enterprise
- **4-tier** when the brief says "scale" or "enterprise plus"
- **2-tier** when it says "individual / business" or "personal / pro"

## Phase 2 — Sections (in order)

1. **Hero** — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
   \`\`\`css
   .pricing-hero { text-align: center; padding: 80px 0 48px; }
   .toggle { display: inline-flex; border-radius: 999px; background: var(--surface); padding: 4px; margin-top: 24px; }
   .toggle button { padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
   .toggle button.active { background: var(--fg); color: var(--bg); }
   \`\`\`

2. **Plan cards** — one card per tier. Each card: tier name, price (display font + larger scale for the number), 1-line positioning, 4-6 bullet features, primary CTA.
   \`\`\`css
   .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
   .plan-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; display: flex; flex-direction: column; }
   .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
   .plan-card.recommended::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-on, white); padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
   .plan-name { font-size: 20px; font-weight: 600; }
   .plan-price { font-size: 48px; font-weight: 800; line-height: 1; margin: 16px 0 4px; font-family: var(--font-display, var(--font-body)); }
   .plan-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
   .plan-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
   .plan-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft, var(--border)); }
   \`\`\`

3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells. Group features into 2-3 logical sections (Core, Collaboration, Support, Security). Sticky header.
   \`\`\`css
   .comparison { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
   .comparison h2 { text-align: center; margin-bottom: 32px; }
   .comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
   .comparison-table th { text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--border); }
   .comparison-table th:not(:first-child) { text-align: center; }
   .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); }
   .comparison-table td:not(:first-child) { text-align: center; }
   .section-header td { font-weight: 600; background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
   \`\`\`

4. **FAQ** — 4-6 collapsible Q&A items using \`<details><summary>\` (no JS needed).
   \`\`\`css
   .faq { max-width: 720px; margin: 64px auto; padding: 0 24px; }
   .faq h2 { text-align: center; margin-bottom: 32px; }
   .faq details { border-bottom: 1px solid var(--border-soft, var(--border)); padding: 20px 0; }
   .faq summary { font-weight: 600; cursor: pointer; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
   .faq summary::after { content: "+"; font-size: 20px; }
   .faq details[open] summary::after { content: "−"; }
   .faq p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
   \`\`\`

5. **Footer CTA** — single line + button.

## Phase 3 — Content Rules
- Prices are plausible for the product (not "$X / month")
- Accent appears on the recommended tier and one CTA only
- No fake feature names — every row reads as something a real product would offer
- Comparison table renders cleanly at 1024px and stacks readably below 768px (scroll-x or stacked)

## Phase 4 — Anti-Slop Check
- [ ] Prices use specific numbers ($29, $79, $199)
- [ ] Recommended tier is visually distinct
- [ ] FAQ answers are concrete, not generic
- [ ] No price-related emoji (💸, 💰, 🤑)`,
    },
    {
        name: "docs-page",
        scenario: "engineering",
        description: "Documentation page — left sidebar nav (sticky), scrollable article body, right table of contents. Three-column layout with grouped navigation links, code blocks, callouts, and proper RTL support.",
        outputKind: "html",
        workflow: `# Docs Page Skill

Produce a single, three-column documentation page in one HTML file.

## Phase 1 — Pre-flight

1. Read the active design system. Use the body type token for prose; the mono token for code; respect line-height and max-width rules.
2. Pick a concrete topic from the brief — the page should look like real docs, not a generic wireframe. Concrete API names, command examples, plausible parameters.

## Phase 2 — Three-column layout

\`\`\`css
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 720px) 200px; gap: 0; min-height: 100vh; }

/* Left sidebar — sticky nav */
.docs-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 24px; border-right: 1px solid var(--border); background: var(--bg); }
.docs-nav-group { margin-bottom: 24px; }
.docs-nav-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding: 0 8px; }
.docs-nav-link { display: block; padding: 6px 8px; border-radius: 6px; font-size: 14px; color: var(--muted); text-decoration: none; }
.docs-nav-link:hover { color: var(--fg); background: var(--surface); }
.docs-nav-link.active { color: var(--fg); background: var(--surface); border-left: 2px solid var(--accent); margin-left: -2px; }

/* Article body */
.docs-article { padding: 48px 64px; max-width: 720px; }

/* Right TOC — sticky */
.docs-toc { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 32px 16px; border-left: 1px solid var(--border); font-size: 13px; }
.docs-toc-title { font-weight: 600; margin-bottom: 12px; }
.docs-toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; }
.docs-toc a:hover, .docs-toc a.active { color: var(--accent); }
\`\`\`

## Phase 3 — Article Components

### Code blocks
\`\`\`css
pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; margin: 24px 0; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
pre code { background: none; padding: 0; }
\`\`\`

### Callout boxes
\`\`\`css
.callout { border-left: 4px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--bg)); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; }
.callout.warning { border-color: var(--warn, #f59e0b); background: color-mix(in oklab, var(--warn, #f59e0b) 5%, var(--bg)); }
.callout-title { font-weight: 600; margin-bottom: 4px; }
\`\`\`

### Typography
\`\`\`css
.docs-article h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; }
.docs-article h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 48px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.docs-article h3 { font-size: 18px; font-weight: 600; margin-top: 32px; margin-bottom: 8px; }
.docs-article p { font-size: 16px; line-height: 1.7; margin: 12px 0; color: var(--fg); }
\`\`\`

## Phase 4 — Content Rules
- Navigation: 3-5 groups of 4-8 links each
- Article: H1, lede paragraph, H2 sections, code blocks, callouts (note/warning), inline links, lists
- TOC: "On this page" with H2 anchors, current section highlighted on scroll
- Concrete content: specific API names, command examples, plausible parameters — not placeholders
- Respect RTL: layout expressed on the inline axis so it flips correctly under dir="rtl"`,
    },
    {
        name: "blog-post",
        scenario: "content",
        description: "Blog article layout — title, author metadata, featured image, prose body with headings/images/quotes, related posts. Single-page, reading-optimized typography with comfortable measure.",
        outputKind: "html",
        workflow: `# Blog Post Skill

Produce a single blog article page with reading-optimized typography.

## Phase 1 — Structure

\`\`\`html
<article class="blog-post">
  <header class="post-header">
    <div class="post-category">Category</div>
    <h1>Article Title That Is Specific and Engaging</h1>
    <div class="post-meta">
      <span class="post-author">Author Name</span>
      <span class="post-date">Month DD, YYYY</span>
      <span class="post-read-time">N min read</span>
    </div>
  </header>
  <figure class="post-hero">
    <img src="..." alt="...">
    <figcaption>Image caption (optional)</figcaption>
  </figure>
  <div class="post-content">
    <!-- prose -->
  </div>
  <footer class="post-footer">
    <div class="post-tags"><!-- tag pills --></div>
    <section class="related-posts"><!-- 3 related cards --></section>
  </footer>
</article>
\`\`\`

## Phase 2 — Typography

\`\`\`css
.blog-post { max-width: 680px; margin: 0 auto; padding: 64px 24px; }

.post-header { margin-bottom: 32px; }
.post-category { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.post-header h1 { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
.post-meta { display: flex; gap: 16px; font-size: 14px; color: var(--muted); }

.post-hero { margin: 0 -24px 40px; }
.post-hero img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
.post-hero figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }

/* Prose — comfortable reading measure */
.post-content { font-size: 18px; line-height: 1.8; color: var(--fg); }
.post-content p { margin: 24px 0; }
.post-content h2 { font-size: 28px; font-weight: 600; margin: 48px 0 16px; }
.post-content h3 { font-size: 22px; font-weight: 600; margin: 36px 0 12px; }
.post-content blockquote { border-left: 3px solid var(--accent); padding: 8px 20px; margin: 32px 0; font-style: italic; color: var(--muted); }
.post-content ul, .post-content ol { padding-left: 24px; margin: 16px 0; }
.post-content li { margin: 8px 0; }
.post-content img { max-width: 100%; border-radius: 8px; margin: 24px 0; }
.post-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
.post-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 15px; line-height: 1.6; margin: 24px 0; }

/* Tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--border); }
.post-tag { padding: 4px 12px; background: var(--surface); border-radius: 999px; font-size: 13px; color: var(--muted); }

/* Related posts */
.related-posts { margin-top: 48px; }
.related-posts h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.related-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.related-card img { width: 100%; height: 140px; object-fit: cover; }
.related-card-content { padding: 16px; }
.related-card-content h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.related-card-content time { font-size: 12px; color: var(--muted); }
\`\`\`

## Phase 3 — Content Rules
- Article body: 800-2000 words of meaningful content (no lorem ipsum)
- Every heading is specific and informative
- Include at least one blockquote and one code block
- Feature image is a gradient shape if no real image
- Author bio is not generic — use a plausible name and role`,
    },
    {
        name: "magazine-poster",
        scenario: "creative",
        description: "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
        outputKind: "html",
        workflow: `# Magazine Poster Skill

Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.

## Phase 1 — Determine Format

- **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
- **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
- **Social cover** (square: 1080×1080px) — optimized for social sharing

## Phase 2 — Composition Modes

### Mode A: Typography-first
Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
\`\`\`css
.poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
.poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
.poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
.poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
\`\`\`

### Mode B: Image-first
Large image dominates 70% of the canvas, typography overlays or sits below.
\`\`\`css
.poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
.poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
.poster-text-block { padding: 48px 64px; }
\`\`\`

### Mode C: Split-screen
Two-panel composition — color block left, image right (or vice versa).
\`\`\`css
.poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
.poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
.poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
.poster-split-panel.right { background: var(--bg); }
\`\`\`

## Phase 3 — Typography Scale

\`\`\`css
/* Magazine typography is dramatic — go big */
.display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
.display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
.poster-body { font-size: 18px; line-height: 1.6; }
.poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
\`\`\`

## Phase 4 — Design Elements

- **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
- **Photo treatment**: Use mix-blend-mode on images over color backgrounds
- **Grid lines**: Thin horizontal/vertical rules as structural elements
- **Page numbers**: ALWAYS include an issue/volume/page-number block
- **Date line**: MONTH YYYY format in the masthead area

## Phase 5 — Anti-Kitsch Rules
- No emoji in editorial design
- Use the design system's display font at scale — not a safe web font
- Headline should create tension: unexpected word break, dramatic line split, or bold claim
- One focal point per poster — don't make everything compete
- white-space is intentional, not leftover`,
    },
    {
        name: "motion-frames",
        scenario: "creative",
        description: "CSS animation and motion design frames. Keyframe-driven animations, scroll-triggered reveals, staggered lists, loading states, and page transitions — all CSS-only where possible.",
        outputKind: "html",
        workflow: `# Motion Frames Skill

Produce a motion design showcase as a single HTML file. CSS keyframe animations, scroll-triggered effects, and subtle micro-interactions — no JavaScript libraries.

## Phase 1 — Animation Vocabulary

### Entrance Animations
\`\`\`css
/* Fade up */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Scale in */
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Slide from left */
@keyframes slideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

/* Reveal by clip-path */
@keyframes clipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
\`\`\`

### Scroll-Triggered Reveals
\`\`\`css
/* Use scroll-driven animations (modern browsers) */
.reveal {
  animation: fadeUp 0.6s ease-out;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}

/* Fallback: use Intersection Observer pattern in a small script */
.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
\`\`\`

### Staggered Lists
\`\`\`css
.stagger-list > * { opacity: 0; animation: fadeUp 0.4s ease-out forwards; }
.stagger-list > *:nth-child(1) { animation-delay: 0ms; }
.stagger-list > *:nth-child(2) { animation-delay: 80ms; }
.stagger-list > *:nth-child(3) { animation-delay: 160ms; }
.stagger-list > *:nth-child(4) { animation-delay: 240ms; }
.stagger-list > *:nth-child(5) { animation-delay: 320ms; }
.stagger-list > *:nth-child(6) { animation-delay: 400ms; }
/* Continue pattern: delay = (n-1) * 80ms up to n=20 */
\`\`\`

### Loading States
\`\`\`css
/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }

/* Skeleton pulse */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, color-mix(in oklab, var(--surface) 50%, var(--bg)) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; }

/* Progress bar */
@keyframes progress { from { width: 0%; } to { width: 100%; } }
.progress-bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; animation: progress 2s ease-out forwards; }
\`\`\`

### Hover Micro-Interactions
\`\`\`css
/* Subtle card lift */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* Button press */
.btn-press { transition: transform 0.1s ease; }
.btn-press:active { transform: scale(0.97); }

/* Link underline slide */
.link-slide { position: relative; text-decoration: none; }
.link-slide::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; }
.link-slide:hover::after { width: 100%; }

/* Image zoom */
.img-zoom { overflow: hidden; border-radius: 8px; }
.img-zoom img { transition: transform 0.3s ease; }
.img-zoom:hover img { transform: scale(1.05); }
\`\`\`

### Page Transitions (View Transitions API)
\`\`\`css
/* Add to :root for cross-fade transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

/* Named transitions for specific elements */
.hero-title { view-transition-name: hero-title; }
.hero-image { view-transition-name: hero-image; }
\`\`\`

## Phase 2 — Showcase Layout

Build a single HTML page demonstrating each animation category:
1. **Entrance section** — cards/stats that animate in on load
2. **Scroll reveal section** — content that appears as you scroll
3. **Staggered list** — feature list with cascading reveal
4. **Loading section** — skeleton screens next to real content
5. **Hover gallery** — cards with different hover treatments
6. **Interactive section** — buttons and links with micro-interactions

## Phase 3 — Motion Design Rules
- **Duration**: 150-400ms for micro-interactions; 400-800ms for entrances; DON'T use values above 1s
- **Easing**: ease-out for entrances (fast start, settle gracefully); ease-in-out for continuous animations
- **Stagger**: 60-100ms between children; maximum 20 items in a stagger
- **Performance**: animate transform and opacity only (no width/height/margin animations)
- **Respect reduced motion**: wrap animations in @media (prefers-reduced-motion: no-preference)
- **No animation on every element** — pick 2-3 key moments per page
- **Animation should communicate** — loading state, new content arriving, affordance — not just decoration`,
    },
];
/** Lookup a skill by name (case-insensitive). */
export function findSkill(name) {
    const lower = name.toLowerCase().trim();
    return (DESIGN_SKILLS.find((s) => s.name === lower) ??
        DESIGN_SKILLS.find((s) => s.name.startsWith(lower)));
}
/** Format a skill workflow as markdown for the LLM. */
export function formatSkillForLLM(skill) {
    return skill.workflow;
}
/** List all skills as compact markdown. */
export function listSkillsForLLM() {
    return [
        "# Available Design Skills",
        "",
        "Each skill is a structured workflow for producing a specific kind of design artifact. Read the skill workflow before starting.",
        "",
        ...DESIGN_SKILLS.map((s) => `- **${s.name}** (${s.scenario}) — ${s.description}`),
        "",
        `Total: ${DESIGN_SKILLS.length} skills available.`,
    ].join("\n");
}
