howone 0.1.20 → 0.1.23

package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/style.css

@@ -0,0 +1,262 @@
+/* Hallmark · macrostructure: Catalogue · F1 catalogue knobs: tiles=8, columns=2, rule=hairline-between
+ * theme: custom · vibe: "moss, lichen, soft pink, herbal" · paper: oklch(96% 0.018 145) · accent: oklch(72% 0.13 350)
+ * display: Cormorant Garamond · body: EB Garamond · axes: light / roman-serif / chromatic-other (dusty-pink)
+ * studied: no · context: explicit · v0.7.0
+ */
+
+:root {
+  /* Custom palette — moss-tinted paper with dusty-pink accent */
+  --color-paper: oklch(96% 0.018 145);
+  --color-paper-2: oklch(93% 0.020 145);
+  --color-paper-3: oklch(90% 0.022 145);
+  --color-rule: oklch(82% 0.018 145);
+  --color-rule-2: oklch(86% 0.018 145);
+  --color-muted: oklch(56% 0.014 140);
+  --color-neutral: oklch(46% 0.014 140);
+  --color-ink: oklch(22% 0.014 140);
+  --color-ink-2: oklch(42% 0.014 140);
+  --color-accent: oklch(72% 0.13 350);
+  --color-accent-ink: oklch(96% 0.014 145);
+  --color-focus: oklch(70% 0.18 350);
+
+  --font-display: "Cormorant Garamond", "EB Garamond", "Cardo", Georgia, serif;
+  --font-body: "EB Garamond", "Crimson Pro", "Cardo", Georgia, serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 140ms;
+}
+
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page {
+  max-width: 64rem;
+  margin: 0 auto;
+  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
+}
+
+/* Masthead — apothecary plate */
+.masthead {
+  text-align: center;
+  border-block-end: 2px double var(--color-rule);
+  padding-block-end: var(--space-lg);
+  margin-block-end: var(--space-2xl);
+}
+
+.masthead__rule {
+  width: 4ch;
+  border: 0;
+  border-block-start: 1px solid var(--color-ink);
+  margin: 0 auto var(--space-md);
+}
+
+.masthead__brand {
+  font-family: var(--font-display);
+  font-size: clamp(2.75rem, 6vw, 4.5rem);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0.005em;
+  margin: 0 0 var(--space-2xs);
+  color: var(--color-ink);
+}
+
+.masthead__brand .em { color: var(--color-accent); font-style: italic; }
+
+.masthead__sub {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-2);
+  margin: 0;
+}
+
+/* Today's batch */
+.todays {
+  text-align: center;
+  margin-block-end: var(--space-xl);
+}
+
+.todays__head {
+  font-family: var(--font-display);
+  font-size: clamp(1.625rem, 3vw, 2.25rem);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  margin: 0 0 var(--space-2xs);
+  color: var(--color-ink);
+}
+
+.todays__date {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--color-muted);
+  margin: 0;
+}
+
+/* Catalogue grid */
+.catalogue {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+  border-block-start: 1px solid var(--color-rule);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: 96px 1fr auto;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-lg) var(--space-md);
+  border-block-end: 1px solid var(--color-rule);
+  position: relative;
+  transition: background var(--dur-micro) var(--ease-out);
+}
+
+.item:nth-child(odd) { border-inline-end: 1px solid var(--color-rule); }
+.item:hover { background: var(--color-paper-2); }
+
+.item__shape {
+  width: 96px;
+  height: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-ink-2);
+}
+
+.item__shape svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.item__shape--accent svg { stroke: var(--color-accent); }
+
+.item__body { min-width: 0; }
+
+.item__name {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.005em;
+  margin: 0 0 var(--space-3xs);
+  color: var(--color-ink);
+}
+
+.item__name em { font-style: italic; color: var(--color-accent); }
+
+.item__desc {
+  font-family: var(--font-body);
+  font-style: italic;
+  font-size: 0.9375rem;
+  color: var(--color-ink-2);
+  margin: 0;
+  line-height: 1.45;
+}
+
+.item__price {
+  font-family: var(--font-display);
+  font-size: 1.0625rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+  white-space: nowrap;
+}
+
+.item__price--out {
+  color: var(--color-muted);
+  font-style: italic;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+}
+
+/* Visit */
+.visit {
+  margin-block-start: var(--space-2xl);
+  padding: var(--space-xl) var(--space-md);
+  border-block-start: 2px double var(--color-rule);
+  border-block-end: 2px double var(--color-rule);
+  text-align: center;
+}
+
+.visit__head {
+  font-family: var(--font-display);
+  font-size: 1.625rem;
+  font-weight: 400;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+
+.visit__lines {
+  display: grid;
+  gap: var(--space-2xs);
+  font-family: var(--font-body);
+  font-size: 1rem;
+}
+
+.visit__lines em { font-style: italic; color: var(--color-ink-2); }
+.visit__lines strong { font-weight: 500; color: var(--color-ink); }
+
+/* Colophon */
+.colophon {
+  margin-block-start: var(--space-2xl);
+  text-align: center;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.875rem;
+  color: var(--color-muted);
+}
+
+.colophon a {
+  color: var(--color-muted);
+  text-decoration: none;
+  border-block-end: 1px solid transparent;
+  transition: color var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out);
+}
+
+.colophon a:hover, .colophon a:focus-visible {
+  color: var(--color-accent);
+  border-block-end-color: var(--color-accent);
+}
+
+.colophon a:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 4px;
+}
+
+@media (max-width: 48rem) {
+  .catalogue { grid-template-columns: 1fr; }
+  .item:nth-child(odd) { border-inline-end: none; }
+  .item { grid-template-columns: 64px 1fr auto; gap: var(--space-sm); padding: var(--space-md) var(--space-2xs); }
+  .item__shape { width: 64px; height: 64px; }
+  .item__name { font-size: 1.25rem; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/custom/README.md

@@ -0,0 +1,30 @@
+# Custom worked examples
+
+Three landing pages produced by the **custom** theme route — the new opt-in branch added to Hallmark in v0.6.x. Custom is the route for one-off custom palettes + font pairings tuned to a single brand. **Catalog** (the 16 named themes) is the default; custom fires only when the brief signals creative or unique intent.
+
+These three pages are the worked examples written into [`references/custom-theme.md`](../../../references/custom-theme.md) § G — rendered as actual HTML so the palette + pairing can be inspected visually.
+
+| # | Brand | Vibe | Anchor | Macrostructure | Axes |
+| --- | --- | --- | --- | --- | --- |
+| 01 | **Coffeebox** — small-batch coffee subscription | "archival warmth, hand-set, no varnish" | terracotta | Long Document | light / italic-serif / chromatic-terracotta |
+| 02 | **Loop** — payment-rail observability for fintechs | "industrial precision, cool, technical" | sea-blue | Workbench | dark / mono / cool |
+| 03 | **Mossroot** — herbal apothecary in Porto | "moss, lichen, soft pink, herbal" | (skipped — derived) | Catalogue | light / roman-serif / chromatic-other (dusty-pink) |
+
+Each folder holds:
+
+- **`index.html`** — the rendered page
+- **`style.css`** — custom palette + pairing as inline `:root` tokens, with the custom stamp at the top
+
+## What custom unlocks
+
+The 16 named themes can't carry every brand. Coffeebox is closest to **Atelier** but warmer + more terracotta-led; Loop is closest to **Midnight** but mono-everywhere and sea-blue not phosphor-cyan; Mossroot has no catalog match (moss-tinted paper with dusty-pink accent isn't in the catalogue). Without custom, all three pages would compromise on the brand voice. With custom, the palette + pairing are tuned to the specific vibe — and every existing rule (OKLCH bands, accent footprint, font ban list, slop test) carries forward unchanged. The freedom is the combination, not the rules.
+
+## What guards prevent over-invention
+
+1. **The opt-in is opt-in.** Custom fires only when the user signals creative/unique intent in their prompt (named brand colour, multi-attribute aesthetic that doesn't match a catalog theme name, explicit "make it custom"). Default route is catalog — no behavioural change for vanilla briefs.
+2. **One question only.** The skill asks vibe (4–8 words) + optional anchor colour. Anything more is over-asking.
+3. **Every existing rule applies.** color.md OKLCH bands, typography.md pairing catalogue, anti-patterns.md ban list, the 38 slop-test gates — same gates fire as on catalog themes.
+4. **The Step 5 preview surfaces the palette + pairing.** Before any code is emitted, the user sees the OKLCH values and the chosen fonts in plain text. They can redirect early.
+5. **Diversification is theme-route-blind.** Each custom run records its three axis values (paper-band / display-style / accent-hue) in `.hallmark/log.json`. The next run rotates against them the same way it does against catalog themes.
+
+See [`references/custom-theme.md`](../../../references/custom-theme.md) for the full protocol.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/README.md

@@ -0,0 +1,17 @@
+# Hallmark verbs — worked examples
+
+Each verb demonstrated on a tiny, realistic input. Folders contain the input, the verb's output, and a one-page note explaining what fired and why.
+
+| Verb | Folder | Input | What the verb does |
+| --- | --- | --- | --- |
+| `audit` | [`audit/`](audit/) | An AI-templated landing fragment | Read it, score against the anti-pattern list, return a ranked punch list. **Does not edit.** |
+| `redesign` | [`redesign/`](redesign/) | A page with the AI structural template (centered hero · 3 cards · CTA · footer) | Throw out the structure, rebuild with a different fingerprint. **Preserves copy + IA.** |
+| `study` | [`study/`](study/) | A described screenshot of a Pentagram-style portfolio | Extract DNA — macrostructure, archetypes, type-pairing role, accent — return a diagnosis report, then rebuild user content with that DNA. **Never copies pixels.** |
+
+Each folder holds:
+
+- **`input.html`** (or `input-description.md` for `study`) — what the user paste / attach.
+- **`output.*`** — what the verb produces. For `audit` and `study`, this is a Markdown report. For `redesign`, this is a finished `index.html` + `style.css`.
+- **`notes.md`** — one page explaining what fired, what reference files loaded, and what the durable artifact is.
+
+The three verb tests together exercise every load path in the skill that the default-flow tests don't.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/audit-report.md

@@ -0,0 +1,56 @@
+# `hallmark audit input.html`
+
+> User invocation: *"hallmark audit input.html"*
+
+## Verbs loaded
+
+- [`anti-patterns.md`](../../../references/anti-patterns.md) — the named-tells library to score against
+- [`structure.md`](../../../references/structure.md) — for the structural-fingerprint check (gate 9)
+- [`microinteractions.md`](../../../references/microinteractions.md) — the timing/easing canon
+
+(No write paths. `audit` does not edit.)
+
+## Findings — `input.html` (148 lines, 1 stylesheet inline)
+
+### CRITICAL — page ships as slop · 5 findings
+
+| # | Tell | Where | Fix |
+| --- | --- | --- | --- |
+| 1 | **AI structural template** — hero (centered, 100vh) → 3-equal feature grid → CTA → footer. The fingerprint that screams "AI-generated UI". | full page · `<section class="hero">` (l. 79) → `.features` (l. 96) → `.cta` (l. 113) → `<footer>` (l. 121) | Pick a non-Hero+3-Card macrostructure from `macrostructures.md`. For an AI/SaaS positioning brief, `Bento Grid`, `Stat-Led`, or `Workbench` is right. **This is a structural finding — the visual fixes won't save it.** |
+| 2 | **Inter as display font** | `body { font-family: 'Inter' }` (l. 10) | Pair a distinctive display face with body. Geist Mono + Geist; Newsreader + Inter Tight; Bricolage + Söhne. Single-Inter is the LLM-default. |
+| 3 | **Purple-to-blue gradient on the hero headline** (`background-clip: text`) | `.hero h1` (l. 24-29) | Single ink colour for the headline. Reserve gradient for one specific decorative band, never for headline text. |
+| 4 | **Pure `#fff` and pure `#000` as base colours** | `body { background: #fff; color: #000; }` (l. 11-12) | OKLCH paper at 96–98 % L with a slight hue tint (warm or cool); ink at 18–22 % L tinted to match. Pure-white + pure-black reads industrial-template. |
+| 5 | **Cards have a thick coloured side-stripe + the same gradient-icon on every card + nested card inside one card** | `.feature-card { border-left: 4px solid #8b5cf6 }` (l. 110); `.nested-card` (l. 134); icon-wrap gradient (l. 122) | Drop the side-stripe entirely. Drop the icon-above-headline pattern. Drop the nested card (cards inside cards is the boy-band tell). If you need three feature blocks, ship them as numbered prose rows or a 2-up asymmetric pair, not 3-up icon tiles. |
+
+### MAJOR — looks AI-generated · 6 findings
+
+| # | Tell | Where | Fix |
+| --- | --- | --- | --- |
+| 6 | **`transition: all`** with bouncy easing on `.btn`, `.feature-card`, `.cta button` | l. 41, l. 117, l. 130 | Specify properties: `transition: transform 100ms var(--ease-out), border-color 200ms var(--ease-out)`. Bouncy `cubic-bezier(0.34, 1.56, ...)` is reserved for *physical* interactions (drag, drop, throw); UI state changes get the named easings. |
+| 7 | **`hover: scale(1.05) translateY(-2px)` + shadow + transform on the same element** | `.btn:hover` (l. 41), `.feature-card:hover` (l. 116), `.cta button:hover` (l. 132) | One hover effect, not three. Pick one of: subtle border-colour shift, subtle background tint, or a 1 px translate. Drop the rest. Multi-property hover is an AI-default tell. |
+| 8 | **Animating `transform` + adding `box-shadow` + colour change in 300 ms** — at least three layout-perceived properties at once | `.btn:hover` (l. 41) | The hover state should change one observable thing in 100–150 ms. The user knows it's interactive; you're not selling them. |
+| 9 | **Cliché copy** — "AI-powered platform for modern teams", "ship faster, collaborate smarter", "Built for the modern team", "Get up and running in seconds", "50,000+ teams" | l. 80, l. 81, l. 110-111, l. 117 | Replace template phrases with claims specific to *this* product. Slop test gate 20 (placeholder names / startup-cliché copy) fires here. |
+| 10 | **Pill-shape buttons (`border-radius: 9999px`) + the same gradient on the button** | `.btn` (l. 35), `.cta button` (l. 122) | Pill buttons are not wrong on principle, but a pill button + gradient + bouncy hover is the third cliché stacked. Pick a sober border-radius (2–4 px) or own the pill — but not with the gradient. |
+| 11 | **Auto-rotating section padding all `6rem`** — every section identical in rhythm | `.features { margin: 6rem auto }`, `.cta { padding: 6rem 2rem }`, hero `min-height: 100vh` | Vary section spacing. The rhythm signals which sections are heavier vs lighter. Identical padding is the equal-whitespace tell from gate 10. |
+
+### MINOR — small taste issues · 3 findings
+
+| # | Tell | Where | Fix |
+| --- | --- | --- | --- |
+| 12 | **Hero `min-height: 100vh`** | `.hero { min-height: 100vh }` (l. 16) | Most hero copy doesn't earn 100 vh. Set min-height to content + a small floor (`min-height: 70vh` at most). 100vh hero with one centered heading is the AI cliché. |
+| 13 | **No `:focus-visible` ring anywhere** — `.btn`, `.feature-card`, `.cta button` | l. 35, l. 110, l. 122 | Add `:focus-visible { outline: 2px solid <accent>; outline-offset: 3px; }` on every interactive element. Eight states is the rule (gate 28). |
+| 14 | **No reduced-motion fallback for any of the hover transitions** | full page | Wrap motion in `@media (prefers-reduced-motion: reduce) { .btn, .feature-card, button { transition: none; transform: none; } }`. Slop test gate 29. |
+
+---
+
+## Counts
+
+**5 critical · 6 major · 3 minor.** Total: 14.
+
+The page fails the slop test on **at least 14 of 38 gates.** It is not refinable in place — the structural fingerprint (gate 9) plus the gradient-text headline (gate 5) plus the hover-stack (gate 14) require a `redesign`, not a `refine`.
+
+## Recommendation
+
+Do **not** run `hallmark refine` here. Run `hallmark redesign` instead — `refine` preserves structure, and the structure itself is the primary problem. See [`../redesign/`](../redesign/) for what a redesign of a similar page looks like.
+
+If the user *insists* on keeping this page's structure (e.g., because the brief explicitly asked for a Hero + 3 features), `refine` can fix the visual tells (font, gradient, easings, side-stripe, hover-stack) but the structural-fingerprint finding will still fail audit on the next pass.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/input.html

@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Nexus — the AI-powered platform for modern teams</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Inter', sans-serif;
+      background: #ffffff;
+      color: #000000;
+      line-height: 1.6;
+    }
+
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 2rem;
+    }
+
+    .hero h1 {
+      font-size: 4rem;
+      font-weight: 900;
+      background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 1.5rem;
+    }
+
+    .hero p { font-size: 1.25rem; color: #666; max-width: 600px; margin-bottom: 2rem; }
+
+    .btn {
+      display: inline-block;
+      padding: 0.875rem 2rem;
+      background: linear-gradient(90deg, #8b5cf6, #3b82f6);
+      color: #fff;
+      border-radius: 9999px;
+      text-decoration: none;
+      font-weight: 700;
+      transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .btn:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 10px 30px rgba(139,92,246,0.4); }
+
+    .features {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2rem;
+      max-width: 1200px;
+      margin: 6rem auto;
+      padding: 0 2rem;
+    }
+
+    .feature-card {
+      background: #fff;
+      border-radius: 16px;
+      padding: 2rem;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+      border-left: 4px solid #8b5cf6;
+      transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .feature-card:hover { transform: scale(1.05) translateY(-4px); }
+
+    .feature-card .icon-wrap {
+      width: 60px;
+      height: 60px;
+      background: linear-gradient(135deg, #8b5cf6, #3b82f6);
+      border-radius: 12px;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      color: #fff;
+    }
+
+    .feature-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
+
+    .feature-card p { color: #666; }
+
+    .nested-card {
+      background: #f9fafb;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-top: 1rem;
+      border: 1px solid #e5e7eb;
+    }
+
+    .cta {
+      background: linear-gradient(135deg, #8b5cf6, #3b82f6);
+      color: #fff;
+      text-align: center;
+      padding: 6rem 2rem;
+    }
+
+    .cta h2 { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; }
+
+    .cta button {
+      padding: 1rem 2.5rem;
+      background: #fff;
+      color: #8b5cf6;
+      border: none;
+      border-radius: 9999px;
+      font-weight: 700;
+      font-size: 1.125rem;
+      cursor: pointer;
+      transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .cta button:hover { transform: scale(1.05); }
+
+    footer { background: #f9fafb; padding: 2rem; text-align: center; color: #999; }
+  </style>
+</head>
+<body>
+  <section class="hero">
+    <h1>The AI-powered platform for modern teams</h1>
+    <p>Nexus helps you ship faster, collaborate smarter, and scale seamlessly with AI-native workflows built for the way teams work today.</p>
+    <a href="#" class="btn">Get started free</a>
+  </section>
+
+  <section class="features">
+    <div class="feature-card">
+      <div class="icon-wrap">⚡</div>
+      <h3>Lightning fast</h3>
+      <p>Get up and running in seconds with our AI-native onboarding flow.</p>
+      <div class="nested-card">
+        <strong>Pro tip:</strong> Connect Slack, GitHub and Linear in one click.
+      </div>
+    </div>
+    <div class="feature-card">
+      <div class="icon-wrap">🚀</div>
+      <h3>Built to scale</h3>
+      <p>From startup to enterprise — Nexus grows with you, every step of the way.</p>
+    </div>
+    <div class="feature-card">
+      <div class="icon-wrap">🎯</div>
+      <h3>Built for the modern team</h3>
+      <p>Tools that get out of your way and let your team do their best work.</p>
+    </div>
+  </section>
+
+  <section class="cta">
+    <h2>Ready to ship faster?</h2>
+    <p>Join 50,000+ teams already building with Nexus.</p>
+    <button>Start your free trial</button>
+  </section>
+
+  <footer>
+    <p>© 2026 Nexus, Inc. All rights reserved.</p>
+  </footer>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/notes.md

@@ -0,0 +1,29 @@
+# `audit` verb · what fired and why
+
+## Input
+
+A 148-line `index.html` with inline CSS — a generic AI-shaped landing page for a fictional product called "Nexus." Hits at least 14 anti-patterns from `references/anti-patterns.md`.
+
+## What `audit` does (and what it doesn't)
+
+- **Reads the file.** No edits. No new files. The verb is read-only.
+- **Scores against `anti-patterns.md` + the slop test gates** in `SKILL.md`.
+- **Returns one Markdown report** with: tell name · file path + line range · severity · one-line fix.
+- **Groups by severity** (critical / major / minor) and ends with a count.
+
+## What loaded
+
+- `references/anti-patterns.md` (the full named-tell library)
+- `references/structure.md` (for the structural-fingerprint check, gate 9)
+- `references/microinteractions.md` (for the timing/easing canon, gates 11–18)
+- `SKILL.md` § The slop test (gates 1–38)
+
+## Why this matters as a verb test
+
+`audit` is the verb that **doesn't change anything**. It's the safety verb — the one a user runs before they ask for `refine` or `redesign`. The output gives the user enough information to decide which way to take the page.
+
+In this case the audit returns "do not run `refine` — the structural fingerprint is the problem; run `redesign` instead." That is the ideal output: a verb that helps the user pick *another* verb.
+
+## Durable artifact
+
+`audit-report.md` — the kind of output Hallmark produces in a real session. It can be saved to a PR, pasted into a Linear ticket, or used as the brief for the follow-up `redesign` run.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/input.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Nexus — the AI-powered platform for modern teams</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Inter', sans-serif; background: #fff; color: #000; line-height: 1.6; }
+    .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
+    .hero h1 { font-size: 4rem; font-weight: 900; background: linear-gradient(90deg, #8b5cf6, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; }
+    .hero p { font-size: 1.25rem; color: #666; max-width: 600px; margin-bottom: 2rem; }
+    .btn { display: inline-block; padding: 0.875rem 2rem; background: linear-gradient(90deg, #8b5cf6, #3b82f6); color: #fff; border-radius: 9999px; text-decoration: none; font-weight: 700; transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
+    .btn:hover { transform: scale(1.05) translateY(-2px); }
+    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 6rem auto; padding: 0 2rem; }
+    .feature-card { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-left: 4px solid #8b5cf6; transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
+    .feature-card:hover { transform: scale(1.05) translateY(-4px); }
+    .feature-card .icon-wrap { width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); border-radius: 12px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
+    .feature-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
+    .feature-card p { color: #666; }
+    .cta { background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #fff; text-align: center; padding: 6rem 2rem; }
+    .cta h2 { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; }
+    .cta button { padding: 1rem 2.5rem; background: #fff; color: #8b5cf6; border: none; border-radius: 9999px; font-weight: 700; font-size: 1.125rem; cursor: pointer; transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
+    .cta button:hover { transform: scale(1.05); }
+    footer { background: #f9fafb; padding: 2rem; text-align: center; color: #999; }
+  </style>
+</head>
+<body>
+  <section class="hero">
+    <h1>The AI-powered platform for modern teams</h1>
+    <p>Nexus helps you ship faster, collaborate smarter, and scale seamlessly with AI-native workflows built for the way teams work today.</p>
+    <a href="#" class="btn">Get started free</a>
+  </section>
+
+  <section class="features">
+    <div class="feature-card">
+      <div class="icon-wrap">⚡</div>
+      <h3>Lightning fast</h3>
+      <p>Get up and running in seconds with our AI-native onboarding flow.</p>
+    </div>
+    <div class="feature-card">
+      <div class="icon-wrap">🚀</div>
+      <h3>Built to scale</h3>
+      <p>From startup to enterprise — Nexus grows with you, every step of the way.</p>
+    </div>
+    <div class="feature-card">
+      <div class="icon-wrap">🎯</div>
+      <h3>Built for the modern team</h3>
+      <p>Tools that get out of your way and let your team do their best work.</p>
+    </div>
+  </section>
+
+  <section class="cta">
+    <h2>Ready to ship faster?</h2>
+    <p>Join 50,000+ teams already building with Nexus.</p>
+    <button>Start your free trial</button>
+  </section>
+
+  <footer>
+    <p>© 2026 Nexus, Inc. All rights reserved.</p>
+  </footer>
+</body>
+</html>