@phuc1403/musketeer 0.8.0 → 0.10.0

package/template/.claude/skills/hallmark/references/floating-nav.md

@@ -1,89 +1,89 @@
-# Floating nav on scroll — the cross-fade morph
-
-The recipe for **N10 · Floating-on-scroll morph** (see [`component-cookbook.md` § Navigation](component-cookbook.md)). One DOM, two visual modes, single class toggle, one timing curve. AI defaults botch every one of the four laws below — which is why N10 is the most demanding nav in the cookbook.
-
-## The structure
-
-One `<header>` with an inner wrapper. The outer owns the **default bar** visuals; the inner owns the **floating pill** visuals. As `.is-floating` toggles past a scroll threshold, each layer cross-fades its own visuals out while the other fades in.
-
-```html
-<header class="nav">
-  <div class="nav__inner">
-    <a class="wordmark">Hallmark</a>
-    <ul class="nav__links">…</ul>
-    <a class="cta">Install</a>
-  </div>
-</header>
-```
-
-## The four laws — non-negotiable
-
-**1. Total nav height stays constant.** If outer height changes when state flips, every pixel below shifts vertically. Users perceive this as "the page jumped" mid-scroll. Compensate the inner's shrink with the outer's `padding-block` so the math sums to the same total in both states.
-
-**2. Visible offset uses `transform: translateY()`, never `padding`/`margin`.** The pill should sit detached from the viewport top with breathing room. The naïve add-padding-to-outer fix breaks Law 1. `transform` doesn't affect layout — pill drops visually, box stays put.
-
-**3. Cross-fade ownership of every shared visual.** For every property the outer carries in default (background, border, backdrop-filter, box-shadow), explicitly neutralise it in `.is-floating` *and* put it in the transition list. Forgetting one — say a stale `backdrop-filter: blur(14px)` on the outer in floating mode — yields an invisible blurred strip dragging across the viewport behind nothing.
-
-**4. Single timing curve across every property.** Eight properties on eight curves reads as eight animations. Same eight on `var(--dur-mid)` + `var(--ease-out)` reads as one motion. Use `cubic-bezier(0.16, 1, 0.3, 1)` (exponential ease-out) and ~520 ms.
-
-## The property morph (10 properties, one curve)
-
-| Element | Property | Default | Floating |
-|---|---|---|---|
-| `.nav` | `padding-block` | `0` | `var(--space-2xs)` |
-| `.nav` | `background-color` | dark/0.62 | `transparent` |
-| `.nav` | `border-block-end-color` | rule | `transparent` |
-| `.nav` | `backdrop-filter` | `saturate(1.4) blur(14px)` | `blur(0)` |
-| `.nav__inner` | `max-width` | `var(--page-max)` | `~58rem` |
-| `.nav__inner` | `min-height` | `60px` | `52px` |
-| `.nav__inner` | `padding-block` | `12px` | `4px` |
-| `.nav__inner` | `border-radius` | `0` | `var(--radius-pill, 999px)` |
-| `.nav__inner` | `background-color` | `transparent` | dark/0.82 |
-| `.nav__inner` | `backdrop-filter` | `blur(0)` | `blur(18px)` |
-| `.nav__inner` | `box-shadow` | `none` | drop + tinted glow + inset hairline |
-| `.nav__inner` | `transform` | `translateY(0)` | `translateY(12px)` |
-
-Use `blur(0)` not `none` — `none` snaps, `blur(0)` transitions. `backdrop-filter` transitions are 2024+ baseline (Chrome 107+, Safari 14+, Firefox 103+).
-
-## The scroll handler
-
-```js
-(() => {
-  const nav = document.querySelector(".nav");
-  if (!nav) return;
-  const THRESHOLD = 80;          // ≥ 60 px to avoid micro-scroll twitches
-  let floating = false;
-  let ticking = false;
-  const update = () => {
-    const next = window.scrollY > THRESHOLD;
-    if (next !== floating) {     // boolean-flip guard — toggle once per state change
-      floating = next;
-      nav.classList.toggle("is-floating", floating);
-    }
-  };
-  window.addEventListener("scroll", () => {
-    if (ticking) return;
-    ticking = true;
-    requestAnimationFrame(() => { update(); ticking = false; });
-  }, { passive: true });          // mobile scroll-perf — keep main thread free
-  update();
-})();
-```
-
-Three discipline points:
-- **`passive: true`** — listener won't `preventDefault`, browser keeps main thread free for scrolling.
-- **`requestAnimationFrame` throttle** — caps to 60 calls/s, aligns with paint.
-- **Boolean-flip guard** — class operation runs once per state change, not once per scroll event.
-
-## Anti-patterns Hallmark refuses
-
-1. Two separate `<header>` elements that swap via opacity. Doubles DOM, fights focus order, can desync content.
-2. Animating `top` / `margin-top` to add the floating offset. Triggers layout. `transform` is the only correct lever.
-3. Using `backdrop-filter: none` in the floating state. Snaps. Use `blur(0)` so it transitions.
-4. Letting nav height change between states. Causes content jitter — the single most damaging mistake in this pattern.
-5. Different transition durations per property ("speed up the radius", "delay the shadow"). Reads as broken even though everything moves. One curve.
-6. `scroll` event without `{ passive: true }` or without rAF throttling. Both kill mobile scroll perf.
-7. Threshold = 0 (morph fires at the slightest scroll). Too jumpy. Use ≥ 60 px.
-8. Forgetting the boolean-flip guard — toggling the class on every scroll event causes layout thrash.
-
-The pattern works because it's restrained — one orchestrated morph, no embellishment. Pour the polish into the timing curve, the shadow stack, and the height-constant math; not into "more."
+# Floating nav on scroll — the cross-fade morph
+
+The recipe for **N10 · Floating-on-scroll morph** (see [`component-cookbook.md` § Navigation](component-cookbook.md)). One DOM, two visual modes, single class toggle, one timing curve. AI defaults botch every one of the four laws below — which is why N10 is the most demanding nav in the cookbook.
+
+## The structure
+
+One `<header>` with an inner wrapper. The outer owns the **default bar** visuals; the inner owns the **floating pill** visuals. As `.is-floating` toggles past a scroll threshold, each layer cross-fades its own visuals out while the other fades in.
+
+```html
+<header class="nav">
+  <div class="nav__inner">
+    <a class="wordmark">Hallmark</a>
+    <ul class="nav__links">…</ul>
+    <a class="cta">Install</a>
+  </div>
+</header>
+```
+
+## The four laws — non-negotiable
+
+**1. Total nav height stays constant.** If outer height changes when state flips, every pixel below shifts vertically. Users perceive this as "the page jumped" mid-scroll. Compensate the inner's shrink with the outer's `padding-block` so the math sums to the same total in both states.
+
+**2. Visible offset uses `transform: translateY()`, never `padding`/`margin`.** The pill should sit detached from the viewport top with breathing room. The naïve add-padding-to-outer fix breaks Law 1. `transform` doesn't affect layout — pill drops visually, box stays put.
+
+**3. Cross-fade ownership of every shared visual.** For every property the outer carries in default (background, border, backdrop-filter, box-shadow), explicitly neutralise it in `.is-floating` *and* put it in the transition list. Forgetting one — say a stale `backdrop-filter: blur(14px)` on the outer in floating mode — yields an invisible blurred strip dragging across the viewport behind nothing.
+
+**4. Single timing curve across every property.** Eight properties on eight curves reads as eight animations. Same eight on `var(--dur-mid)` + `var(--ease-out)` reads as one motion. Use `cubic-bezier(0.16, 1, 0.3, 1)` (exponential ease-out) and ~520 ms.
+
+## The property morph (10 properties, one curve)
+
+| Element | Property | Default | Floating |
+|---|---|---|---|
+| `.nav` | `padding-block` | `0` | `var(--space-2xs)` |
+| `.nav` | `background-color` | dark/0.62 | `transparent` |
+| `.nav` | `border-block-end-color` | rule | `transparent` |
+| `.nav` | `backdrop-filter` | `saturate(1.4) blur(14px)` | `blur(0)` |
+| `.nav__inner` | `max-width` | `var(--page-max)` | `~58rem` |
+| `.nav__inner` | `min-height` | `60px` | `52px` |
+| `.nav__inner` | `padding-block` | `12px` | `4px` |
+| `.nav__inner` | `border-radius` | `0` | `var(--radius-pill, 999px)` |
+| `.nav__inner` | `background-color` | `transparent` | dark/0.82 |
+| `.nav__inner` | `backdrop-filter` | `blur(0)` | `blur(18px)` |
+| `.nav__inner` | `box-shadow` | `none` | drop + tinted glow + inset hairline |
+| `.nav__inner` | `transform` | `translateY(0)` | `translateY(12px)` |
+
+Use `blur(0)` not `none` — `none` snaps, `blur(0)` transitions. `backdrop-filter` transitions are 2024+ baseline (Chrome 107+, Safari 14+, Firefox 103+).
+
+## The scroll handler
+
+```js
+(() => {
+  const nav = document.querySelector(".nav");
+  if (!nav) return;
+  const THRESHOLD = 80;          // ≥ 60 px to avoid micro-scroll twitches
+  let floating = false;
+  let ticking = false;
+  const update = () => {
+    const next = window.scrollY > THRESHOLD;
+    if (next !== floating) {     // boolean-flip guard — toggle once per state change
+      floating = next;
+      nav.classList.toggle("is-floating", floating);
+    }
+  };
+  window.addEventListener("scroll", () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => { update(); ticking = false; });
+  }, { passive: true });          // mobile scroll-perf — keep main thread free
+  update();
+})();
+```
+
+Three discipline points:
+- **`passive: true`** — listener won't `preventDefault`, browser keeps main thread free for scrolling.
+- **`requestAnimationFrame` throttle** — caps to 60 calls/s, aligns with paint.
+- **Boolean-flip guard** — class operation runs once per state change, not once per scroll event.
+
+## Anti-patterns Hallmark refuses
+
+1. Two separate `<header>` elements that swap via opacity. Doubles DOM, fights focus order, can desync content.
+2. Animating `top` / `margin-top` to add the floating offset. Triggers layout. `transform` is the only correct lever.
+3. Using `backdrop-filter: none` in the floating state. Snaps. Use `blur(0)` so it transitions.
+4. Letting nav height change between states. Causes content jitter — the single most damaging mistake in this pattern.
+5. Different transition durations per property ("speed up the radius", "delay the shadow"). Reads as broken even though everything moves. One curve.
+6. `scroll` event without `{ passive: true }` or without rAF throttling. Both kill mobile scroll perf.
+7. Threshold = 0 (morph fires at the slightest scroll). Too jumpy. Use ≥ 60 px.
+8. Forgetting the boolean-flip guard — toggling the class on every scroll event causes layout thrash.
+
+The pattern works because it's restrained — one orchestrated morph, no embellishment. Pour the polish into the timing curve, the shadow stack, and the height-constant math; not into "more."

