@phuc1403/musketeer 0.9.0 → 0.11.0

package/template/.claude/skills/hallmark/references/layout-and-space.md

@@ -1,111 +1,111 @@
-# Layout and space
-
-Layout is where "AI-generated" gets caught. Equal columns, everything centred, every card identical — these are the tells.
-
-## Principles
-
-- A layout has a **primary axis**. Left-biased, right-biased, top-heavy, or bottom-weighted. Centre-biased is a default, not a choice.
-- **Asymmetry reads as intentional.** Symmetry reads as generated. When in doubt, shift.
-- **Spacing is a scale, not a value.** Pick one scale. Use it everywhere. Don't type raw px.
-- **Varied spacing.** If every gap is 24px, the page is a template. Mix small, medium, and large gaps within the same layout.
-- **Break the grid on purpose.** A page with one element crossing the grid is stronger than a page that never does.
-
-## The spacing scale
-
-4pt base. Nine steps. Named by role, not size.
-
-```css
-:root {
-  --space-3xs: 0.125rem;  /*  2px */
-  --space-2xs: 0.25rem;   /*  4px */
-  --space-xs:  0.5rem;    /*  8px */
-  --space-sm:  0.75rem;   /* 12px */
-  --space-md:  1rem;      /* 16px */
-  --space-lg:  1.5rem;    /* 24px */
-  --space-xl:  2.5rem;    /* 40px */
-  --space-2xl: 4rem;      /* 64px */
-  --space-3xl: 6rem;      /* 96px */
-  --space-4xl: 9rem;      /* 144px */
-}
-```
-
-- Use `gap` for sibling spacing. It's cleaner than stacked margins, it participates in flex/grid, and it collapses predictably.
-- Use `margin` only for optical adjustments or breaking out of the flow. Never `margin` for a list of siblings.
-
-## Grids
-
-- **Prefer CSS Grid** for page layout, **Flexbox** for component internals.
-- `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for fluid responsive grids without media queries.
-- **Don't default to 3 columns of equal cards with icon-above-heading-above-copy.** This is *the* AI feature-grid. Break it: vary column widths with `grid-template-columns: 1.2fr 1fr 0.8fr`, or use a 12-column underlying grid and give each item a different span, or use 4-up with a 2-span hero, etc.
-- Use **named grid areas** for complex layouts and rename them at breakpoints.
-
-## Asymmetry techniques
-
-- **Wide left margin.** Treat the left as a permanent negative space — narrow column of labels, wide column of content. **Labels must NOT be section eyebrows / numbers paired with the heading** — that's gate-66-banned. Reserve this technique for body-level micro-labels (caption, footnote, date) alongside body copy.
-- **Hanging headers.** ⚠️ **Opt-in only.** Section labels sit in the left margin; content flows to the right. Permitted only when the user explicitly asks for an editorial / hanging-header layout AND no eyebrow / number / chapter tag sits in the left margin. The eyebrow-left / heading-right pattern is banned by slop-test gate 66 — it's the most reliable templated-editorial AI tell. Default to a stacked single-column section head.
-- **Offset grids.** Odd columns wider than even. Or the other way.
-- **Grid-breaks.** One element that deliberately extends past a column boundary: a pull-quote, a photograph, a rule, a number.
-- **Generous top, tight bottom** (or vice-versa). Sections don't need to be evenly padded.
-
-## Depth
-
-- Depth is **weight and scale**, not shadow. A heavier weight, a larger size, a warmer hue — these create hierarchy better than drop shadows.
-- If you use shadow, use one:
-  - **Whisper** — `0 1px 2px oklch(20% 0.01 <hue> / 0.05)` for hovering cards.
-  - **Hairline** — `0 0 0 1px oklch(30% 0.01 <hue> / 0.06)` as an alternative to a 1px border.
-- Never stack multiple shadows. Never use a coloured glow on a light background.
-- Z-index has **six levels, named.** Don't freestyle numbers.
-
-```css
-:root {
-  --z-base:     1;
-  --z-raised:   10;
-  --z-dropdown: 100;
-  --z-sticky:   200;
-  --z-modal:    400;
-  --z-toast:    500;
-  --z-tooltip:  600;
-}
-```
-
-## Bans
-
-- **Centre-aligned everything.** Headings + body + CTA all centred is the landing-page template every LLM emits.
-- **`min-height: 100vh` hero with one centred sentence.** Stop.
-- **Card-in-card.** A bordered container inside a bordered container. Pick one.
-- **Identical feature grid.** Three columns, three icons, three two-line headings, three three-line bodies. Change *something*.
-- **Equal padding on everything.** If the card padding equals the section padding equals the page padding, the rhythm is flat.
-- **`z-index: 9999`** and other ad-hoc z values. Use the scale.
-- **Shadow-on-dark accidental glow.** A drop shadow on a dark card creates a glow; that's wrong.
-
-## Page-edge clipping
-
-The clipped-edge enrichment archetype (E1) — and any other deliberately overflowing element (full-bleed marquee, oversized headline that exceeds the viewport on small screens, a tilted figure that pushes past a column) — needs a parent that *visually* shows the overflow without letting the document scroll horizontally.
-
-The default is unsafe: a `width: calc(100% + 12vw)` figure inside a section with `overflow: visible` makes the document scroll horizontally on every viewport. The page feels broken on touch devices. Slop-test gate 36 fails on this.
-
-**Always pair clipped-edge with a global clip.** At the top of the stylesheet:
-
-```css
-html { overflow-x: clip; }
-body { overflow-x: clip; }   /* fallback for older Safari */
-```
-
-Use `overflow-x: clip` rather than `overflow-x: hidden`:
-
-- `clip` preserves `position: sticky` and `position: fixed` on descendants.
-- `hidden` creates a new scroll container, which breaks sticky and can trap focus on overflowing inputs.
-
-The clipped-edge mockup keeps its visual extension; the page no longer scrolls horizontally. Same pattern works for full-bleed marquees, oversized headlines, and any deliberately-decorative overflow.
-
-The hero or section that *contains* the overflowing element keeps `overflow: visible` (so the figure renders past the parent edge); the global clip on `html` and `body` is the only safety net needed.
-
-## When in doubt
-
-If the layout looks fine but flat, do one of these before shipping:
-
-1. Add one break-out element.
-2. Unbalance a column width.
-3. Move the primary CTA out of the centre.
-4. Remove a card and replace it with negative space.
-5. Change one section's padding so the rhythm is uneven.
+# Layout and space
+
+Layout is where "AI-generated" gets caught. Equal columns, everything centred, every card identical — these are the tells.
+
+## Principles
+
+- A layout has a **primary axis**. Left-biased, right-biased, top-heavy, or bottom-weighted. Centre-biased is a default, not a choice.
+- **Asymmetry reads as intentional.** Symmetry reads as generated. When in doubt, shift.
+- **Spacing is a scale, not a value.** Pick one scale. Use it everywhere. Don't type raw px.
+- **Varied spacing.** If every gap is 24px, the page is a template. Mix small, medium, and large gaps within the same layout.
+- **Break the grid on purpose.** A page with one element crossing the grid is stronger than a page that never does.
+
+## The spacing scale
+
+4pt base. Nine steps. Named by role, not size.
+
+```css
+:root {
+  --space-3xs: 0.125rem;  /*  2px */
+  --space-2xs: 0.25rem;   /*  4px */
+  --space-xs:  0.5rem;    /*  8px */
+  --space-sm:  0.75rem;   /* 12px */
+  --space-md:  1rem;      /* 16px */
+  --space-lg:  1.5rem;    /* 24px */
+  --space-xl:  2.5rem;    /* 40px */
+  --space-2xl: 4rem;      /* 64px */
+  --space-3xl: 6rem;      /* 96px */
+  --space-4xl: 9rem;      /* 144px */
+}
+```
+
+- Use `gap` for sibling spacing. It's cleaner than stacked margins, it participates in flex/grid, and it collapses predictably.
+- Use `margin` only for optical adjustments or breaking out of the flow. Never `margin` for a list of siblings.
+
+## Grids
+
+- **Prefer CSS Grid** for page layout, **Flexbox** for component internals.
+- `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for fluid responsive grids without media queries.
+- **Don't default to 3 columns of equal cards with icon-above-heading-above-copy.** This is *the* AI feature-grid. Break it: vary column widths with `grid-template-columns: 1.2fr 1fr 0.8fr`, or use a 12-column underlying grid and give each item a different span, or use 4-up with a 2-span hero, etc.
+- Use **named grid areas** for complex layouts and rename them at breakpoints.
+
+## Asymmetry techniques
+
+- **Wide left margin.** Treat the left as a permanent negative space — narrow column of labels, wide column of content. **Labels must NOT be section eyebrows / numbers paired with the heading** — that's gate-66-banned. Reserve this technique for body-level micro-labels (caption, footnote, date) alongside body copy.
+- **Hanging headers.** ⚠️ **Opt-in only.** Section labels sit in the left margin; content flows to the right. Permitted only when the user explicitly asks for an editorial / hanging-header layout AND no eyebrow / number / chapter tag sits in the left margin. The eyebrow-left / heading-right pattern is banned by slop-test gate 66 — it's the most reliable templated-editorial AI tell. Default to a stacked single-column section head.
+- **Offset grids.** Odd columns wider than even. Or the other way.
+- **Grid-breaks.** One element that deliberately extends past a column boundary: a pull-quote, a photograph, a rule, a number.
+- **Generous top, tight bottom** (or vice-versa). Sections don't need to be evenly padded.
+
+## Depth
+
+- Depth is **weight and scale**, not shadow. A heavier weight, a larger size, a warmer hue — these create hierarchy better than drop shadows.
+- If you use shadow, use one:
+  - **Whisper** — `0 1px 2px oklch(20% 0.01 <hue> / 0.05)` for hovering cards.
+  - **Hairline** — `0 0 0 1px oklch(30% 0.01 <hue> / 0.06)` as an alternative to a 1px border.
+- Never stack multiple shadows. Never use a coloured glow on a light background.
+- Z-index has **six levels, named.** Don't freestyle numbers.
+
+```css
+:root {
+  --z-base:     1;
+  --z-raised:   10;
+  --z-dropdown: 100;
+  --z-sticky:   200;
+  --z-modal:    400;
+  --z-toast:    500;
+  --z-tooltip:  600;
+}
+```
+
+## Bans
+
+- **Centre-aligned everything.** Headings + body + CTA all centred is the landing-page template every LLM emits.
+- **`min-height: 100vh` hero with one centred sentence.** Stop.
+- **Card-in-card.** A bordered container inside a bordered container. Pick one.
+- **Identical feature grid.** Three columns, three icons, three two-line headings, three three-line bodies. Change *something*.
+- **Equal padding on everything.** If the card padding equals the section padding equals the page padding, the rhythm is flat.
+- **`z-index: 9999`** and other ad-hoc z values. Use the scale.
+- **Shadow-on-dark accidental glow.** A drop shadow on a dark card creates a glow; that's wrong.
+
+## Page-edge clipping
+
+The clipped-edge enrichment archetype (E1) — and any other deliberately overflowing element (full-bleed marquee, oversized headline that exceeds the viewport on small screens, a tilted figure that pushes past a column) — needs a parent that *visually* shows the overflow without letting the document scroll horizontally.
+
+The default is unsafe: a `width: calc(100% + 12vw)` figure inside a section with `overflow: visible` makes the document scroll horizontally on every viewport. The page feels broken on touch devices. Slop-test gate 36 fails on this.
+
+**Always pair clipped-edge with a global clip.** At the top of the stylesheet:
+
+```css
+html { overflow-x: clip; }
+body { overflow-x: clip; }   /* fallback for older Safari */
+```
+
+Use `overflow-x: clip` rather than `overflow-x: hidden`:
+
+- `clip` preserves `position: sticky` and `position: fixed` on descendants.
+- `hidden` creates a new scroll container, which breaks sticky and can trap focus on overflowing inputs.
+
+The clipped-edge mockup keeps its visual extension; the page no longer scrolls horizontally. Same pattern works for full-bleed marquees, oversized headlines, and any deliberately-decorative overflow.
+
+The hero or section that *contains* the overflowing element keeps `overflow: visible` (so the figure renders past the parent edge); the global clip on `html` and `body` is the only safety net needed.
+
+## When in doubt
+
+If the layout looks fine but flat, do one of these before shipping:
+
+1. Add one break-out element.
+2. Unbalance a column width.
+3. Move the primary CTA out of the centre.
+4. Remove a card and replace it with negative space.
+5. Change one section's padding so the rhythm is uneven.

