@aexol/spectral 0.9.269 → 0.9.271

package/dist/designer/data/skills/dashboard.ts

@@ -1,168 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const dashboard: DesignSkill = {
-    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`,
-  };

package/dist/designer/data/skills/design-brief.d.ts

@@ -1,3 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-export declare const designBrief: DesignSkill;
-//# sourceMappingURL=design-brief.d.ts.map

package/dist/designer/data/skills/design-brief.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-brief.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/design-brief.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,WA6IvB,CAAC"}

package/dist/designer/data/skills/design-brief.js

@@ -1,141 +0,0 @@
-export const designBrief = {
-    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.`,
-};

package/dist/designer/data/skills/design-brief.ts

@@ -1,144 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const designBrief: DesignSkill = {
-    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.`,
-  };

package/dist/designer/data/skills/design-skill.d.ts

@@ -1,10 +0,0 @@
-export interface DesignSkill {
-    name: string;
-    scenario: string;
-    description: string;
-    /** What kind of artifact this produces */
-    outputKind: "html" | "html-multi" | "slides";
-    /** The full workflow guide for the LLM */
-    workflow: string;
-}
-//# sourceMappingURL=design-skill.d.ts.map

package/dist/designer/data/skills/design-skill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-skill.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/design-skill.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC7C,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;CACjB"}

package/dist/designer/data/skills/design-skill.js

@@ -1 +0,0 @@
-export {};

package/dist/designer/data/skills/design-skill.ts

@@ -1,9 +0,0 @@
-export interface DesignSkill {
-	name: string;
-	scenario: string;
-	description: string;
-	/** What kind of artifact this produces */
-	outputKind: "html" | "html-multi" | "slides";
-	/** The full workflow guide for the LLM */
-	workflow: string;
-}

package/dist/designer/data/skills/docs-page.d.ts

@@ -1,3 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-export declare const docsPage: DesignSkill;
-//# sourceMappingURL=docs-page.d.ts.map

package/dist/designer/data/skills/docs-page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"docs-page.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/docs-page.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,WAoEpB,CAAC"}

package/dist/designer/data/skills/docs-page.js

@@ -1,68 +0,0 @@
-export const docsPage = {
-    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"`,
-};

package/dist/designer/data/skills/docs-page.ts

@@ -1,71 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const docsPage: DesignSkill = {
-    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"`,
-  };

package/dist/designer/data/skills/index.d.ts

@@ -1,3 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-export declare const DESIGN_SKILLS: DesignSkill[];
-//# sourceMappingURL=index.d.ts.map

package/dist/designer/data/skills/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAerD,eAAO,MAAM,aAAa,EAAE,WAAW,EActC,CAAC"}