Docs sync · 4 verbs · 65 gates · stills replace videos

The README and SKILL.md had drifted out of sync with the current
slop-test.md (now 65 gates) and the verb state (refine was removed;
audit · redesign · study + default = four verbs total).

- README: revert lingering "refine" references; verb count 5 → 4
- README: gate count 55/60 → 65 across body + side notes
- README: section title "Eight pages, eight different shapes" →
  "Different briefs, different shapes" — the old phrasing implied
  the skill could only produce these eight specific sites
- README: replace eight <video src=...mp4> tags with <img> stills
  (first-frame extracts via ffmpeg from the existing .mp4 files;
  no autoplay overhead, faster page render on the readme view)
- SKILL.md: drop "refine" from the frontmatter trigger description;
  sync "55-gate" → "65-gate" across routing file + stamp examples

No version bump — pure documentation drift catching up to the
current rule-set state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

README.md

@@ -10,7 +10,7 @@ Powered by Together AI.
   <img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
 </p>
 
-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-three themes, runs sixty slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
+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-three 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/).
 
@@ -53,16 +53,16 @@ Hallmark's edge is **`study`** — every other tool ships a preset menu or a scr
 
 ---
 
-## Eight pages, eight different shapes
+## Different briefs, different shapes
 
-Generated by exercising the skill across contrasting briefs. No two share a macrostructure or theme.
+A handful of examples below — each generated by exercising the skill on a different brief. The skill picks differently for every prompt; no two share a macrostructure or theme.
 
 <table>
   <tr>
-    <td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td width="25%"><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline></video></td>
+    <td width="25%"><img src="site/_tests/_thumbs/SaaS-still.jpg" alt="SaaS product page" /></td>
+    <td width="25%"><img src="site/_tests/_thumbs/wayfare-still.jpg" alt="Wayfare travel booking" /></td>
+    <td width="25%"><img src="site/_tests/_thumbs/slow-pour-still.jpg" alt="Slow Pour coffee subscription" /></td>
+    <td width="25%"><img src="site/_tests/_thumbs/BananaStudio-still.jpg" alt="BananaStudio creative studio" /></td>
   </tr>
   <tr>
     <td><b>SaaS</b><br/><sub>SaaS product page · modern-minimal</sub></td>
@@ -71,10 +71,10 @@ Generated by exercising the skill across contrasting briefs. No two share a macr
     <td><b>BananaStudio</b><br/><sub>Creative studio · playful motion</sub></td>
   </tr>
   <tr>
-    <td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Najm-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Soroe-loop.mp4" autoplay loop muted playsinline></video></td>
-    <td><video src="https://github.com/Luffixos/hallmark/raw/main/site/_tests/_thumbs/Hyperlane-example.mp4" autoplay loop muted playsinline></video></td>
+    <td><img src="site/_tests/_thumbs/anya-still.jpg" alt="Anya personal site" /></td>
+    <td><img src="site/_tests/_thumbs/Najm-still.jpg" alt="NAJM Moroccan fashion brand" /></td>
+    <td><img src="site/_tests/_thumbs/Soroe-still.jpg" alt="Søroe ceramics studio" /></td>
+    <td><img src="site/_tests/_thumbs/Hyperlane-still.jpg" alt="Hyperlane developer infrastructure" /></td>
   </tr>
   <tr>
     <td><b>Anya</b><br/><sub>Software architect personal site</sub></td>