package/template/.claude/skills/hallmark/references/macrostructures/01-bento-grid.md

@@ -1,35 +1,35 @@
-## 01 · Bento Grid
-
-Modular blocks of varying sizes laid out as an irregular grid. Each block is a feature, a quote, an image, a stat. Visual rhythm comes from size variation, not card uniformity.
-
-- **Heading:** centered display in a fixed-height hero (not full viewport).
-- **Body:** asymmetric grid — 8–15 blocks of mixed spans (1×1, 2×1, 1×2, 2×2).
-- **Divider:** consistent 12–24 px gap; no rules; the grid itself is the rhythm.
-- **Button:** outlined chip on the hero; tile-internal CTAs as typographic links.
-- **Image:** tightly cropped inside individual blocks; never full-bleed.
-- **Reveal:** none, or a subtle one-shot fade on grid-tile entry.
-
-Reach for it when the brief is "many small things to show", a feature page, a SaaS landing, or anywhere users have multiple equally-valid entry points.
-
-Avoid when the message is a single hero idea — Bento spreads attention; one-idea pages need Marquee or Stat-Led.
-
-Reference: Apple in-page sections, Framer feature pages, Tailwind UI templates.
-
-**Sample opening lines** (imitate the *specificity*, not the wording):
-> *"Tracejam · v0.4 · for SREs. Distributed tracing that explains itself."* — paraphrased from real observability tools
-> *"Resend is the email API for developers. Send transactional and marketing emails at scale."* — resend.com
-> *"The product development system for teams and agents."* — linear.app
-
-```html
-<header class="hero-fixed">…</header>
-<section class="bento">
-  <article class="cell span-2x2">…</article>  <!-- hero feature -->
-  <article class="cell span-1x1">…</article>
-  <article class="cell span-2x1">…</article>  <!-- wide stat -->
-  <article class="cell span-1x2">…</article>  <!-- tall image -->
-  <article class="cell span-1x1">…</article>
-  <article class="cell span-1x1">…</article>
-</section>
-```
-
----
+## 01 · Bento Grid
+
+Modular blocks of varying sizes laid out as an irregular grid. Each block is a feature, a quote, an image, a stat. Visual rhythm comes from size variation, not card uniformity.
+
+- **Heading:** centered display in a fixed-height hero (not full viewport).
+- **Body:** asymmetric grid — 8–15 blocks of mixed spans (1×1, 2×1, 1×2, 2×2).
+- **Divider:** consistent 12–24 px gap; no rules; the grid itself is the rhythm.
+- **Button:** outlined chip on the hero; tile-internal CTAs as typographic links.
+- **Image:** tightly cropped inside individual blocks; never full-bleed.
+- **Reveal:** none, or a subtle one-shot fade on grid-tile entry.
+
+Reach for it when the brief is "many small things to show", a feature page, a SaaS landing, or anywhere users have multiple equally-valid entry points.
+
+Avoid when the message is a single hero idea — Bento spreads attention; one-idea pages need Marquee or Stat-Led.
+
+Reference: Apple in-page sections, Framer feature pages, Tailwind UI templates.
+
+**Sample opening lines** (imitate the *specificity*, not the wording):
+> *"Tracejam · v0.4 · for SREs. Distributed tracing that explains itself."* — paraphrased from real observability tools
+> *"Resend is the email API for developers. Send transactional and marketing emails at scale."* — resend.com
+> *"The product development system for teams and agents."* — linear.app
+
+```html
+<header class="hero-fixed">…</header>
+<section class="bento">
+  <article class="cell span-2x2">…</article>  <!-- hero feature -->
+  <article class="cell span-1x1">…</article>
+  <article class="cell span-2x1">…</article>  <!-- wide stat -->
+  <article class="cell span-1x2">…</article>  <!-- tall image -->
+  <article class="cell span-1x1">…</article>
+  <article class="cell span-1x1">…</article>
+</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/02-long-document.md

@@ -1,34 +1,34 @@
-## 02 · Long Document
-
-Reads like a memo, a letter, or a journal entry. No marketing structure. Continuous prose with inline section heads. The page is *literature* about the product.
-
-- **Heading:** inline with body — section heads emerge from the paragraph flow as small caps or bold short phrases.
-- **Body:** single column, generous line-height (1.65+), measure 60–65ch.
-- **Divider:** negative space; the gap is the divider; occasionally a centered ornament for emphasis.
-- **Button:** typographic link inside a paragraph, not a separate block.
-- **Image:** inline, sized to text measure; never full-bleed.
-- **Reveal:** none. The page is just *there*.
-
-Reach for it for case studies, founder posts, mission pages, products whose sale is *philosophical*. The brief is "tell a story", not "list features".
-
-Avoid when there's a single decisive action to take — Long Document hides CTAs, which is wrong for transactional pages.
-
-Reference: Frank Chimero's site, destroytoday.com, long-form Substack essays in product disguise.
-
-**Sample opening lines** (imitate the *specificity*, not the wording):
-> *"Saturday, 6:14 a.m. The dough went in at midnight."* — opens with a time-stamp; the brand introduces itself as a moment in the day
-> *"A monthly art publication featuring contributions by some of the most engaged thinkers working today."* — e-flux.com/journal
-> *"We design everything for everyone."* — pentagram.com — refusal of the verb, treats design as universal practice
-
-```html
-<article class="prose">
-  <p class="lede">…</p>
-  <p>…</p>
-  <h2 class="inline">A small heading.</h2>
-  <p>…</p>
-  <blockquote>…</blockquote>
-  <p>… <a href="">read more →</a> …</p>
-</article>
-```
-
----
+## 02 · Long Document
+
+Reads like a memo, a letter, or a journal entry. No marketing structure. Continuous prose with inline section heads. The page is *literature* about the product.
+
+- **Heading:** inline with body — section heads emerge from the paragraph flow as small caps or bold short phrases.
+- **Body:** single column, generous line-height (1.65+), measure 60–65ch.
+- **Divider:** negative space; the gap is the divider; occasionally a centered ornament for emphasis.
+- **Button:** typographic link inside a paragraph, not a separate block.
+- **Image:** inline, sized to text measure; never full-bleed.
+- **Reveal:** none. The page is just *there*.
+
+Reach for it for case studies, founder posts, mission pages, products whose sale is *philosophical*. The brief is "tell a story", not "list features".
+
+Avoid when there's a single decisive action to take — Long Document hides CTAs, which is wrong for transactional pages.
+
+Reference: Frank Chimero's site, destroytoday.com, long-form Substack essays in product disguise.
+
+**Sample opening lines** (imitate the *specificity*, not the wording):
+> *"Saturday, 6:14 a.m. The dough went in at midnight."* — opens with a time-stamp; the brand introduces itself as a moment in the day
+> *"A monthly art publication featuring contributions by some of the most engaged thinkers working today."* — e-flux.com/journal
+> *"We design everything for everyone."* — pentagram.com — refusal of the verb, treats design as universal practice
+
+```html
+<article class="prose">
+  <p class="lede">…</p>
+  <p>…</p>
+  <h2 class="inline">A small heading.</h2>
+  <p>…</p>
+  <blockquote>…</blockquote>
+  <p>… <a href="">read more →</a> …</p>
+</article>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/03-marquee-hero.md

