Refactor · move SKILL.md + references/ to repo root so 'npx skills add nutlope/hallmark' works

The published install command in the README — npx skills add nutlope/hallmark — was failing for users because the skills CLI looks for SKILL.md at the repo root, not at skill/SKILL.md where Hallmark kept it. The clone succeeded but the CLI reported "No skills found." Manual cp was the only working install path.

Flattened the layout:
- skill/SKILL.md            → SKILL.md
- skill/references/         → references/
- (skill/ directory removed; was empty after moves)

git mv preserved rename history for all 76+ files (SKILL.md + 28 reference files + 21 macrostructures + 46 components + 7 verb/genre subfolders).

Updated every cross-reference (36 occurrences across 9 files):
- README.md — 4 links (SKILL.md + references/ + the install snippet still reads the same)
- ROADMAP.md — 4 links to reference files
- package.json — "files" field + "skill" entry/references paths
- site/js/main.js — 3 source comments
- references/design-md.md — one broken link (was pointing skill/references/export-formats.md from inside references/ — now just export-formats.md as a sibling)
- site/_tests/verbs/study/notes.md, diagnosis.md and verbs/audit/audit-report.md, custom/README.md — test-artifact relative paths shortened by one segment (e.g. ../../../skill/SKILL.md → ../../../SKILL.md)

No skill content changes. After this lands, 'npx skills add nutlope/hallmark' should clone + install correctly without any manual cp fallback.

.hallmark/log.json

@@ -0,0 +1,3 @@
+[
+  { "date": "2026-05-18", "macrostructure": "Workbench", "theme": "Quiet", "enrichment": "Tier-A pure-CSS trace panel", "nav": "N5", "footer": "Ft2", "brief": "Flarepin · error-tracking SaaS for backend devs (Node/Python/Go)" }
+]

README.md

@@ -12,7 +12,7 @@ Powered by Together AI.
 
 Hallmark encodes the anti-AI-slop consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated rule-set. It picks a macrostructure for the brief, dresses it in one of twenty-two themes, runs sixty-five slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
 
-> **v1.0.0** — pre-emit critique on six axes, honest-copy enforcement, locked-token discipline, re-drawn-chrome ban, and a no-wrap rule for clickable text. Five new slop-test gates (56–60). The full rule-set lives in [`skill/SKILL.md`](skill/SKILL.md) and [`skill/references/`](skill/references/).
+> **v1.0.0** — pre-emit critique on six axes, honest-copy enforcement, locked-token discipline, re-drawn-chrome ban, and a no-wrap rule for clickable text. Five new slop-test gates (56–60). The full rule-set lives in [`SKILL.md`](SKILL.md) and [`references/`](references/).
 
 ---
 
@@ -91,8 +91,8 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la
 
 ## What's inside
 