package/template/.claude/skills/hallmark/references/genres/atmospheric.md

@@ -1,65 +1,65 @@
-# Genre — atmospheric
-
-For the AI-creative product page. Dark canvas with warm radial blooms, confident sans display, expressive but plain-English copy, single warm accent. The aesthetic of a tool you'd actually want to use after dark — generative music, video, image, voice.
-
-## When to pick it
-
-Brief mentions any of: *AI tool, generative, music, video, image, voice, late-night, atmospheric, dark mode, expressive, creative tool, model playground, vibe-coded, dreamlike, nocturnal*. Also pick when the user names a *mood* that requires darkness (e.g. "moody", "cinematic", "after hours").
-
-## Themes that belong
-
-`Bloom` (canonical), `Midnight`, `Terminal`. Three dark-paper themes; the rotation walks them when atmospheric is active.
-
-## Voice
-
-- **Display** — Geist Sans 600 or similar weighty sans, plain English, no ornament. Letter-spacing tight (`-0.03em` or tighter).
-- **Body** — same family, 400. Light grey on dark (`oklch(86% 0.008 40)`).
-- **Accent** — single warm hue (orange / amber / red / pink). Used in radial-gradient blooms on the canvas, on focus rings, on small tags. Never on display text (that's gate 5 universal — gradient text stays banned).
-- **Layout** — centred or near-centred heroes. The canvas itself is the design; the type sits on top of an atmospheric ground.
-- **Motion** — fade-in only. No slide, no bounce. The atmosphere does the work.
-- **Copy tone** — direct, slightly poetic, specific. *"Make a house song about quitting your job."* is the calibration.
-
-## What this genre allows
-
-- **Radial-gradient bloom** on the body background — up to two blooms, each ~20–30 % footprint, fixed-attached, no animation. Gate 31 universal is loosened here.
-- **Centred heroes** — gate 7 universal is loosened. The canvas frames the type.
-- **Pill-rounded CTAs** with accent fill — confident, not pastel.
-- **Glow shadows** on hover (cards lift toward the user with a soft warm shadow).
-- **Larger expressive type** — display can hit 6 rem (`clamp(3rem, 6vw + 1rem, 6rem)`).
-
-## What this genre disallows
-
-- **Light-paper aesthetics** — the canvas is dark. Don't sneak white sections in.
-- **Italic serif body** — atmospheric stays sans top-to-bottom.
-- **Hairlines** — atmospheric uses elevated cards (`paper-2`, `paper-3`) instead of hairline-on-paper.
-- **Multiple accent hues** — one warm bloom + one secondary (pink/red) is the maximum. No teal-and-amber juggling.
-- **Glassmorphism** — banned. Atmospheric is *atmospheric*, not glass.
-- **Gradient text** — gate 5 universal. Stays banned.
-
-## Voice fixtures
-
-- *"Built for the dark."*
-- *"The page should feel like a place you could sit in."*
-- *"A canvas, then a tool."*
-- *"Generate, refine, ship — between Tuesday and Wednesday."*
-- *"The instrument is dark. The output is yours."*
-
-## Nav and footer voice
-
-- **Default nav:** N5 Floating pill — the blur backdrop sells the atmospheric mood. The pill sits over the dark canvas and the bloom shows through the blur.
-- **Acceptable also:** N9 Edge-aligned minimal (when the canvas is loud enough that nav should disappear into it); N4 ⌘K-only (when the audience is technical).
-- **Default footer:** Ft5 Statement — closes the page with a sentence. Atmospheric pages argue something; the footer states it.
-- **Acceptable also:** Ft1 Mast-headed; Ft2 Inline single line.
-- **Banned for atmospheric:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the calm); Ft8 Marquee scroll (kinetic, breaks the dark canvas); Ft3 Index columns (AI-footer fingerprint).
-
-See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
-
-## Stamp signature
-
-```css
-/* Hallmark · genre: atmospheric · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
-```
-
-## Reference register
-
-The aesthetic to match: dark canvas with two warm blooms behind the content, plain-English heroic display, single warm accent on small surfaces. Hand-built, not stock-AI.
+# Genre — atmospheric
+
+For the AI-creative product page. Dark canvas with warm radial blooms, confident sans display, expressive but plain-English copy, single warm accent. The aesthetic of a tool you'd actually want to use after dark — generative music, video, image, voice.
+
+## When to pick it
+
+Brief mentions any of: *AI tool, generative, music, video, image, voice, late-night, atmospheric, dark mode, expressive, creative tool, model playground, vibe-coded, dreamlike, nocturnal*. Also pick when the user names a *mood* that requires darkness (e.g. "moody", "cinematic", "after hours").
+
+## Themes that belong
+
+`Bloom` (canonical), `Midnight`, `Terminal`. Three dark-paper themes; the rotation walks them when atmospheric is active.
+
+## Voice
+
+- **Display** — Geist Sans 600 or similar weighty sans, plain English, no ornament. Letter-spacing tight (`-0.03em` or tighter).
+- **Body** — same family, 400. Light grey on dark (`oklch(86% 0.008 40)`).
+- **Accent** — single warm hue (orange / amber / red / pink). Used in radial-gradient blooms on the canvas, on focus rings, on small tags. Never on display text (that's gate 5 universal — gradient text stays banned).
+- **Layout** — centred or near-centred heroes. The canvas itself is the design; the type sits on top of an atmospheric ground.
+- **Motion** — fade-in only. No slide, no bounce. The atmosphere does the work.
+- **Copy tone** — direct, slightly poetic, specific. *"Make a house song about quitting your job."* is the calibration.
+
+## What this genre allows
+
+- **Radial-gradient bloom** on the body background — up to two blooms, each ~20–30 % footprint, fixed-attached, no animation. Gate 31 universal is loosened here.
+- **Centred heroes** — gate 7 universal is loosened. The canvas frames the type.
+- **Pill-rounded CTAs** with accent fill — confident, not pastel.
+- **Glow shadows** on hover (cards lift toward the user with a soft warm shadow).
+- **Larger expressive type** — display can hit 6 rem (`clamp(3rem, 6vw + 1rem, 6rem)`).
+
+## What this genre disallows
+
+- **Light-paper aesthetics** — the canvas is dark. Don't sneak white sections in.
+- **Italic serif body** — atmospheric stays sans top-to-bottom.
+- **Hairlines** — atmospheric uses elevated cards (`paper-2`, `paper-3`) instead of hairline-on-paper.
+- **Multiple accent hues** — one warm bloom + one secondary (pink/red) is the maximum. No teal-and-amber juggling.
+- **Glassmorphism** — banned. Atmospheric is *atmospheric*, not glass.
+- **Gradient text** — gate 5 universal. Stays banned.
+
+## Voice fixtures
+
+- *"Built for the dark."*
+- *"The page should feel like a place you could sit in."*
+- *"A canvas, then a tool."*
+- *"Generate, refine, ship — between Tuesday and Wednesday."*
+- *"The instrument is dark. The output is yours."*
+
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — the blur backdrop sells the atmospheric mood. The pill sits over the dark canvas and the bloom shows through the blur.
+- **Acceptable also:** N9 Edge-aligned minimal (when the canvas is loud enough that nav should disappear into it); N4 ⌘K-only (when the audience is technical).
+- **Default footer:** Ft5 Statement — closes the page with a sentence. Atmospheric pages argue something; the footer states it.
+- **Acceptable also:** Ft1 Mast-headed; Ft2 Inline single line.
+- **Banned for atmospheric:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the calm); Ft8 Marquee scroll (kinetic, breaks the dark canvas); Ft3 Index columns (AI-footer fingerprint).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+```css
+/* Hallmark · genre: atmospheric · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
+```
+
+## Reference register
+
+The aesthetic to match: dark canvas with two warm blooms behind the content, plain-English heroic display, single warm accent on small surfaces. Hand-built, not stock-AI.