@@ -1,31 +1,31 @@
-## 03 · Marquee Hero
-
-The hero IS the page above the fold. A single bold statement or visual fills the viewport. No subhead, no CTA in fold. Below the fold the page becomes something else (a list, a grid, prose).
-
-- **Heading:** display fills the fold — 8–14 vw type, hugging the viewport edges.
-- **Body:** below-fold becomes a list of work or a single content block; the hero doesn't continue.
-- **Divider:** a thick rule between hero and below-fold, OR a hard colour change.
-- **Button:** none in fold; first CTA arrives below.
-- **Image:** none in fold (typography is the visual), OR a single full-bleed photograph as the fold *background*.
-- **Reveal:** the fold is static; below-fold may sweep in horizontally.
-
-Reach for it when the brand or person *is* the message — designer/director portfolios, indie products with a single declarative voice, any "this is who we are" page.
-
-Avoid for products whose value requires explanation in seconds. Marquee makes the user scroll before they understand.
-
-Reference: 14islands.com, destroytoday.com, many design studio homepages.
-
-**Sample opening lines** (imitate the *specificity*, not the wording):
-> *"Type, set with care."* — Hallmark Specimen — refusal of the verb, treats type as material
-> *"A studio for what's next."* — italic editorial display, names the practice without explaining it
-> *"Design like print: warm, off-register, intentional."* — Hallmark Riso — declarative, three modifiers, full stop
-
-```html
-<section class="marquee">
-  <h1 class="display-xxl">A statement.</h1>
-</section>
-<hr class="rule-thick" />
-<section class="below-fold">…</section>
-```
-
----
+## 03 · Marquee Hero
+
+The hero IS the page above the fold. A single bold statement or visual fills the viewport. No subhead, no CTA in fold. Below the fold the page becomes something else (a list, a grid, prose).
+
+- **Heading:** display fills the fold — 8–14 vw type, hugging the viewport edges.
+- **Body:** below-fold becomes a list of work or a single content block; the hero doesn't continue.
+- **Divider:** a thick rule between hero and below-fold, OR a hard colour change.
+- **Button:** none in fold; first CTA arrives below.
+- **Image:** none in fold (typography is the visual), OR a single full-bleed photograph as the fold *background*.
+- **Reveal:** the fold is static; below-fold may sweep in horizontally.
+
+Reach for it when the brand or person *is* the message — designer/director portfolios, indie products with a single declarative voice, any "this is who we are" page.
+
+Avoid for products whose value requires explanation in seconds. Marquee makes the user scroll before they understand.
+
+Reference: 14islands.com, destroytoday.com, many design studio homepages.
+
+**Sample opening lines** (imitate the *specificity*, not the wording):
+> *"Type, set with care."* — Hallmark Specimen — refusal of the verb, treats type as material
+> *"A studio for what's next."* — italic editorial display, names the practice without explaining it
+> *"Design like print: warm, off-register, intentional."* — Hallmark Riso — declarative, three modifiers, full stop
+
+```html
+<section class="marquee">
+  <h1 class="display-xxl">A statement.</h1>
+</section>
+<hr class="rule-thick" />
+<section class="below-fold">…</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/04-stat-led.md

@@ -1,32 +1,32 @@
-## 04 · Stat-Led
-
-The hero is a giant number — a metric, a count, a percentage. Everything that follows supports or qualifies it. Data is the narrative.
-
-- **Heading:** numeric display (8–12 rem), tabular figures, small qualifier line below.
-- **Body:** sections each anchored by a supporting stat or chart.
-- **Divider:** hairline rules between stat blocks; tabular-nums everywhere.
-- **Button:** outlined chip aligned beneath the qualifier.
-- **Image:** charts and small data-viz; no photography.
-- **Reveal:** number-tick on the hero figure — counter from 0 to target over ~500 ms.
-
-Reach for it when the brief is "we have proof in numbers" — enterprise/B2B, fundraising platforms, climate or impact pages.
-
-Avoid for products without a defensible single metric. A fake big number is worse than no number.
-
-Reference: Ahrefs, Stripe Sessions stat blocks, climate-impact dashboards, venture firm portfolio pages.
-
-**Sample opening lines** (imitate the *specificity*, not the wording — the number does the work):
-> *"+47% · faster · decide late."* — italicised number, three-word qualifier
-> *"4 seconds. From the alert link to the slow span."* — pairs the number with what it bought
-> *"434 total posts. New CSS you feel like you could use today."* — adam argyle, nerdy.dev — the count grounds the page in real volume
-
-```html
-<section class="stat-hero">
-  <div class="figure tnum">99.97<span class="unit">%</span></div>
-  <p class="qualifier">uptime across 2026, measured externally.</p>
-  <a class="cta-outline">Read the report →</a>
-</section>
-<section class="supporting-stats">…</section>
-```
-
----
+## 04 · Stat-Led
+
+The hero is a giant number — a metric, a count, a percentage. Everything that follows supports or qualifies it. Data is the narrative.
+
+- **Heading:** numeric display (8–12 rem), tabular figures, small qualifier line below.
+- **Body:** sections each anchored by a supporting stat or chart.
+- **Divider:** hairline rules between stat blocks; tabular-nums everywhere.
+- **Button:** outlined chip aligned beneath the qualifier.
+- **Image:** charts and small data-viz; no photography.
+- **Reveal:** number-tick on the hero figure — counter from 0 to target over ~500 ms.
+
+Reach for it when the brief is "we have proof in numbers" — enterprise/B2B, fundraising platforms, climate or impact pages.
+
+Avoid for products without a defensible single metric. A fake big number is worse than no number.
+
+Reference: Ahrefs, Stripe Sessions stat blocks, climate-impact dashboards, venture firm portfolio pages.
+
+**Sample opening lines** (imitate the *specificity*, not the wording — the number does the work):
+> *"+47% · faster · decide late."* — italicised number, three-word qualifier
+> *"4 seconds. From the alert link to the slow span."* — pairs the number with what it bought
+> *"434 total posts. New CSS you feel like you could use today."* — adam argyle, nerdy.dev — the count grounds the page in real volume
+
+```html
+<section class="stat-hero">
+  <div class="figure tnum">99.97<span class="unit">%</span></div>
+  <p class="qualifier">uptime across 2026, measured externally.</p>
+  <a class="cta-outline">Read the report →</a>
+</section>
+<section class="supporting-stats">…</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/05-workbench.md

