@aexol/spectral 0.9.269 → 0.9.271

package/dist/designer/data/skills/blog-post.js

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

package/dist/designer/data/skills/blog-post.ts

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

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

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

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

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

package/dist/designer/data/skills/critique.js

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

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

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

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

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

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

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

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

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