package/template/.claude/skills/hallmark/references/genres/editorial.md

@@ -1,70 +1,70 @@
-# Genre — editorial (default)
-
-The canonical Hallmark voice. Pages built for content-led briefs: portfolios, manifestos, type specimens, agency sites, magazine pieces, indie podcasts, bakery / brand stories, considered B2C marketing.
-
-This is what Hallmark looks like when no other genre signal fires. It is the silent default.
-
-## When to pick it
-
-Default. Pick editorial when the brief does not name a specialised aesthetic — when the user said "a landing page for X" without telling you whether X is enterprise, atmospheric, or playful. Most briefs land here.
-
-## Themes that belong
-
-`Specimen`, `Newsprint`, `Atelier`, `Garden`, `Salon`, `Linen`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`. Twelve themes — plenty of variety inside the genre.
-
-## Voice
-
-- **Display** — italic serif, condensed sans, or display-heavy. Not Inter. Not Geist. The weight commits to an extreme (300 or 700+).
-- **Body** — workhorse serif (Newsreader, Cormorant) or a plain non-default sans (The Future, Söhne). Readable at 45–75 ch.
-- **Accent** — single warm or cool hue, used at < 5 % of any viewport.
-- **Layout** — asymmetric. Hairlines, not card borders. Generous whitespace.
-- **Motion** — quiet. One orchestrated entrance. No bounces.
-- **Copy tone** — specific, hand-set, slightly literary. Verbs over adjectives.
-
-## What this genre allows
-
-- Hairline rules, fleurons, drop caps, double rules.
-- Italic body in long-form content.
-- Asymmetric column counts (2:5, 3:7) on prose pages.
-- Hand-built SVG illustrations, pure-CSS art (Tier A enrichment).
-- Numbered display labels, edge-aligned headlines.
-- Single-accent-colour highlighting (`<mark>` band at x-height).
-
-## What this genre disallows
-
-The universal slop-test gates apply, plus these editorial-specific bans:
-
-- **Pill-rounded buttons** with gradient fill — pill is fine, gradient on a pill is not.
-- **Centred-everything heroes** (gate 7 universal). Editorial heroes are left-biased or asymmetric.
-- **Card-in-card** layouts (gate 4 universal).
-- **Three-column equal-icon-tile feature grid** (gate 3 universal).
-- **Glassmorphism** — never; the medium is paper, not glass.
-- **Pure black or pure white** as paper or ink (gate 8). Tint everything toward the anchor.
-
-## Voice fixtures
-
-Each macrostructure under editorial picks from these opening-line patterns. Imitate the *shape*, not the wording.
-
-- *"Type, set with care."*
-- *"Print discipline, on screen."*
-- *"A small skill that argues against the average."*
-- *"We compose the page like a broadsheet — hairlines, columns, restraint."*
-- *"Restraint, repeated, becomes a signature."*
-
-## Nav and footer voice
-
-- **Default nav:** N6 Newspaper masthead — full-width, large centred wordmark, thin issue/date row in serif small caps, double-rule below. Reads as broadsheet.
-- **Acceptable also:** N1 Wordmark + 2 links (when destinations are minimal); N9 Edge-aligned minimal (when the page is letter-shaped or atelier-quiet).
-- **Default footer:** Ft1 Mast-headed (wordmark anchors a single horizontal band, tagline + small links beside).
-- **Acceptable also:** Ft2 Inline single line; Ft4 Dense colophon (newsprint / almanac voices); Ft6 Letter close (atelier / garden / personal); Ft7 Newsletter-first (when the brand legitimately publishes).
-- **Banned for editorial:** N5 Floating pill (modern-minimal vocabulary), N7 Brutal slab (fights the restraint), Ft8 Marquee scroll (kinetic; wrong genre).
-
-See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
-
-## Stamp signature
-
-Output's CSS comment header reads:
-
-```css
-/* Hallmark · genre: editorial · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
-```
+# Genre — editorial (default)
+
+The canonical Hallmark voice. Pages built for content-led briefs: portfolios, manifestos, type specimens, agency sites, magazine pieces, indie podcasts, bakery / brand stories, considered B2C marketing.
+
+This is what Hallmark looks like when no other genre signal fires. It is the silent default.
+
+## When to pick it
+
+Default. Pick editorial when the brief does not name a specialised aesthetic — when the user said "a landing page for X" without telling you whether X is enterprise, atmospheric, or playful. Most briefs land here.
+
+## Themes that belong
+
+`Specimen`, `Newsprint`, `Atelier`, `Garden`, `Salon`, `Linen`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`. Twelve themes — plenty of variety inside the genre.
+
+## Voice
+
+- **Display** — italic serif, condensed sans, or display-heavy. Not Inter. Not Geist. The weight commits to an extreme (300 or 700+).
+- **Body** — workhorse serif (Newsreader, Cormorant) or a plain non-default sans (The Future, Söhne). Readable at 45–75 ch.
+- **Accent** — single warm or cool hue, used at < 5 % of any viewport.
+- **Layout** — asymmetric. Hairlines, not card borders. Generous whitespace.
+- **Motion** — quiet. One orchestrated entrance. No bounces.
+- **Copy tone** — specific, hand-set, slightly literary. Verbs over adjectives.
+
+## What this genre allows
+
+- Hairline rules, fleurons, drop caps, double rules.
+- Italic body in long-form content.
+- Asymmetric column counts (2:5, 3:7) on prose pages.
+- Hand-built SVG illustrations, pure-CSS art (Tier A enrichment).
+- Numbered display labels, edge-aligned headlines.
+- Single-accent-colour highlighting (`<mark>` band at x-height).
+
+## What this genre disallows
+
+The universal slop-test gates apply, plus these editorial-specific bans:
+
+- **Pill-rounded buttons** with gradient fill — pill is fine, gradient on a pill is not.
+- **Centred-everything heroes** (gate 7 universal). Editorial heroes are left-biased or asymmetric.
+- **Card-in-card** layouts (gate 4 universal).
+- **Three-column equal-icon-tile feature grid** (gate 3 universal).
+- **Glassmorphism** — never; the medium is paper, not glass.
+- **Pure black or pure white** as paper or ink (gate 8). Tint everything toward the anchor.
+
+## Voice fixtures
+
+Each macrostructure under editorial picks from these opening-line patterns. Imitate the *shape*, not the wording.
+
+- *"Type, set with care."*
+- *"Print discipline, on screen."*
+- *"A small skill that argues against the average."*
+- *"We compose the page like a broadsheet — hairlines, columns, restraint."*
+- *"Restraint, repeated, becomes a signature."*
+
+## Nav and footer voice
+
+- **Default nav:** N6 Newspaper masthead — full-width, large centred wordmark, thin issue/date row in serif small caps, double-rule below. Reads as broadsheet.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are minimal); N9 Edge-aligned minimal (when the page is letter-shaped or atelier-quiet).
+- **Default footer:** Ft1 Mast-headed (wordmark anchors a single horizontal band, tagline + small links beside).
+- **Acceptable also:** Ft2 Inline single line; Ft4 Dense colophon (newsprint / almanac voices); Ft6 Letter close (atelier / garden / personal); Ft7 Newsletter-first (when the brand legitimately publishes).
+- **Banned for editorial:** N5 Floating pill (modern-minimal vocabulary), N7 Brutal slab (fights the restraint), Ft8 Marquee scroll (kinetic; wrong genre).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+Output's CSS comment header reads:
+
+```css
+/* Hallmark · genre: editorial · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
+```

package/template/.claude/skills/hallmark/references/genres/modern-minimal.md

@@ -1,67 +1,67 @@
-# Genre — modern-minimal
-
-For the polished enterprise / dev-tool / API page. Stripe / Linear / ElevenLabs school: Geist sans, large confident displays, generous whitespace, pill CTAs, monochrome with optional accent. Minimalism with conviction, not the absence of choice.
-
-## When to pick it
-
-Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra, B2B, dashboard, billing, Stripe-like, Linear-like, ElevenLabs-like, dev experience, ship fast*. Also pick when the user names a brand colour but the rest of the brief is restrained.
-
-## Themes that belong
-
-`Quiet` (canonical). Future themes can be added to this genre — anything monochrome or near-monochrome with Geist / Inter-class sans display and pill CTAs.
-
-## Voice
-
-- **Display** — Geist Sans 500–700, Inter Tight Display 600+, or similar. Letter-spacing tight (`-0.02em` to `-0.035em`).
-- **Body** — Geist Sans 400, Inter 400. Same family as display (single-family discipline).
-- **Accent** — monochrome (accent IS ink) or a single restrained hue used only on focus rings. No chromatic floods.
-- **Layout** — two-column heroes (title left, lede right), generous whitespace, refined card surfaces with subtle borders.
-- **Motion** — minimal. Reveals are off; the page is composed.
-- **Copy tone** — declarative, specific, technical. "Built for X" is not banned but must name the X concretely.
-
-## What this genre allows
-
-- **Pill-rounded CTAs** — both filled and outlined. Black-filled primary + white-outlined secondary is the canonical pair.
-- **Pure white paper** (`#fff` / `oklch(100% 0 0)`) — gate 8 is loosened here.
-- **Zero-chroma neutrals** — gate 24 is loosened here. The Stripe / ElevenLabs school is monochrome by design.
-- **Two-column hero with title-left + paragraph-right** — explicitly canonical for this genre.
-- **Refined card surface** with very subtle border (`oklch(91% 0 0)`) and 8 px radius.
-- **Large, tight-set displays** (`clamp(2.5rem, 5vw + 0.5rem, 4.75rem)`).
-
-## What this genre disallows
-
-- **Italic serif body** — modern-minimal stays sans top-to-bottom.
-- **Hairline-everything** — borders are thin but visible, not the editorial 0.5 px hairline aesthetic.
-- **Asymmetric prose columns** — modern-minimal aligns left, justified to a regular grid.
-- **Drop caps, fleurons, ornament** — none of it.
-- **Bouncy / overshoot easings** — gate 13 universal applies strictly here.
-- **Gradient text** — gate 5 universal. Stays banned.
-- **Glassmorphism** — banned.
-
-## Voice fixtures
-
-- *"Built to ship."*
-- *"The platform that scales with you."*
-- *"From idea to production in an afternoon."*
-- *"Thirty thousand teams build with X."*
-- *"One API. Every channel."*
-
-## Nav and footer voice
-
-- **Default nav:** N5 Floating pill — content-sized, detached from edges, blur backdrop, soft shadow. Vercel / Linear / Framer / Raycast vocabulary.
-- **Acceptable also:** N1 Wordmark + 2 links (when destinations are genuinely minimal); N9 Edge-aligned minimal (when the brand earns the silence).
-- **Default footer:** Ft2 Inline single line — wordmark + tagline + tiny credit, hairline rule above. Restrained.
-- **Acceptable also:** Ft1 Mast-headed; Ft5 Statement (when the page wants a closing line).
-- **Banned for modern-minimal:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the restraint); Ft8 Marquee scroll (kinetic, wrong voice); Ft3 Index columns at full saturation (the AI-footer fingerprint — gate 52).
-
-See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
-
-## Stamp signature
-
-```css
-/* Hallmark · genre: modern-minimal · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
-```
-
-## Reference register (for the LLM, not credited to anyone)
-
-The aesthetic to match: confident sans display, clean white canvas, two-column hero, pill CTAs, mono accent. The user knows what this looks like when they see it. Do not name external sites in the output.
+# Genre — modern-minimal
+
+For the polished enterprise / dev-tool / API page. Stripe / Linear / ElevenLabs school: Geist sans, large confident displays, generous whitespace, pill CTAs, monochrome with optional accent. Minimalism with conviction, not the absence of choice.
+
+## When to pick it
+
+Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra, B2B, dashboard, billing, Stripe-like, Linear-like, ElevenLabs-like, dev experience, ship fast*. Also pick when the user names a brand colour but the rest of the brief is restrained.
+
+## Themes that belong
+
+`Quiet` (canonical). Future themes can be added to this genre — anything monochrome or near-monochrome with Geist / Inter-class sans display and pill CTAs.
+
+## Voice
+
+- **Display** — Geist Sans 500–700, Inter Tight Display 600+, or similar. Letter-spacing tight (`-0.02em` to `-0.035em`).
+- **Body** — Geist Sans 400, Inter 400. Same family as display (single-family discipline).
+- **Accent** — monochrome (accent IS ink) or a single restrained hue used only on focus rings. No chromatic floods.
+- **Layout** — two-column heroes (title left, lede right), generous whitespace, refined card surfaces with subtle borders.
+- **Motion** — minimal. Reveals are off; the page is composed.
+- **Copy tone** — declarative, specific, technical. "Built for X" is not banned but must name the X concretely.
+
+## What this genre allows
+
+- **Pill-rounded CTAs** — both filled and outlined. Black-filled primary + white-outlined secondary is the canonical pair.
+- **Pure white paper** (`#fff` / `oklch(100% 0 0)`) — gate 8 is loosened here.
+- **Zero-chroma neutrals** — gate 24 is loosened here. The Stripe / ElevenLabs school is monochrome by design.
+- **Two-column hero with title-left + paragraph-right** — explicitly canonical for this genre.
+- **Refined card surface** with very subtle border (`oklch(91% 0 0)`) and 8 px radius.
+- **Large, tight-set displays** (`clamp(2.5rem, 5vw + 0.5rem, 4.75rem)`).
+
+## What this genre disallows
+
+- **Italic serif body** — modern-minimal stays sans top-to-bottom.
+- **Hairline-everything** — borders are thin but visible, not the editorial 0.5 px hairline aesthetic.
+- **Asymmetric prose columns** — modern-minimal aligns left, justified to a regular grid.
+- **Drop caps, fleurons, ornament** — none of it.
+- **Bouncy / overshoot easings** — gate 13 universal applies strictly here.
+- **Gradient text** — gate 5 universal. Stays banned.
+- **Glassmorphism** — banned.
+
+## Voice fixtures
+
+- *"Built to ship."*
+- *"The platform that scales with you."*
+- *"From idea to production in an afternoon."*
+- *"Thirty thousand teams build with X."*
+- *"One API. Every channel."*
+
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — content-sized, detached from edges, blur backdrop, soft shadow. Vercel / Linear / Framer / Raycast vocabulary.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are genuinely minimal); N9 Edge-aligned minimal (when the brand earns the silence).
+- **Default footer:** Ft2 Inline single line — wordmark + tagline + tiny credit, hairline rule above. Restrained.
+- **Acceptable also:** Ft1 Mast-headed; Ft5 Statement (when the page wants a closing line).
+- **Banned for modern-minimal:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the restraint); Ft8 Marquee scroll (kinetic, wrong voice); Ft3 Index columns at full saturation (the AI-footer fingerprint — gate 52).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+```css
+/* Hallmark · genre: modern-minimal · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */
+```
+
+## Reference register (for the LLM, not credited to anyone)
+
+The aesthetic to match: confident sans display, clean white canvas, two-column hero, pill CTAs, mono accent. The user knows what this looks like when they see it. Do not name external sites in the output.