@@ -1,32 +1,32 @@
-## 05 · Workbench
-
-Product screenshots in frames are the primary content. The page is a guided tour of the app in use. Less marketing copy, more "here's what you do with it."
-
-- **Heading:** small, functional — workbench pages don't shout.
-- **Body:** sequence of screenshot blocks, each with a short caption and an inline annotation arrow.
-- **Divider:** the screenshot frame *is* the divider; sections separate by gap and frame.
-- **Button:** sticky-bottom CTA bar after the third screenshot ("Try it →"), once context is built.
-- **Image:** central — browser/device frames around real product captures, with annotation arrows.
-- **Reveal:** type-unmask on captions; screenshots load instantly.
-
-Reach for it for SaaS, developer tools, IDE extensions — anywhere seeing the product in motion is the sale.
-
-Avoid when the product is conceptual or services-led. Workbench needs a UI to show.
-
-Reference: Linear.app, Vercel, Raycast, Arc Browser.
-
-**Sample opening lines** (imitate the *specificity*, not the wording — the page walks the user through):
-> *"$ streampipe parse access.log --filter status=5xx | jq"* — open on a real command, not a marketing claim
-> *"Read anything that emits lines. Files, pipes, sockets, kubectl logs."* — names the inputs, refuses abstraction
-> *"Open the trace, find the span, fix the regression. No glossary required."* — three concrete verbs, then a refusal
-
-```html
-<header class="lite">…</header>
-<section class="screenshot-frame">
-  <figure><img src="step-1.png" /><figcaption>Open a project.</figcaption></figure>
-</section>
-<section class="screenshot-frame">…</section>
-<aside class="sticky-cta">Try it free →</aside>
-```
-
----
+## 05 · Workbench
+
+Product screenshots in frames are the primary content. The page is a guided tour of the app in use. Less marketing copy, more "here's what you do with it."
+
+- **Heading:** small, functional — workbench pages don't shout.
+- **Body:** sequence of screenshot blocks, each with a short caption and an inline annotation arrow.
+- **Divider:** the screenshot frame *is* the divider; sections separate by gap and frame.
+- **Button:** sticky-bottom CTA bar after the third screenshot ("Try it →"), once context is built.
+- **Image:** central — browser/device frames around real product captures, with annotation arrows.
+- **Reveal:** type-unmask on captions; screenshots load instantly.
+
+Reach for it for SaaS, developer tools, IDE extensions — anywhere seeing the product in motion is the sale.
+
+Avoid when the product is conceptual or services-led. Workbench needs a UI to show.
+
+Reference: Linear.app, Vercel, Raycast, Arc Browser.
+
+**Sample opening lines** (imitate the *specificity*, not the wording — the page walks the user through):
+> *"$ streampipe parse access.log --filter status=5xx | jq"* — open on a real command, not a marketing claim
+> *"Read anything that emits lines. Files, pipes, sockets, kubectl logs."* — names the inputs, refuses abstraction
+> *"Open the trace, find the span, fix the regression. No glossary required."* — three concrete verbs, then a refusal
+
+```html
+<header class="lite">…</header>
+<section class="screenshot-frame">
+  <figure><img src="step-1.png" /><figcaption>Open a project.</figcaption></figure>
+</section>
+<section class="screenshot-frame">…</section>
+<aside class="sticky-cta">Try it free →</aside>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/06-conversational-faq.md

@@ -1,33 +1,33 @@
-## 06 · Conversational FAQ
-
-Bold questions, brief answers. The page reads like an honest interview with the product. Often each Q/A is a collapsible accordion.
-
-- **Heading:** each section *is* a question — a short, direct phrase ending in `?`.
-- **Body:** answer in 2–4 short paragraphs immediately below the question.
-- **Divider:** thin rule between Q/A pairs, or zero rule and a paper-colour swap.
-- **Button:** typographic link inside answers ("Read the full policy →"); one outlined CTA at the foot.
-- **Image:** sparse — maybe one diagram per long answer; mostly text.
-- **Reveal:** none on load; accordion expand uses 200 ms `--ease-out` on `grid-template-rows: 0fr → 1fr`.
-
-Reach for it near pricing, for products that meet skepticism, for educational/regulated industries.
-
-Avoid as the *primary* page. FAQ usually pairs with another macrostructure that opens the page.
-
-Reference: many SaaS pricing pages, Casper, Substack help pages.
-
-**Sample opening lines** (imitate the *specificity* — questions are real questions, answers are short and concrete):
-> *"What is this for? — A single-binary CLI for parsing log streams from stdin."* — names the form factor, names the input
-> *"How is this different from X? — It's about time."* — cron.com — answers obliquely, with a phrase that has weight
-> *"Who built this? — Three of us, in Lisbon, since 2014."* — date + place + count, no marketing
-
-```html
-<section class="faq">
-  <details>
-    <summary><h2>How long does setup take?</h2></summary>
-    <div class="answer">…</div>
-  </details>
-  <details>…</details>
-</section>
-```
-
----
+## 06 · Conversational FAQ
+
+Bold questions, brief answers. The page reads like an honest interview with the product. Often each Q/A is a collapsible accordion.
+
+- **Heading:** each section *is* a question — a short, direct phrase ending in `?`.
+- **Body:** answer in 2–4 short paragraphs immediately below the question.
+- **Divider:** thin rule between Q/A pairs, or zero rule and a paper-colour swap.
+- **Button:** typographic link inside answers ("Read the full policy →"); one outlined CTA at the foot.
+- **Image:** sparse — maybe one diagram per long answer; mostly text.
+- **Reveal:** none on load; accordion expand uses 200 ms `--ease-out` on `grid-template-rows: 0fr → 1fr`.
+
+Reach for it near pricing, for products that meet skepticism, for educational/regulated industries.
+
+Avoid as the *primary* page. FAQ usually pairs with another macrostructure that opens the page.
+
+Reference: many SaaS pricing pages, Casper, Substack help pages.
+
+**Sample opening lines** (imitate the *specificity* — questions are real questions, answers are short and concrete):
+> *"What is this for? — A single-binary CLI for parsing log streams from stdin."* — names the form factor, names the input
+> *"How is this different from X? — It's about time."* — cron.com — answers obliquely, with a phrase that has weight
+> *"Who built this? — Three of us, in Lisbon, since 2014."* — date + place + count, no marketing
+
+```html
+<section class="faq">
+  <details>
+    <summary><h2>How long does setup take?</h2></summary>
+    <div class="answer">…</div>
+  </details>
+  <details>…</details>
+</section>
+```
+
+---