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.`,
  };