@phuc1403/musketeer 0.8.0 → 0.10.0

package/template/.claude/skills/hallmark/references/macrostructures/07-manifesto.md

@@ -1,32 +1,32 @@
-## 07 · Manifesto
-
-Polemical large type. Declaration energy. The page tells the reader what to believe before it tells them what to buy. Often political-poster aesthetic.
-
-- **Heading:** all-caps display tilted slightly (`-2°` to `-4°`), or stacked colour-block highlights on the verb.
-- **Body:** short paragraphs each holding one assertion, large enough to read across the room.
-- **Divider:** bleed-colour blocks between sections; no hairlines.
-- **Button:** oversized solid block, accent colour, set far below the fold.
-- **Image:** none, or a single high-contrast B&W photograph used as a section bleed.
-- **Reveal:** horizontal sweep on section entry.
-
-Reach for it for brand repositioning announcements, mission-led indie products, design-studio beliefs pages.
-
-Avoid for transactional pages. Manifesto sells *agreement*, not action.
-
-Reference: Linear's positioning pages, agency rebrand sites, political campaign landing pages.
-
-**Sample opening lines** (imitate the *specificity* — manifestos commit, they don't hedge):
-> *"WE ARE A STUDIO. WE ARE NOT A PLATFORM."* — Meridian (test 04) — defines by refusal, all caps, a single accent word
-> *"We design products that last twelve years. We do not design products that need replacing every two."* — concrete number, paired declaration
-> *"Lightness above weightiness, elevate everyone you encounter."* — craigmod.com — one-line principle, no explanation needed
-
-```html
-<section class="manifesto bleed-ink">
-  <h1 class="caps display-xxl">WE BELIEVE <em class="block-accent">DESIGN</em> IS SLOW.</h1>
-</section>
-<section class="bleed-paper">
-  <p class="claim">It costs less than the rework you'll do without it.</p>
-</section>
-```
-
----
+## 07 · Manifesto
+
+Polemical large type. Declaration energy. The page tells the reader what to believe before it tells them what to buy. Often political-poster aesthetic.
+
+- **Heading:** all-caps display tilted slightly (`-2°` to `-4°`), or stacked colour-block highlights on the verb.
+- **Body:** short paragraphs each holding one assertion, large enough to read across the room.
+- **Divider:** bleed-colour blocks between sections; no hairlines.
+- **Button:** oversized solid block, accent colour, set far below the fold.
+- **Image:** none, or a single high-contrast B&W photograph used as a section bleed.
+- **Reveal:** horizontal sweep on section entry.
+
+Reach for it for brand repositioning announcements, mission-led indie products, design-studio beliefs pages.
+
+Avoid for transactional pages. Manifesto sells *agreement*, not action.
+
+Reference: Linear's positioning pages, agency rebrand sites, political campaign landing pages.
+
+**Sample opening lines** (imitate the *specificity* — manifestos commit, they don't hedge):
+> *"WE ARE A STUDIO. WE ARE NOT A PLATFORM."* — Meridian (test 04) — defines by refusal, all caps, a single accent word
+> *"We design products that last twelve years. We do not design products that need replacing every two."* — concrete number, paired declaration
+> *"Lightness above weightiness, elevate everyone you encounter."* — craigmod.com — one-line principle, no explanation needed
+
+```html
+<section class="manifesto bleed-ink">
+  <h1 class="caps display-xxl">WE BELIEVE <em class="block-accent">DESIGN</em> IS SLOW.</h1>
+</section>
+<section class="bleed-paper">
+  <p class="claim">It costs less than the rework you'll do without it.</p>
+</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/08-photographic.md

@@ -1,34 +1,34 @@
-## 08 · Photographic
-
-A single huge image dominates each fold. Text is small annotation, not headline. The design says *look* before it says *read*.
-
-- **Heading:** small caption near a corner of the image; never centered display.
-- **Body:** full-bleed image bands alternating with narrow text bands.
-- **Divider:** the image edge IS the divider; no rules.
-- **Button:** typographic link tucked under the caption.
-- **Image:** the whole point — full-bleed, edge to edge, often a single photo per fold.
-- **Reveal:** no spatial motion; let the photographs do the work.
-
-Reach for it for fashion, hospitality, photography portfolios, lifestyle e-commerce, any brand whose product is a *feeling*.
-
-Avoid without real photography. AI-generated stock undoes the macrostructure.
-
-Reference: Aimé Leon Dore, Mr Porter editorial, Stüssy lookbooks.
-
-**Sample opening lines** (imitate the *specificity* — captions for photographs are dates, places, plate numbers — not marketing):
-> *"Plate 47 · scored before the proof."* — Maple Street Bread (test 03) — a number, a moment in the process
-> *"Spring, 2026."* — Atelier-style — two words, full stop
-> *"From the working archive."* — gives the photograph provenance without explaining it
-
-```html
-<section class="photo-fold">
-  <img class="bleed" src="hero.jpg" />
-  <p class="caption">Spring, 2026.</p>
-</section>
-<section class="text-fold">
-  <p class="lede">…</p>
-</section>
-<section class="photo-fold">…</section>
-```
-
----
+## 08 · Photographic
+
+A single huge image dominates each fold. Text is small annotation, not headline. The design says *look* before it says *read*.
+
+- **Heading:** small caption near a corner of the image; never centered display.
+- **Body:** full-bleed image bands alternating with narrow text bands.
+- **Divider:** the image edge IS the divider; no rules.
+- **Button:** typographic link tucked under the caption.
+- **Image:** the whole point — full-bleed, edge to edge, often a single photo per fold.
+- **Reveal:** no spatial motion; let the photographs do the work.
+
+Reach for it for fashion, hospitality, photography portfolios, lifestyle e-commerce, any brand whose product is a *feeling*.
+
+Avoid without real photography. AI-generated stock undoes the macrostructure.
+
+Reference: Aimé Leon Dore, Mr Porter editorial, Stüssy lookbooks.
+
+**Sample opening lines** (imitate the *specificity* — captions for photographs are dates, places, plate numbers — not marketing):
+> *"Plate 47 · scored before the proof."* — Maple Street Bread (test 03) — a number, a moment in the process
+> *"Spring, 2026."* — Atelier-style — two words, full stop
+> *"From the working archive."* — gives the photograph provenance without explaining it
+
+```html
+<section class="photo-fold">
+  <img class="bleed" src="hero.jpg" />
+  <p class="caption">Spring, 2026.</p>
+</section>
+<section class="text-fold">
+  <p class="lede">…</p>
+</section>
+<section class="photo-fold">…</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/09-quote-led.md

@@ -1,32 +1,32 @@
-## 09 · Quote-Led
-
-The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brand's voice. The page leads with social proof.
-
-- **Heading:** italic display setting a customer's quote (36–60 px), with attribution below in small caps.
-- **Body:** continues with additional testimonials, case studies, or a quiet feature list.
-- **Divider:** centered quote-mark glyph or an em-rule between testimonials.
-- **Button:** typographic link beneath the attribution ("Read the full case study →").
-- **Image:** small avatar or company logo by the attribution; otherwise none.
-- **Reveal:** none in fold; below-fold may stagger.
-
-Reach for it for B2B products with strong customer voices, agency case-study pages, fundraising sites, anywhere "people like me use this" is the unlock.
-
-Avoid for new products without real testimonials. Fake quotes destroy trust on inspection.
-
-Reference: many B2B SaaS landings, agency homepages, university development pages.
-
-**Sample opening lines** (imitate the *specificity* — quote-led pages let someone else say it, then attribute):
-> *"I started listening on a long bus ride. By the third episode I'd missed my stop, and I didn't mind."* — Tide (test 01) — story-shaped, attributed to a listener
-> *"Restraint, repeated, becomes a signature."* — Hallmark Atelier — short, philosophical, signed by the studio
-> *"It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes."* — Tracejam-style — names the outcome with a number
-
-```html
-<section class="quote-hero">
-  <blockquote class="display-italic">"…"</blockquote>
-  <p class="attribution">— Name, Title, Company</p>
-  <a class="link">Read the case →</a>
-</section>
-<section class="more-quotes">…</section>
-```
-
----
+## 09 · Quote-Led
+
+The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brand's voice. The page leads with social proof.
+
+- **Heading:** italic display setting a customer's quote (36–60 px), with attribution below in small caps.
+- **Body:** continues with additional testimonials, case studies, or a quiet feature list.
+- **Divider:** centered quote-mark glyph or an em-rule between testimonials.
+- **Button:** typographic link beneath the attribution ("Read the full case study →").
+- **Image:** small avatar or company logo by the attribution; otherwise none.
+- **Reveal:** none in fold; below-fold may stagger.
+
+Reach for it for B2B products with strong customer voices, agency case-study pages, fundraising sites, anywhere "people like me use this" is the unlock.
+
+Avoid for new products without real testimonials. Fake quotes destroy trust on inspection.
+
+Reference: many B2B SaaS landings, agency homepages, university development pages.
+
+**Sample opening lines** (imitate the *specificity* — quote-led pages let someone else say it, then attribute):
+> *"I started listening on a long bus ride. By the third episode I'd missed my stop, and I didn't mind."* — Tide (test 01) — story-shaped, attributed to a listener
+> *"Restraint, repeated, becomes a signature."* — Hallmark Atelier — short, philosophical, signed by the studio
+> *"It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes."* — Tracejam-style — names the outcome with a number
+
+```html
+<section class="quote-hero">
+  <blockquote class="display-italic">"…"</blockquote>
+  <p class="attribution">— Name, Title, Company</p>
+  <a class="link">Read the case →</a>
+</section>
+<section class="more-quotes">…</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/10-specimen.md

@@ -1,32 +1,32 @@
-## 10 · Specimen *(no longer the default)*
-
-Numbered left-margin labels, huge serif display, asymmetric column spans, hairline rules, typographic-only CTA, generous whitespace. Editorial / type-foundry energy.
-
-- **Heading:** left-margin number + label (`01 — HELLO.`) beside a large serif phrase.
-- **Body:** asymmetric spans — narrow label column / wide content column.
-- **Divider:** hairline rules between sections.
-- **Button:** typographic link with arrow ("Open your studio →"); no box, no fill.
-- **Image:** none, or a hand-drawn SVG accent in the wide left margin.
-- **Reveal:** fade-up stagger on first load.
-
-Reach for it ONLY when the brief is explicitly editorial, type-foundry, journal, or "specimen sheet". Otherwise pick something else.
-
-**Banned as a default.** If the brief is vague and you've defaulted here, restart.
-
-Reference: type foundry homepages (Klim, Pangram Pangram, Production Type), some editorial portfolios.
-
-**Sample opening lines** (imitate the *specificity* — Specimen openings are foundry-voice, treating type as material culture):
-> *"A thing well made."* — klim.co.nz — refusal of the verb, treats design as material
-> *"Type, set with care."* — Hallmark Specimen — three words, a colon implied
-> *"Creative direction, design and type for culture since 2003."* — apracticeforeverydaylife.com — date-anchored, names verticals
-
-```html
-<header class="specimen">
-  <p class="num-label">01 — HELLO.</p>
-  <h1 class="serif-xxl">A quiet <em>instrument.</em></h1>
-  <p class="lede narrow">…</p>
-  <a class="link">Open your studio →</a>
-</header>
-```
-
----
+## 10 · Specimen *(no longer the default)*
+
+Numbered left-margin labels, huge serif display, asymmetric column spans, hairline rules, typographic-only CTA, generous whitespace. Editorial / type-foundry energy.
+
+- **Heading:** left-margin number + label (`01 — HELLO.`) beside a large serif phrase.
+- **Body:** asymmetric spans — narrow label column / wide content column.
+- **Divider:** hairline rules between sections.
+- **Button:** typographic link with arrow ("Open your studio →"); no box, no fill.
+- **Image:** none, or a hand-drawn SVG accent in the wide left margin.
+- **Reveal:** fade-up stagger on first load.
+
+Reach for it ONLY when the brief is explicitly editorial, type-foundry, journal, or "specimen sheet". Otherwise pick something else.
+
+**Banned as a default.** If the brief is vague and you've defaulted here, restart.
+
+Reference: type foundry homepages (Klim, Pangram Pangram, Production Type), some editorial portfolios.
+
+**Sample opening lines** (imitate the *specificity* — Specimen openings are foundry-voice, treating type as material culture):
+> *"A thing well made."* — klim.co.nz — refusal of the verb, treats design as material
+> *"Type, set with care."* — Hallmark Specimen — three words, a colon implied
+> *"Creative direction, design and type for culture since 2003."* — apracticeforeverydaylife.com — date-anchored, names verticals
+
+```html
+<header class="specimen">
+  <p class="num-label">01 — HELLO.</p>
+  <h1 class="serif-xxl">A quiet <em>instrument.</em></h1>
+  <p class="lede narrow">…</p>
+  <a class="link">Open your studio →</a>
+</header>
+```
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/11-catalogue.md

@@ -1,23 +1,23 @@
-## 11 · Catalogue
-
-Uniform grid of variations of the same thing — typefaces, colour palettes, product SKUs. The page is a visual index of inventory.
-
-- **Heading:** brand mark + tagline only; no big display.
-- **Body:** grid of identical-sized cards (3–5 per row), each one variant of the core product.
-- **Divider:** hairline rules between rows; sometimes a category label band.
-- **Button:** card-internal link to detail page; no global CTA.
-- **Image:** specimen thumbnail per card, or a swatch.
-- **Reveal:** none.
-
-Reach for it for foundries, palette generators, font shops, colour systems, capsule collections.
-
-Avoid for narrative brands. Catalogue treats every item as equal — wrong for products with hierarchy.
-
-Reference: Klim Type Foundry, Pangram Pangram, Coolors palettes.
-
-**Sample opening lines** (imitate the *specificity* — Catalogue openings are inventory headers, dated, with a count):
-> *"Today's loaves."* — Maple Street Bread (test 03) — two words, ownership of the day
-> *"Five collections, in store now."* — names the count and the where
-> *"Thirty-eight items · Spring 2026 · all hand-stitched."* — count, date, qualifier; no adjectives
-
----
+## 11 · Catalogue
+
+Uniform grid of variations of the same thing — typefaces, colour palettes, product SKUs. The page is a visual index of inventory.
+
+- **Heading:** brand mark + tagline only; no big display.
+- **Body:** grid of identical-sized cards (3–5 per row), each one variant of the core product.
+- **Divider:** hairline rules between rows; sometimes a category label band.
+- **Button:** card-internal link to detail page; no global CTA.
+- **Image:** specimen thumbnail per card, or a swatch.
+- **Reveal:** none.
+
+Reach for it for foundries, palette generators, font shops, colour systems, capsule collections.
+
+Avoid for narrative brands. Catalogue treats every item as equal — wrong for products with hierarchy.
+
+Reference: Klim Type Foundry, Pangram Pangram, Coolors palettes.
+
+**Sample opening lines** (imitate the *specificity* — Catalogue openings are inventory headers, dated, with a count):
+> *"Today's loaves."* — Maple Street Bread (test 03) — two words, ownership of the day
+> *"Five collections, in store now."* — names the count and the where
+> *"Thirty-eight items · Spring 2026 · all hand-stitched."* — count, date, qualifier; no adjectives
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/12-letter.md

@@ -1,23 +1,23 @@
-## 12 · Letter
-
-First-person, written, intimate. Opens with a greeting ("Dear friend,"). No buttons in the fold. Reads as a personal note from the founder.
-
-- **Heading:** salutation in serif italic ("Dear reader,"), 1.5–2× body size.
-- **Body:** prose, single column, narrow measure (50ch), as if typed.
-- **Divider:** paragraph spacing only, occasional `* * *` separator.
-- **Button:** sign-off link at the foot ("p.s. join us if you'd like →").
-- **Image:** maybe one signature scan, or a quiet inline photograph.
-- **Reveal:** none.
-
-Reach for it for personal brands, indie founder announcements, sabbatical or pivot pages, donation appeals.
-
-Avoid for transactional commerce. Letter is intimate; commerce is functional.
-
-Reference: Frank Chimero's site, founder farewell posts, indie newsletter front pages.
-
-**Sample opening lines** (imitate the *specificity* — Letter openings are first-person greetings, dated, with a place if relevant):
-> *"Hello, I'm Anya."* — Anya (test 06) — single line, name, full stop
-> *"Saturday, 6:14 a.m. The dough went in at midnight."* — opens on a moment, then explains it
-> *"Hey there. This page is soft because the surface should be soft."* — Hallmark Plume — colloquial open + a principle
-
----
+## 12 · Letter
+
+First-person, written, intimate. Opens with a greeting ("Dear friend,"). No buttons in the fold. Reads as a personal note from the founder.
+
+- **Heading:** salutation in serif italic ("Dear reader,"), 1.5–2× body size.
+- **Body:** prose, single column, narrow measure (50ch), as if typed.
+- **Divider:** paragraph spacing only, occasional `* * *` separator.
+- **Button:** sign-off link at the foot ("p.s. join us if you'd like →").
+- **Image:** maybe one signature scan, or a quiet inline photograph.
+- **Reveal:** none.
+
+Reach for it for personal brands, indie founder announcements, sabbatical or pivot pages, donation appeals.
+
+Avoid for transactional commerce. Letter is intimate; commerce is functional.
+
+Reference: Frank Chimero's site, founder farewell posts, indie newsletter front pages.
+
+**Sample opening lines** (imitate the *specificity* — Letter openings are first-person greetings, dated, with a place if relevant):
+> *"Hello, I'm Anya."* — Anya (test 06) — single line, name, full stop
+> *"Saturday, 6:14 a.m. The dough went in at midnight."* — opens on a moment, then explains it
+> *"Hey there. This page is soft because the surface should be soft."* — Hallmark Plume — colloquial open + a principle
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/13-index-first.md

@@ -1,23 +1,23 @@
-## 13 · Index-First
-
-The page IS a list of links. No hero image, no narrative flow. Pure navigation as design.
-
-- **Heading:** one short paragraph at the top introducing the index, no display type.
-- **Body:** vertical list of categorised links; sometimes a sidebar of filters.
-- **Divider:** hairline rules between rows; or zero rules with paper-colour bands.
-- **Button:** the links themselves are the buttons.
-- **Image:** none, or tiny favicons by each entry.
-- **Reveal:** none.
-
-Reach for it for documentation hubs, knowledge bases, archive front pages, design system entries, link-in-bio pages with substance.
-
-Avoid for marketing pages. Index-First is for browsing audiences; selling needs structure.
-
-Reference: Are.na's homepage feel, archive sites, documentation indices.
-
-**Sample opening lines** (imitate the *specificity* — Index-First openings are headers for what's below, sometimes nothing more than a label):
-> *"Selected work · 2018 — 2026."* — date range, no preamble
-> *"Things Become Other Things · Lightness above weightiness."* — craigmod.com — two phrases joined by a divider
-> *"Writer + Photographer."* — craigmod.com — three words, summarises the whole site
-
----
+## 13 · Index-First
+
+The page IS a list of links. No hero image, no narrative flow. Pure navigation as design.
+
+- **Heading:** one short paragraph at the top introducing the index, no display type.
+- **Body:** vertical list of categorised links; sometimes a sidebar of filters.
+- **Divider:** hairline rules between rows; or zero rules with paper-colour bands.
+- **Button:** the links themselves are the buttons.
+- **Image:** none, or tiny favicons by each entry.
+- **Reveal:** none.
+
+Reach for it for documentation hubs, knowledge bases, archive front pages, design system entries, link-in-bio pages with substance.
+
+Avoid for marketing pages. Index-First is for browsing audiences; selling needs structure.
+
+Reference: Are.na's homepage feel, archive sites, documentation indices.
+
+**Sample opening lines** (imitate the *specificity* — Index-First openings are headers for what's below, sometimes nothing more than a label):
+> *"Selected work · 2018 — 2026."* — date range, no preamble
+> *"Things Become Other Things · Lightness above weightiness."* — craigmod.com — two phrases joined by a divider
+> *"Writer + Photographer."* — craigmod.com — three words, summarises the whole site
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/14-narrative-workflow.md

@@ -1,23 +1,23 @@
-## 14 · Narrative Workflow
-
-Numbered stages tell the story of how the user uses the product over time. Each section is a phase (1.0 → 2.0 → 3.0 → 4.0). The page is a process timeline.
-
-- **Heading:** large numbered stage labels (`1.0 INTAKE`, `2.0 PLAN`).
-- **Body:** each stage has a short explanation and a small product visual.
-- **Divider:** thick numbered rule between stages.
-- **Button:** stage-internal links; one global "Start at stage 1 →" at the foot.
-- **Image:** small product capture per stage, often annotated.
-- **Reveal:** sweep horizontal as stages enter the viewport.
-
-Reach for it for products with explicit workflows — project management, design-to-dev pipelines, writing tools.
-
-Avoid for tools that work in *one* moment. Narrative Workflow needs a real sequence.
-
-Reference: Linear's how-it-works pages, some Figma marketing pages.
-
-**Sample opening lines** (imitate the *specificity* — Narrative Workflow openings are stage labels: numbered, declarative, in process language):
-> *"01 · sourdough overnight · 02 · score at dawn · 03 · pull at seven."* — three numbered stages, no marketing
-> *"1.0 · parse · 2.0 · filter · 3.0 · route."* — Streampipe (test 02) — versioned numbers, three concrete verbs
-> *"I. We design products that last twelve years. II. A material is sustainable when someone, somewhere, can repair it."* — Meridian — Roman numerals + declarative
-
----
+## 14 · Narrative Workflow
+
+Numbered stages tell the story of how the user uses the product over time. Each section is a phase (1.0 → 2.0 → 3.0 → 4.0). The page is a process timeline.
+
+- **Heading:** large numbered stage labels (`1.0 INTAKE`, `2.0 PLAN`).
+- **Body:** each stage has a short explanation and a small product visual.
+- **Divider:** thick numbered rule between stages.
+- **Button:** stage-internal links; one global "Start at stage 1 →" at the foot.
+- **Image:** small product capture per stage, often annotated.
+- **Reveal:** sweep horizontal as stages enter the viewport.
+
+Reach for it for products with explicit workflows — project management, design-to-dev pipelines, writing tools.
+
+Avoid for tools that work in *one* moment. Narrative Workflow needs a real sequence.
+
+Reference: Linear's how-it-works pages, some Figma marketing pages.
+
+**Sample opening lines** (imitate the *specificity* — Narrative Workflow openings are stage labels: numbered, declarative, in process language):
+> *"01 · sourdough overnight · 02 · score at dawn · 03 · pull at seven."* — three numbered stages, no marketing
+> *"1.0 · parse · 2.0 · filter · 3.0 · route."* — Streampipe (test 02) — versioned numbers, three concrete verbs
+> *"I. We design products that last twelve years. II. A material is sustainable when someone, somewhere, can repair it."* — Meridian — Roman numerals + declarative
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/15-split-studio.md

@@ -1,23 +1,23 @@
-## 15 · Split Studio
-
-Diptych. Every major content block divides the screen — text on one side, proof on the other. The pairing alternates direction down the page.
-
-- **Heading:** half-screen wide; the other half holds a screenshot or a quote.
-- **Body:** alternating left-text/right-image and right-text/left-image modules.
-- **Divider:** a clear gutter between halves; no rules.
-- **Button:** outlined chip below the text half.
-- **Image:** anchored to the opposite half from the text in each row.
-- **Reveal:** opposite halves cross-fade in slightly staggered.
-
-Reach for it for SaaS feature pages, dev tools that pair explanation with code, anything where every claim wants a visual proof.
-
-Avoid for narrative or photographic brands. Split halves the attention; some pages need single focus.
-
-Reference: Vercel feature pages, Stripe Sessions program pages, many dev-tool homepages.
-
-**Sample opening lines** (imitate the *specificity* — Split Studio openings pair a positioning statement with a proof column):
-> *"A studio for what's next."* — italic display + selected-work column on the right
-> *"Print discipline, on screen."* — Hallmark Newsprint — two-phrase headline, masthead-style
-> *"We design and build distinctive products for ambitious teams."* — names the verb (design and build), names the audience
-
----
+## 15 · Split Studio
+
+Diptych. Every major content block divides the screen — text on one side, proof on the other. The pairing alternates direction down the page.
+
+- **Heading:** half-screen wide; the other half holds a screenshot or a quote.
+- **Body:** alternating left-text/right-image and right-text/left-image modules.
+- **Divider:** a clear gutter between halves; no rules.
+- **Button:** outlined chip below the text half.
+- **Image:** anchored to the opposite half from the text in each row.
+- **Reveal:** opposite halves cross-fade in slightly staggered.
+
+Reach for it for SaaS feature pages, dev tools that pair explanation with code, anything where every claim wants a visual proof.
+
+Avoid for narrative or photographic brands. Split halves the attention; some pages need single focus.
+
+Reference: Vercel feature pages, Stripe Sessions program pages, many dev-tool homepages.
+
+**Sample opening lines** (imitate the *specificity* — Split Studio openings pair a positioning statement with a proof column):
+> *"A studio for what's next."* — italic display + selected-work column on the right
+> *"Print discipline, on screen."* — Hallmark Newsprint — two-phrase headline, masthead-style
+> *"We design and build distinctive products for ambitious teams."* — names the verb (design and build), names the audience
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/16-feature-stack.md

@@ -1,23 +1,23 @@
-## 16 · Feature Stack
-
-Sticky left pane (label / description) + scroll-synced right pane (screenshots cycling through related details). Cinematic pacing.
-
-- **Heading:** held inside the sticky pane; persists while content cycles beside it.
-- **Body:** two columns — left sticky, right scrolling; the right pane plays through 3–6 detail screens per section.
-- **Divider:** section bands; the sticky pane re-anchors per section.
-- **Button:** in the sticky pane, set when the user reaches the section's detail count.
-- **Image:** the scrolling-right column is mostly imagery.
-- **Reveal:** none of the spatial-fade kind; the sticky/scroll IS the motion.
-
-Reach for it for premium products, complex feature stories, anything where you want to control pacing as the user scrolls.
-
-Avoid on mobile-first audiences without strong fallback. Sticky+scroll-sync is rough on small screens.
-
-Reference: Apple product pages, some Stripe Sessions pages, Read.cv onboarding.
-
-**Sample opening lines** (imitate the *specificity* — Feature Stack openings pin a single statement and then walk the user through):
-> *"Plan, build, ship."* — three verbs, three sticky panes
-> *"Read anything that emits lines."* — Streampipe (test 02) — names what's possible, then walks through it
-> *"From stdin, through the pipe, into your dashboard."* — names the data path, then explains each step
-
----
+## 16 · Feature Stack
+
+Sticky left pane (label / description) + scroll-synced right pane (screenshots cycling through related details). Cinematic pacing.
+
+- **Heading:** held inside the sticky pane; persists while content cycles beside it.
+- **Body:** two columns — left sticky, right scrolling; the right pane plays through 3–6 detail screens per section.
+- **Divider:** section bands; the sticky pane re-anchors per section.
+- **Button:** in the sticky pane, set when the user reaches the section's detail count.
+- **Image:** the scrolling-right column is mostly imagery.
+- **Reveal:** none of the spatial-fade kind; the sticky/scroll IS the motion.
+
+Reach for it for premium products, complex feature stories, anything where you want to control pacing as the user scrolls.
+
+Avoid on mobile-first audiences without strong fallback. Sticky+scroll-sync is rough on small screens.
+
+Reference: Apple product pages, some Stripe Sessions pages, Read.cv onboarding.
+
+**Sample opening lines** (imitate the *specificity* — Feature Stack openings pin a single statement and then walk the user through):
+> *"Plan, build, ship."* — three verbs, three sticky panes
+> *"Read anything that emits lines."* — Streampipe (test 02) — names what's possible, then walks through it
+> *"From stdin, through the pipe, into your dashboard."* — names the data path, then explains each step
+
+---

package/template/.claude/skills/hallmark/references/macrostructures/17-type-specimen.md

@@ -1,23 +1,23 @@
-## 17 · Type Specimen
-
-The typeface IS the design. Foundry homepage or design-system marketing where a custom typeface is the brand's proof.
-
-- **Heading:** the typeface set at multiple sizes, demonstrating what it does.
-- **Body:** progressive demonstration — display size, body size, italic, language coverage, OpenType features.
-- **Divider:** centred caption labels between specimens.
-- **Button:** outlined "Buy" or "Use it" at the foot.
-- **Image:** none — typography is the imagery.
-- **Reveal:** type-unmask on first paint of each specimen block.
-
-Reach for it for type foundries, design systems where a custom face is the differentiator, font product pages.
-
-Avoid when the brand uses an off-the-shelf face. Type Specimen needs something distinctive to celebrate.
-
-Reference: Klim Type Foundry, Pangram Pangram, Geist Pixel announcement pages.
-
-**Sample opening lines** (imitate the *specificity* — Type Specimen openings are foundry-voice: name the typeface, the weights, the use):
-> *"Reckless Display, set in 96 pt."* — names the face and the size, nothing else
-> *"Eight weights. Three optical sizes. One good italic."* — counts the system in three short phrases
-> *"A type system for editorial."* — refusal of the verb, single noun phrase
-
----
+## 17 · Type Specimen
+
+The typeface IS the design. Foundry homepage or design-system marketing where a custom typeface is the brand's proof.
+
+- **Heading:** the typeface set at multiple sizes, demonstrating what it does.
+- **Body:** progressive demonstration — display size, body size, italic, language coverage, OpenType features.
+- **Divider:** centred caption labels between specimens.
+- **Button:** outlined "Buy" or "Use it" at the foot.
+- **Image:** none — typography is the imagery.
+- **Reveal:** type-unmask on first paint of each specimen block.
+
+Reach for it for type foundries, design systems where a custom face is the differentiator, font product pages.
+
+Avoid when the brand uses an off-the-shelf face. Type Specimen needs something distinctive to celebrate.
+
+Reference: Klim Type Foundry, Pangram Pangram, Geist Pixel announcement pages.
+
+**Sample opening lines** (imitate the *specificity* — Type Specimen openings are foundry-voice: name the typeface, the weights, the use):
+> *"Reckless Display, set in 96 pt."* — names the face and the size, nothing else
+> *"Eight weights. Three optical sizes. One good italic."* — counts the system in three short phrases
+> *"A type system for editorial."* — refusal of the verb, single noun phrase
+
+---