@@ -90,7 +90,7 @@ 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`), 55-gate slop test, output contract, always-on `tokens.css` export.
+- **[`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).
 - **[`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-three 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** (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
@@ -105,7 +105,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la
 - **Macrostructures over axes.** Pick one of 21 named whole-page shapes wholesale; the macrostructure stamp lives in the CSS comment, so the next Hallmark run picks something different.
 - **Within-archetype variation.** Two Bento Grids should not be twins; each archetype has 2–3 picked-per-output knobs.
 - **Microinteractions as discipline.** Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms.
-- **A 55-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots), input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals), contrast gates (46–50: APCA / WCAG thresholds, accent-ink token requirement, dark-section ink-on-ink check), and **nav · footer · hero structural gates (51–55: AI nav fingerprint, AI footer fingerprint, hero centred-everything, hero padding asymmetry, decorative-without-purpose)**.
+- **A 65-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots), input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals), contrast gates (46–50: APCA / WCAG thresholds, accent-ink token requirement, dark-section ink-on-ink check), **nav · footer · hero structural gates (51–55: AI nav fingerprint, AI footer fingerprint, hero centred-everything, hero padding asymmetry, decorative-without-purpose)**, **honest-copy + chrome + token + responsive gates (56–60: invented metrics, re-drawn UI chrome, mid-render token improvisation, two-line clickable text, emoji-as-feature-icon)**, and **layout-safety gates (61–65: 1fr image-track overflow, missing `overflow-x: clip`, display-header word-break, theme section-head mobile collapse, CSS-only radio tabs scroll-jumping)**.
 - **Project memory.** A per-project `.hallmark/log.json` records each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 3–5 entries before picking and writes a new entry after each build, so consecutive Hallmark outputs in the same project don't repeat shapes or themes.
 - **Theme-diversification rule.** Two consecutive themes must differ on at least one of three axes: paper band (dark / mid / light), display style (italic-serif / roman-serif / geometric-sans / mono / display-heavy / system-native), accent hue (warm / cool / neutral / chromatic-other).
 - **Voice fixtures over LLM defaults.** Each of the 21 macrostructures ships with 2–3 example opening lines tuned to its tone. "Built for the modern team" is in the banned-phrases list.

skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hallmark
-description: Use this skill ONLY when the user explicitly wants Hallmark's anti-AI-slop discipline applied. Triggers are narrow on purpose — (1) the user names one of Hallmark's verbs by name (`audit`, `refine`, `redesign`, `study`, e.g. "audit this UI", "redesign this page", "refine this component", "study this screenshot"); (2) the user says a UI "feels AI-generated", "looks templated", "looks like every other AI page", or asks to "make it less AI-generated"; (3) the user attaches a screenshot of a design they admire and wants the DNA extracted (the `study` verb); (4) the user invokes the skill by name ("use Hallmark", "/hallmark"). DO NOT trigger on generic UI requests — "design a button", "build me a form", "make a dashboard", "build a landing page", "add a navbar". Those are handled by frontend-design or other UI skills. Hallmark is the opinionated anti-slop ruleset; it should only run when the user explicitly wants that specific discipline, not as a default UI builder.
+description: Use this skill ONLY when the user explicitly wants Hallmark's anti-AI-slop discipline applied. Triggers are narrow on purpose — (1) the user names one of Hallmark's three explicit verbs (`audit`, `redesign`, `study`, e.g. "audit this UI", "redesign this page", "study this screenshot"); (2) the user says a UI "feels AI-generated", "looks templated", "looks like every other AI page", or asks to "make it less AI-generated"; (3) the user attaches a screenshot of a design they admire and wants the DNA extracted (the `study` verb); (4) the user invokes the skill by name ("use Hallmark", "/hallmark"). DO NOT trigger on generic UI requests — "design a button", "build me a form", "make a dashboard", "build a landing page", "add a navbar". Those are handled by frontend-design or other UI skills. Hallmark is the opinionated anti-slop ruleset; it should only run when the user explicitly wants that specific discipline, not as a default UI builder.
 version: 1.0.0
 ---
 
@@ -329,7 +329,7 @@ By the time you reach this step, one of three things is true:
 
 **Custom is a quiet branch, not a default question.** Most briefs route to catalog and the user never sees the words "catalog" or "custom." The 23 named themes plus the rotation rule already deliver structural variety; the fork is reserved for when the brief specifically asks for a tuned look the catalog can't carry.
 
-A custom theme is a **complete** OKLCH palette + font pairing tuned to the brief — not a one-off colour swap, not an excuse to bypass the rules. Every constraint in [`color.md`](references/color.md), [`typography.md`](references/typography.md), and [`anti-patterns.md`](references/anti-patterns.md) still applies. The 55 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text **before** any code is emitted, so the user can redirect.
+A custom theme is a **complete** OKLCH palette + font pairing tuned to the brief — not a one-off colour swap, not an excuse to bypass the rules. Every constraint in [`color.md`](references/color.md), [`typography.md`](references/typography.md), and [`anti-patterns.md`](references/anti-patterns.md) still applies. The 65 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text **before** any code is emitted, so the user can redirect.
 
 The diversification rule is theme-route-blind: a custom run that follows another custom (or a catalog) must differ on at least one of the three axes from the previous entry, same as catalog-vs-catalog. Custom entries record their three axes explicitly into `.hallmark/log.json` (see [`custom-theme.md`](references/custom-theme.md) § F).
 
@@ -399,7 +399,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 - **Enrichment** · none (typography only)
 - **Sections** · Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer
 - **Motion** · counter · pricing-lift · pulse-once
-- **Slop test** · 55 / 55 ✓ (run after Build)
+- **Slop test** · 65 / 65 ✓ (run after Build)
 - **Diversification** · differs from Pastel on display style + accent hue
 ```
 
@@ -410,7 +410,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 3. **Enrichment** — the chosen archetype + tier, or *none (typography only)*.
 4. **Sections** — section names separated by ` · `, in DOM order.
 5. **Motion** — microinteraction primitives separated by ` · `, or *none — typography only*. Always under three primitives per the [`microinteractions.md`](references/microinteractions.md) hard rules.
-6. **Slop test** — `55 / 55 ✓` if all gates pass, or `N / 55 — fails: <gate numbers>` if any are open. Run the slop test BEFORE writing this row; the slop test is Step 7.
+6. **Slop test** — `65 / 65 ✓` if all gates pass, or `N / 65 — fails: <gate numbers>` if any are open. Run the slop test BEFORE writing this row; the slop test is Step 7.
 7. **Diversification** *(optional, only when `.hallmark/log.json` has prior entries)* — what axes differ vs the previous run.
 
 **Three more sample preview blocks** for the model to imitate, varied across macrostructure types:
@@ -423,7 +423,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 > - **Enrichment** · Tier-B hand-built SVG (a 60-line coffee bean with `@property --rise` 6 s breathing-loop)
 > - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
 > - **Motion** · breathing-loop on bean only (respects `prefers-reduced-motion`)
-> - **Slop test** · 55 / 55 ✓
+> - **Slop test** · 65 / 65 ✓
 > - **Diversification** · first run for this project
 
 *Bento Grid (SaaS, motion-on):*
@@ -434,7 +434,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 > - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
 > - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
 > - **Motion** · counter · pricing-lift · CSS marquee on integrations strip
-> - **Slop test** · 55 / 55 ✓
+> - **Slop test** · 65 / 65 ✓
 > - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
 
 *Manifesto (declarative, no enrichment):*
@@ -445,7 +445,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 > - **Enrichment** · none (typography only — voice carries the brand)
 > - **Sections** · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon
 > - **Motion** · none — typography only
-> - **Slop test** · 55 / 55 ✓
+> - **Slop test** · 65 / 65 ✓
 > - **Diversification** · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
 
 *Custom (Coffeebox archival café):*
@@ -456,7 +456,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
 > - **Enrichment** · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
 > - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
 > - **Motion** · breathing-loop on bean (with reduced-motion fallback)
-> - **Slop test** · 55 / 55 ✓
+> - **Slop test** · 65 / 65 ✓
 > - **Diversification** · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style
 
 If any slop-test gate fails when you reach Step 7, return to the relevant Build step, fix it, and **re-emit the preview block** with the corrected slop-test row. The preview is the durable summary; it's wrong to ship if it lies.
@@ -484,7 +484,7 @@ Always:
 
 ### 7. The slop test
 
-Before handing back, run the output through the 55-gate slop test in [`references/slop-test.md`](references/slop-test.md). Every answer must be **no**. Load that file at this step (not earlier — it isn't needed until handoff). The active genre matters: some gates are universal, some are genre-scoped (atmospheric loosens the radial-bloom gate; modern-minimal loosens the zero-chroma neutral gate; etc.). The full per-genre overrides are listed inline in `slop-test.md`.
+Before handing back, run the output through the 65-gate slop test in [`references/slop-test.md`](references/slop-test.md). Every answer must be **no**. Load that file at this step (not earlier — it isn't needed until handoff). The active genre matters: some gates are universal, some are genre-scoped (atmospheric loosens the radial-bloom gate; modern-minimal loosens the zero-chroma neutral gate; etc.). The full per-genre overrides are listed inline in `slop-test.md`.
 
 Run the slop test BEFORE writing the Slop test row in the Step 5 preview block — that row reflects the actual outcome of this step.