Hallmark skill — N5–N9 navs · Ft5–Ft8 footers · HP1–HP4 hero polish · Terminal cursor constraint · gates 51–55 (55 total)

Skill-only changes (no demo-site touches per user direction):
- component-cookbook.md: Navigation 4→9 (N5 Floating pill · N6 Newspaper masthead · N7 Brutal slab · N8 Terminal command · N9 Edge-aligned minimal) + Footers 4→8 (Ft5 Statement · Ft6 Letter close · Ft7 Newsletter-first · Ft8 Marquee scroll), each with code, real-world refs, anti-patterns, and routing tables per genre.
- hero-enrichment.md: HP1 Vertical-rail · HP2 Marquee-overflow · HP3 Cursor-spotlight · HP4 Decorative-numeral, plus a Hero space discipline subsection (footprint 70–90%, padding-block-end ≥ 1.3× start, no centred-everything, one polish pattern max).
- structure.md: theme fingerprint table extended to all 22 themes with Nav + Footer columns; Terminal "no standalone cursor" constraint codified.
- microinteractions.md: Caret blink rule rewritten — cursor allowed only INSIDE typed commands, never as standalone decoration.
- anti-patterns.md: "The AI nav" + "The AI footer" entries name the genre-blind fingerprints to refuse.
- slop-test.md: gates 51–55 (Nav fingerprint · Footer fingerprint · Hero centred-everything · Hero padding asymmetry · Decorative-without-purpose). Header 50→55.
- SKILL.md: Step 2 gains nav + footer pick + diversification rule; component-scope flow clarifies skip; gate count 50→55.
- 4 genre files: each gets a "Nav and footer voice" routing block.
- macrostructures.md: cross-references HP1–HP4 + nav/footer from component-cookbook.

Tests: skill/_tests/nav-footer-variety/{01..05} — 5 fresh briefs (podcast · CLI · atmospheric SaaS · photographer · B2B SaaS) demonstrating 5 different navs (N5–N9), 5 different footers, and 4 different hero polish patterns. The Terminal output places its caret only inside typed commands.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
2026-05-04 15:02:36 +01:00
co-authored by Claude Opus 4.7
parent ac3a94f90e
commit 85dd1a42a7
21 changed files with 1316 additions and 36 deletions
+3 -3
View File
@@ -3,7 +3,7 @@
**A design skill that studies what you admire — and rebuilds your content with it.**
→ Live demo: **[hallmark-murex.vercel.app](https://hallmark-murex.vercel.app)** · twenty-two themes, eight worked tests, press `T` to cycle.
→ Current version: **v0.8.0** — adds genres (editorial · modern-minimal · atmospheric · playful), `design.md` for whole-project redesigns, lazy reference loading, the 2+1 font rule with 50-gate slop test, component-library exports (tokens.css always emitted; Tailwind / DTCG / shadcn formats inline in design.md), a Study gallery on the marketing site, and seven new themes (Quiet refreshed, plus Bloom, Coral, Violet, Aurora, Halo, Plume).
→ Current version: **v0.8.0** — adds genres (editorial · modern-minimal · atmospheric · playful), `design.md` for whole-project redesigns, lazy reference loading, the 2+1 font rule with 55-gate slop test, component-library exports (tokens.css always emitted; Tailwind / DTCG / shadcn formats inline in design.md), a Study gallery on the marketing site, and seven new themes (Quiet refreshed, plus Bloom, Coral, Violet, Aurora, Halo, Plume).
<table>
<tr>
@@ -97,7 +97,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`), 50-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`), 55-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 36 component archetypes with variation knobs, 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, 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, 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.
@@ -112,7 +112,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 23 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 50-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (3940: max three font families per page, outlier face used in ≤ 2 slots) and input-state gates (4145: 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).
- **A 55-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (3940: max three font families per page, outlier face used in ≤ 2 slots), input-state gates (4145: 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 (4650: APCA / WCAG thresholds, accent-ink token requirement, dark-section ink-on-ink check), and **nav · footer · hero structural gates (5155: AI nav fingerprint, AI footer fingerprint, hero centred-everything, hero padding asymmetry, decorative-without-purpose)**.
- **Project memory.** A per-project `.hallmark/log.json` records each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 35 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 23 example opening lines tuned to its tone. "Built for the modern team" is in the banned-phrases list.