-- **[`SKILL.md`](skill/SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 65-gate slop test, output contract, always-on `tokens.css` export.
-- **[`references/`](skill/references/)** — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the **40 component archetypes** with variation knobs (9 hero · 6 feature · 4 CTA · 4 testimonial · **8 footer · 9 nav**), the **4 hero polish patterns** (in `hero-enrichment.md`), the 6 primitive structure axes, the vision-extraction protocol for `study`, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays (each with nav + footer voice routing), per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).
+- **[`SKILL.md`](SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 65-gate slop test, output contract, always-on `tokens.css` export.
+- **[`references/`](references/)** — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the **40 component archetypes** with variation knobs (9 hero · 6 feature · 4 CTA · 4 testimonial · **8 footer · 9 nav**), the **4 hero polish patterns** (in `hero-enrichment.md`), the 6 primitive structure axes, the vision-extraction protocol for `study`, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays (each with nav + footer voice routing), per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).
 - **[`docs/`](docs/)** — human-reading content: **[`recipes.md`](docs/recipes.md)** (8 worked briefs + a canonical try-it prompt) and **[`study-examples.md`](docs/study-examples.md)** (3 worked DNA-extractions). Not auto-loaded by the skill.
 - **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-two themes** clustered into four genres: **editorial** (Specimen, Editorial, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
 
@@ -115,7 +115,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la
 - **SaaS page sequence.** Hero → social proof → features → testimonials → pricing → FAQ → CTA → footer. Real prices, not "contact sales for pricing." Specific testimonials with role + company.
 - **Wordmark may use a different display face.** A Geist-bodied SaaS page can set its wordmark in Fraunces. Same-family collapse on Bento / Stat-Led / Workbench / Marquee Hero is the new "un-branded" tell.
 - **`study` extracts DNA, not pixels.** Refusal heuristics, type-role vocabulary (no font ID guessing in image mode), confirmation step before any code. Accepts a screenshot *or* a URL — URL mode reads HTML / CSS via WebFetch and names exact fonts + exact tokens (trades the rhythm pass for accuracy on everything else), with a graceful screenshot fallback when the URL is auth-walled or a JS-only shell. Three worked examples in [`docs/study-examples.md`](docs/study-examples.md).
-- **Opt-in `design.md` lock-the-system flow — two entry points.** Iterate freely on the first builds; when the system is settled, say *"lock the system"* (or *"give me a design.md"*) and Hallmark extracts the build's tokens + voice into a portable design system at the project root. **Or**, after a `study` diagnosis, say *"lock the DNA"* and Hallmark emits the same `design.md` format seeded from the studied source — URL mode populates exact tokens + fonts; image mode populates estimated bands + candidate fonts. From that point on every Hallmark run defers to the file, the diversification rule inverts to consistency, and the file becomes the single source of truth for scaling the design across a real app. The study-mode emission carries a tighter refusal layer than the diagnosis itself — third-party URLs require user attestation (your own site / public reference for your own brand), competitors and paid templates are auto-refused. Phrase-triggered from either entry point, never auto-emitted. See [`skill/references/design-md.md`](skill/references/design-md.md).
+- **Opt-in `design.md` lock-the-system flow — two entry points.** Iterate freely on the first builds; when the system is settled, say *"lock the system"* (or *"give me a design.md"*) and Hallmark extracts the build's tokens + voice into a portable design system at the project root. **Or**, after a `study` diagnosis, say *"lock the DNA"* and Hallmark emits the same `design.md` format seeded from the studied source — URL mode populates exact tokens + fonts; image mode populates estimated bands + candidate fonts. From that point on every Hallmark run defers to the file, the diversification rule inverts to consistency, and the file becomes the single source of truth for scaling the design across a real app. The study-mode emission carries a tighter refusal layer than the diagnosis itself — third-party URLs require user attestation (your own site / public reference for your own brand), competitors and paid templates are auto-refused. Phrase-triggered from either entry point, never auto-emitted. See [`references/design-md.md`](references/design-md.md).
 
 ---
 

ROADMAP.md

@@ -19,7 +19,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re
 
 ### N.2  Nanobanana image generation inside Hallmark (image-led theme)
 
-**Status now.** [`assets.md`](skill/references/assets.md) lists Nanobanana as the canonical generated-still source (Tier C in the enrichment hierarchy) but the integration is *recommend-only* — Hallmark tells the user to go generate something and bring it back. No first-class image-led theme exists; image-heavy briefs route to a typography-only macrostructure and feel underserved.
+**Status now.** [`assets.md`](references/assets.md) lists Nanobanana as the canonical generated-still source (Tier C in the enrichment hierarchy) but the integration is *recommend-only* — Hallmark tells the user to go generate something and bring it back. No first-class image-led theme exists; image-heavy briefs route to a typography-only macrostructure and feel underserved.
 
 **Build.**
 1. **First-class Nanobanana hook.** When the brief signals "needs imagery" (e-commerce, travel, food, lookbook, gallery) and the user hasn't supplied real assets, Hallmark generates a brief for Nanobanana (style, subject, framing, palette tokens), invokes the API, ingests the returned image, and wires it into the build. Cache by prompt hash so re-runs are cheap.
@@ -34,7 +34,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re
 
 ### 1.1  Theme-aware microinteraction tokens
 
-**Status now.** [`microinteractions.md`](skill/references/microinteractions.md) describes a duration multiplier per theme as a table — but the multipliers aren't actually expressed in CSS. Atelier and Salon should *feel* slower than Brutal and Sport, but right now they share the same `--dur-short` / `--dur-long`.
+**Status now.** [`microinteractions.md`](references/microinteractions.md) describes a duration multiplier per theme as a table — but the multipliers aren't actually expressed in CSS. Atelier and Salon should *feel* slower than Brutal and Sport, but right now they share the same `--dur-short` / `--dur-long`.
 
 **Build.** Move `--dur-micro`, `--dur-short`, `--dur-long` into per-theme overrides in [`tokens.css`](site/css/tokens.css), scaled by the table in `microinteractions.md`. Newsprint and Terminal use `0ms` for spatial motion (they're print/terminal metaphors). One pass through the file; small diff.
 
@@ -74,7 +74,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re
 
 ### 2.1  `references/structural-cookbook.md` — concrete recipes
 
-**Status now.** [`structure.md`](skill/references/structure.md) catalogues the *axes* of structural variety. It doesn't show *what* a left-margin-headed, single-column, hairline-divided, unstyled-link, no-image, no-reveal page actually looks like assembled.
+**Status now.** [`structure.md`](references/structure.md) catalogues the *axes* of structural variety. It doesn't show *what* a left-margin-headed, single-column, hairline-divided, unstyled-link, no-image, no-reveal page actually looks like assembled.
 
 **Build.** A cookbook file with 12–20 *complete* structural fingerprints, each with a short HTML/CSS sketch, a paragraph explaining when to reach for it, and a real-world reference (NYT Mag, Stripe, Linear, Pentagram, etc.). The cookbook teaches the model patterns the same way recipe books teach cooking — through *worked examples*, not just *principles*.
 
@@ -134,7 +134,7 @@ This requires a new mapping: emotion → tone → fingerprint. Worth building on
 
 ### 3.4  Sound and haptic policy
 
-Currently [`microinteractions.md`](skill/references/microinteractions.md) says "no sound on web" — correct default. But Hallmark could ship a tiny module covering: when sound is appropriate (gaming, AAA brands, accessibility-augmenting); haptic feedback (Vibration API on mobile); and how to do them without crossing into kitsch. Small file; long horizon.
+Currently [`microinteractions.md`](references/microinteractions.md) says "no sound on web" — correct default. But Hallmark could ship a tiny module covering: when sound is appropriate (gaming, AAA brands, accessibility-augmenting); haptic feedback (Vibration API on mobile); and how to do them without crossing into kitsch. Small file; long horizon.
 
 ### 3.5  Live preview as a Claude Code MCP server
 

docs/talk-slides.md

@@ -0,0 +1,364 @@
+# Stop letting your agents ship ugly UIs.
+
+How to build well-designed UIs with AI agents.
+
+Hassan El Mghari · Together AI · AI Engineer World's Fair · 2026
+
+---
+
+> **About this deck** — this is a general playbook for any AI engineer, not a product pitch. Hallmark is mentioned once, on slide 15, as one open-source example our team built. The seven fixes apply to v0, Lovable, Bolt, Cursor, Claude Code, or any agent you're building yourself.
+>
+> **Visual style** — dark slate `#0b1117`, off-white ink `#e6edf3`, GitHub-cool-blue accent `#58a6ff`. Inter for type, Roboto Mono for code. Every slide chrome-free: no eyebrow labels, no decorative hairlines. Footer is the Together AI logo bottom-left and a page number bottom-right.
+>
+> **Cadence** — 17 slides, 18 minutes. ~60 seconds per slide. Section opener (S05) is a 10-second beat. S08 (wireframes), S11 (eight states), S13 (system prompt) want a moment.
+
+---
+
+## 01 · Cover
+
+# Stop letting your agents ship ugly UIs.
+
+*How to build well-designed UIs with AI agents.*
+
+— Hassan El Mghari · Together AI · AI Engineer World's Fair · 2026
+
+*Speaker: I'm Hassan, I lead DX at Together AI. Most of you have built an AI app this year and watched it ship a UI you'd never put on your portfolio. This talk is about why that happens, and seven concrete things that fix it — for any agent you use.*
+
+---
+
+## 02 · The problem
+
+# Here's what your agent ships today.
+
+*(Visual: the real DevForge screenshot — a generated developer-conference landing page. Purple-cyan gradient on the headline, centered hero, four-column stat row, Inter on Inter.)*
+
+> Vanilla prompt. Same shape every time.
+
+*Speaker: I gave the same prompt to a dozen agents — "build me a landing page for a developer conference, dark theme, in Brooklyn." This is roughly what every one of them returned. Different models, different stacks, same page.*
+
+---
+
+## 03 · The promise
+
+# It could ship this instead.
+
+*(Visual: the Hyperlane screenshot — same brief, rebuilt. Big sans-serif headline with an italic-serif accent, asymmetric layout, single warm accent, monospace meta.)*
+
+> Same brief. One missing layer added.
+
+*Speaker: Same brief. Same agent. The difference is the layer between the prompt and the output. We'll spend the rest of the talk on that layer.*
+
+---
+
+## 04 · Why
+
+# Models ship the mean of their training set.
+
+*Every SaaS site since 2019 trained on the same shape. Without external steering, the agent regresses to it.*
+
+> Every part of this is fixable with prompting and a small amount of structure.
+
+*Speaker: This isn't a model failure. Claude can render anything you describe. It's that "make me a landing page" maps to a region of the manifold where every SaaS site since 2019 lives. The good news: every fix from here is something you can do today, with any agent.*
+
+---
+
+## 05 · Section opener
+
+# Seven things that fix it.
+
+*Tool-agnostic. Works with v0, Lovable, Bolt, Cursor, Claude Code, or your own agent.*
+
+*Speaker: Each one of these closes a class of slop. Each one works today.*
+
+---
+
+## 06 · Fix 01 — Use a real component library
+
+# Use a real component library.
+
+shadcn/ui is the lingua franca of generated UI.
+Every major AI tool is trained on it. Linear, Vercel and Stripe ship it.
+Adopt it and your agent's output gets 80% better on day one.
+
+```bash
+$  npx shadcn@latest add button card dialog input table
+```
+
+→ *drop the components in. Now every AI generation composes from a real system, not from invented primitives.*
+
+*Speaker: This is the cheapest, highest-leverage move. Most AI engineers know about shadcn/ui. Fewer actually adopt it. v0 ships it natively. Cursor reads it. Claude Code reads it. The model has seen millions of examples of these components — it knows how to compose them.*
+
+---
+
+## 07 · Fix 02 — Pin a design system
+
+# Pin a design system.
+
+A single file at the root the agent reads on every render.
+One palette, one type pairing, one scale. No mid-render improvisation.
+
+```css
+/* DESIGN.md  or  app/globals.css  —  Tailwind v4  @theme block */
+
+@theme {
+   --color-paper:    oklch(0.13 0.01 250);   /* one surface, not five */
+   --color-ink:      oklch(0.93 0.01 250);   /* one ink */
+   --color-accent:   oklch(0.65 0.18 250);   /* one accent, under 5% */
+   --font-display:   "Inter Tight", sans-serif;
+   --font-body:      "Inter", sans-serif;
+   --space-1:        0.25rem;                /* 4-pt scale */
+   --ease-out:       cubic-bezier(.2,0,0,1);
+}
+```
+
+*Speaker: Tailwind v4 made this easier than it used to be. One `@theme` block, OKLCH for color, semantic names. Drop a `DESIGN.md` next to it that describes the brand in plain English — what the brand sounds like, what it isn't. The agent reads both on every run.*
+
+---
+
+## 08 · Fix 03 — Ask for a shape
+
+# Ask for a shape, not a list of features.
+
+*Stop saying "hero with three features." Say marquee. bento. long-document. stat-led.*
+
+*(Visual: four abstract wireframes drawn in Figma showing each shape.)*
+
+- **MARQUEE** · one editorial idea, biased left
+- **LONG DOCUMENT** · reads like a letter, no marketing chrome
+- **BENTO** · many entries, irregular grid
+- **STAT-LED** · product is the headline; numbers carry it
+
+*Speaker: This is the move that breaks the "every page looks like a SaaS landing" attractor. Don't enumerate features. Pick a category of page. The same way Linear's home and Stripe's home don't share a shape — they share a category.*
+
+---
+
+## 09 · Fix 04 — Show a reference
+
+# Paste a screenshot. Don't describe it.
+
+AI sees more than it reads.
+A reference image carries more taste than a paragraph of adjectives.
+
+```
+→  pick a real site you admire.
+→  ask the agent to extract the structure, not copy the pixels.
+→  name the role of the type ("italic editorial serif"), not the font.
+```
+
+*(Visual right: a real screenshot of calendly.com — the reference you'd actually paste.)*
+
+> example · pasted calendly.com to the agent
+
+*Speaker: Designers have always done this — "make it feel like this." Until recently your agent had no equivalent. Now it does. Don't describe taste. Show it. And ask the model to extract structure, not pixels — what you want is the rhythm, not a knock-off.*
+
+---
+
+## 10 · Fix 05 — Ban the tells
+
+# Tell it what you DON'T want.
+
+*Constraints beat instructions. Put these in your system prompt:*
+
+- ✕  Purple → blue gradient hero
+- ✕  Inter / Roboto as display AND body
+- ✕  Three equal columns with icon-above-heading
+- ✕  `min-height: 100vh`, everything centered
+- ✕  Cards inside cards (no semantic reason)
+- ✕  `background-clip` text gradients on headlines
+- ✕  Pure `#000` or pure `#fff` as a surface
+- ✕  Invented metrics, testimonials, or logos
+
+*Speaker: Counterintuitive but true: telling the model what NOT to do is stronger than describing what you want. These eight tells are the fingerprints of AI-generated UI. Ban them and the model has to reach somewhere else.*
+
+---
+
+## 11 · Fix 06 — Eight states
+
+# Every interactive element ships eight states.
+
+*If the agent emits two, your UI ships broken.*
+
+*(Visual: eight actual buttons in a 4-by-2 grid, each visibly in a different state — default, hover, focus-visible, active, disabled, loading, error, success.)*
+
+| state | what makes it different |
+| --- | --- |
+| `default` | the resting style |
+| `hover` | one shade lighter |
+| `:focus-visible` | a 2px accent ring, instant (no fade-in) |
+| `:active` | inverted ink, accent fill |
+| `disabled` | 50% opacity, no pointer |
+| `loading` | `· · · working` |
+| `error` | red border, ⚠ retry |
+| `success` | green border, ✓ saved |
+
+*Speaker: This is the single fastest "real or vibes" test you can run on AI output. Tab into the page. Disable a field. Make something load. If three of the eight states are unstyled, the agent shipped a screenshot, not a component.*
+
+---
+
+## 12 · Fix 07 — Critique before emit
+
+# Make the agent grade its own work — first.
+
+*One line in the system prompt forces a critical pass before output. Two passes is normal.*
+
+- **DISTINCTIVENESS** · does this look like THIS brief — or any brief
+- **HIERARCHY** · can a reader tell first / second / third in 2 seconds
+- **EXECUTION** · are the details right (rules, spacing, focus rings)
+- **RESTRAINT** · cut what doesn't earn its place
+
+Score each 1–5. Anything below 3 → revision pass.
+
+*Speaker: The trick isn't the rubric — it's forcing the model to look at its own output critically before it returns. Two passes is normal. Three passes means the brief is too vague.*
+
+---
+
+## 13 · The whole playbook
+
+# You can fit the whole playbook in one paragraph.
+
+```md
+# system_prompt.md
+
+You are a designer, not a templater. Before you write code:
+
+  1. use shadcn/ui — never re-invent a primitive that already exists.
+  2. read  DESIGN.md  for tokens. Use only those.
+  3. pick ONE page shape (marquee, long-document, bento, stat-led, manifesto, catalogue).
+  4. ban: purple-cyan gradients, Inter on Inter, 3-col icon grids, 100vh centered hero,
+     card-in-card, background-clip text, pure #000 / #fff, invented metrics.
+  5. ship 8 states for every interactive element.
+  6. score  Distinctiveness · Hierarchy · Execution · Restraint  on 1–5.
+     anything <3 triggers a revision pass.
+```
+
+*Speaker: That's it. Seven lines. Drop this in any agent's system prompt — Cursor `.mdc`, Claude Code skill, v0 project instructions. Feel the difference on the next render.*
+
+---
+
+## 14 · Tools
+
+# Pick your weapon.
+
+*Same seven fixes. Different surfaces.*
+
+| | | |
+| --- | --- | --- |
+| **v0** | shadcn / Tailwind playground | best UI quality out of the box |
+| **Lovable** | full-stack chat-and-build | edit visually, ship live |
+| **Bolt** | fast prototyping in StackBlitz | speed |
+| **Cursor** | in-IDE assistant | lives in your editor |
+| **Claude Code** | agent loop · file-aware · skills | longest-context coder |
+
+*Speaker: All of these can do beautiful work if you put the seven fixes in. Pick the one that matches your stack.*
+
+---
+
+## 15 · Hallmark — one example our team open-sourced
+
+# Hallmark.
+
+*One example our team open-sourced.*
+
+A Claude Code skill that bakes all seven fixes in.
+
+→ `github.com/nutlope/hallmark`
+
+*(Visual: the Hallmark OG image — "The best landing pages built with AI" with three real example pages baked in.)*
+
+*Speaker: We packaged the seven fixes into a Claude Code skill for ourselves at Together AI, then open-sourced it. It's one approach — there are others (Anthropic's frontend-design skill, Taste, Impeccable, others). The principle is the same: stop letting the agent invent the rules. Hand it a system.*
+
+---
+
+## 16 · The big idea
+
+# Design taste is a layer in the agent stack.
+
+```
+MODELS
+TOOLS
+MEMORY
+RAG
+EVALS
+TASTE   ← here
+ORCHESTRATION
+```
+
+*If you don't put it in the stack, the model picks the mean.*
+
+*Speaker: We treat eval as a first-class layer because we know models will optimize for the wrong thing without it. Taste is the same — not a polish step you add at the end. A layer. Same stack you already build with. New row.*
+
+---
+
+## 17 · Thanks
+
+# Thanks.
+
+```
+github.com/nutlope/hallmark
+together.ai
+```
+
+`@nutlope`   `@YoussefXLM`
+
+*(Visual right: a real QR code linking to the Hallmark repo.)*
+
+> scan to install
+
+*Speaker: Thanks. The skill is open today. I'd love to see what you build with it — and what fixes you'd add to your own agent's stack.*
+
+---
+
+# Designer / production notes
+
+**Chrome — kept minimal on purpose**
+
+- No eyebrow labels at the top of slides.
+- No decorative hairlines, dividers, or accent rules.
+- Footer is two elements only: the Together AI logo bottom-left (32×32), and the slide number bottom-right.
+- Functional rectangles (code-block surfaces, button shapes on S11, axis cards on S12) are kept — they carry content.
+
+**Palette — locked**
+
+- BG `#0b1117` (deep slate)
+- Surface `#161b22` (code blocks, cards)
+- Ink primary `#e6edf3`
+- Ink secondary `#7d8590`
+- Accent `#58a6ff` (GitHub cool blue — links, key labels, accent fills)
+- Alert `#f85149` (only on Fix 05 ban list and Fix 06 error button)
+- Success `#3fb950` (only on Fix 06 success button)
+
+**Type**
+
+- Display: Inter (Black / Bold weights at huge sizes)
+- Body: Inter Regular / Light
+- Code & mono labels: Roboto Mono
+
+**Pacing**
+
+17 slides for an 18-minute slot ≈ 60 seconds per slide. The section opener (S05) is a 10-second beat. The system-prompt slide (S13) wants a moment for Hassan to read it out loud. The Hallmark slide (S15) is intentionally quiet — read the label, don't dwell.
+
+**If running long**
+
+In order: S04 (Why — can fold into S02 narration), S16 (the stack diagram — can be one sentence after S15). Never drop S05, S08, S09, S11.
+
+**If running short**
+
+Add a live demo after S09. Paste a screenshot of a designed site, run the agent, show the output. 90 seconds max.
+
+**The markdown deliverable**
+
+This file (`docs/talk-slides.md`) is the canonical copy. If the Figma file gets reorganized, this stays authoritative.
+
+---
+
+# Sources
+
+- ["shadcn/ui March 2026 Update: CLI v4, AI Agent Skills and Design System Presets"](https://medium.com/@nakranirakesh/shadcn-ui-march-2026-update-cli-v4-ai-agent-skills-and-design-system-presets-d30cf200b0e9)
+- ["AI-First UIs: Why shadcn/ui's Model is Leading the Pack" — Refine](https://refine.dev/blog/shadcn-blog/)
+- ["Design Systems for the Vibe-Coding Era" — Anna Arteeva, Design Systems Collective](https://www.designsystemscollective.com/design-systems-for-the-vibe-coding-era-42282e1affef)
+- [Anthropic — "Improving frontend design through Skills"](https://claude.com/blog/improving-frontend-design-through-skills)
+- ["v0 by Vercel — Complete Guide 2026"](https://www.nxcode.io/resources/news/v0-by-vercel-complete-guide-2026)
+- ["The Vibe-Coder's Prompting Guide" — Anna Arteeva, Medium](https://annaarteeva.medium.com/the-vibe-coders-prompting-guide-e04ba0295a18)
+- ["Choosing your AI prototyping stack: Lovable, v0, Bolt, Replit, Cursor, Magic Patterns" — Anna Arteeva, Medium](https://annaarteeva.medium.com/choosing-your-ai-prototyping-stack-lovable-v0-bolt-replit-cursor-magic-patterns-compared-9a5194f163e9)
+- [AI Engineer World's Fair 2026 — Jun 29 – Jul 2](https://www.ai.engineer/worldsfair)
+- [Hassan El Mghari · DX at Together AI](https://www.nutlope.com/)

package.json

@@ -18,12 +18,12 @@
   "license": "MIT",
   "type": "module",
   "files": [
-    "skill/SKILL.md",
-    "skill/references"
+    "SKILL.md",
+    "references"
   ],
   "skill": {
-    "entry": "skill/SKILL.md",
-    "references": "skill/references",
+    "entry": "SKILL.md",
+    "references": "references",
     "harnesses": [
       "claude-code",
       "cursor",

references/design-md.md

@@ -98,7 +98,7 @@ to it. Amend intentionally — the file is the rule.
 `tokens.css` (in this project) is the source of truth. For Tailwind v4
 `@theme`, DTCG `tokens.json`, or shadcn/ui CSS variables, ask *"extend
 design.md with Tailwind exports"* (or the format you want) — Hallmark will
-append them per [`export-formats.md`](skill/references/export-formats.md).
+append them per [`export-formats.md`](export-formats.md).
 ````
 
 State the picks aloud BEFORE writing the file. *"Genre: editorial. Macrostructure: Long Document. Theme: catalog Editorial. Locking this as the project's system."* Then write.