@phuc1403/musketeer 0.9.0 → 0.10.0

package/template/.claude/skills/hallmark/references/components/c2-inline-form-as-cta.md

@@ -1,16 +1,16 @@
-### C2 · Inline form-as-CTA
-The CTA *is* the form — a single email input with a "Submit →" beside it. No separate landing for sign-up.
-*Use when:* the action is collecting an email.
-*Don't confuse with:* C1 Outlined chip (which navigates, not submits).
-
-```html
-<form class="cta-form">
-  <label for="email" class="visually-hidden">Email</label>
-  <input id="email" type="email" placeholder="you@example.com" />
-  <button type="submit">Send →</button>
-</form>
-```
-```css
-.cta-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-ink); }
-.cta-form input { background: none; border: 0; padding: 0.7rem 0; min-height: 44px; }
-```
+### C2 · Inline form-as-CTA
+The CTA *is* the form — a single email input with a "Submit →" beside it. No separate landing for sign-up.
+*Use when:* the action is collecting an email.
+*Don't confuse with:* C1 Outlined chip (which navigates, not submits).
+
+```html
+<form class="cta-form">
+  <label for="email" class="visually-hidden">Email</label>
+  <input id="email" type="email" placeholder="you@example.com" />
+  <button type="submit">Send →</button>
+</form>
+```
+```css
+.cta-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-ink); }
+.cta-form input { background: none; border: 0; padding: 0.7rem 0; min-height: 44px; }
+```

package/template/.claude/skills/hallmark/references/components/c3-typographic-link.md

@@ -1,8 +1,8 @@
-### C3 · Typographic link
-Just a word, an arrow, and a 1-px underline. No box, no fill.
-*Use when:* the page is editorial / Long Document; CTAs should not shout.
-*Don't confuse with:* C1 Outlined chip (which is bordered).
-
-```html
-<a class="link">Read the case study →</a>
-```
+### C3 · Typographic link
+Just a word, an arrow, and a 1-px underline. No box, no fill.
+*Use when:* the page is editorial / Long Document; CTAs should not shout.
+*Don't confuse with:* C1 Outlined chip (which is bordered).
+
+```html
+<a class="link">Read the case study →</a>
+```

package/template/.claude/skills/hallmark/references/components/c4-sticky-bottom-bar.md

@@ -1,16 +1,16 @@
-### C4 · Sticky bottom bar
-A horizontal bar pinned to the viewport bottom, holding a CTA + a brief reassurance line.
-*Use when:* the page is long and the CTA needs to be reachable always.
-*Don't confuse with:* anything in the fold; this is a *persistent* element, not a hero CTA.
-
-```html
-<aside class="cta-sticky">
-  <span>Try it free for 14 days.</span>
-  <a class="cta-outline">Start →</a>
-</aside>
-```
-```css
-.cta-sticky { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; }
-```
-
----
+### C4 · Sticky bottom bar
+A horizontal bar pinned to the viewport bottom, holding a CTA + a brief reassurance line.
+*Use when:* the page is long and the CTA needs to be reachable always.
+*Don't confuse with:* anything in the fold; this is a *persistent* element, not a hero CTA.
+
+```html
+<aside class="cta-sticky">
+  <span>Try it free for 14 days.</span>
+  <a class="cta-outline">Start →</a>
+</aside>
+```
+```css
+.cta-sticky { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; }
+```
+
+---

package/template/.claude/skills/hallmark/references/components/f1-bento-grid.md

@@ -1,20 +1,20 @@
-
-### F1 · Bento grid
-Asymmetric grid of 8–15 tiles in mixed spans (1×1, 2×1, 1×2, 2×2). Visual rhythm via size.
-*Use when:* multiple equally-valid entry points; SaaS feature page.
-*Don't confuse with:* F2 Sticky-scroll (which stacks vertically with sticky pacing).
-
-```html
-<section class="bento">
-  <article class="cell span-2x2">…</article>
-  <article class="cell span-1x1">…</article>
-  <article class="cell span-2x1">…</article>
-</section>
-```
-```css
-.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: var(--space-md); }
-.span-2x2 { grid-column: span 2; grid-row: span 2; }
-.span-2x1 { grid-column: span 2; }
-.span-1x2 { grid-row: span 2; }
-@media (max-width: 56rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
-```
+
+### F1 · Bento grid
+Asymmetric grid of 8–15 tiles in mixed spans (1×1, 2×1, 1×2, 2×2). Visual rhythm via size.
+*Use when:* multiple equally-valid entry points; SaaS feature page.
+*Don't confuse with:* F2 Sticky-scroll (which stacks vertically with sticky pacing).
+
+```html
+<section class="bento">
+  <article class="cell span-2x2">…</article>
+  <article class="cell span-1x1">…</article>
+  <article class="cell span-2x1">…</article>
+</section>
+```
+```css
+.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: var(--space-md); }
+.span-2x2 { grid-column: span 2; grid-row: span 2; }
+.span-2x1 { grid-column: span 2; }
+.span-1x2 { grid-row: span 2; }
+@media (max-width: 56rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
+```

package/template/.claude/skills/hallmark/references/components/f2-sticky-scroll-stack.md

@@ -1,20 +1,20 @@
-### F2 · Sticky-scroll stack
-Sticky left pane, scrolling right pane that cycles through related screenshots.
-*Use when:* feature has multiple sub-states worth showing in sequence.
-*Don't confuse with:* F4 Step sequence (which is linearly numbered, not synced).
-
-```html
-<section class="sticky-stack">
-  <div class="pane-sticky"><h3>…</h3><p>…</p></div>
-  <div class="pane-scroll">
-    <figure>1</figure><figure>2</figure><figure>3</figure>
-  </div>
-</section>
-```
-```css
-.sticky-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
-/* `calc(--banner-height + --space-xl)` so the sticky pane docks below the
-   nav with breathing room. Falls back to --space-xl alone when no sticky
-   nav is on the page (slop-test gate 68). */
-.pane-sticky { position: sticky; top: calc(var(--banner-height, 0px) + var(--space-xl)); align-self: start; z-index: var(--z-sticky); }
-```
+### F2 · Sticky-scroll stack
+Sticky left pane, scrolling right pane that cycles through related screenshots.
+*Use when:* feature has multiple sub-states worth showing in sequence.
+*Don't confuse with:* F4 Step sequence (which is linearly numbered, not synced).
+
+```html
+<section class="sticky-stack">
+  <div class="pane-sticky"><h3>…</h3><p>…</p></div>
+  <div class="pane-scroll">
+    <figure>1</figure><figure>2</figure><figure>3</figure>
+  </div>
+</section>
+```
+```css
+.sticky-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
+/* `calc(--banner-height + --space-xl)` so the sticky pane docks below the
+   nav with breathing room. Falls back to --space-xl alone when no sticky
+   nav is on the page (slop-test gate 68). */
+.pane-sticky { position: sticky; top: calc(var(--banner-height, 0px) + var(--space-xl)); align-self: start; z-index: var(--z-sticky); }
+```

package/template/.claude/skills/hallmark/references/components/f3-tabular-spec-sheet.md

@@ -1,11 +1,11 @@
-### F3 · Tabular spec sheet
-Each row is a feature; columns hold name, value, footnote. Hairline rules between rows. Tabular numerics.
-*Use when:* features compare quantitatively.
-*Don't confuse with:* F1 Bento (which is non-tabular and visually rhythmic).
-
-```html
-<table class="spec-sheet tnum">
-  <tr><th>Latency</th><td>p99 &lt; 50 ms</td><td class="muted">measured externally</td></tr>
-  <tr>…</tr>
-</table>
-```
+### F3 · Tabular spec sheet
+Each row is a feature; columns hold name, value, footnote. Hairline rules between rows. Tabular numerics.
+*Use when:* features compare quantitatively.
+*Don't confuse with:* F1 Bento (which is non-tabular and visually rhythmic).
+
+```html
+<table class="spec-sheet tnum">
+  <tr><th>Latency</th><td>p99 &lt; 50 ms</td><td class="muted">measured externally</td></tr>
+  <tr>…</tr>
+</table>
+```

package/template/.claude/skills/hallmark/references/components/f4-step-sequence.md

@@ -1,11 +1,11 @@
-### F4 · Step sequence
-Numbered stages (`1.0 → 2.0 → 3.0`) flow vertically. Each stage has a heading, a paragraph, sometimes a small visual.
-*Use when:* the product is a workflow, not a single moment.
-*Don't confuse with:* F2 Sticky-scroll (which doesn't number stages).
-
-```html
-<ol class="steps">
-  <li><span class="stage">1.0</span><h3>Intake.</h3><p>…</p></li>
-  <li><span class="stage">2.0</span><h3>Plan.</h3><p>…</p></li>
-</ol>
-```
+### F4 · Step sequence
+Numbered stages (`1.0 → 2.0 → 3.0`) flow vertically. Each stage has a heading, a paragraph, sometimes a small visual.
+*Use when:* the product is a workflow, not a single moment.
+*Don't confuse with:* F2 Sticky-scroll (which doesn't number stages).
+
+```html
+<ol class="steps">
+  <li><span class="stage">1.0</span><h3>Intake.</h3><p>…</p></li>
+  <li><span class="stage">2.0</span><h3>Plan.</h3><p>…</p></li>
+</ol>
+```

package/template/.claude/skills/hallmark/references/components/f5-annotated-screenshot.md

@@ -1,11 +1,11 @@
-### F5 · Annotated screenshot
-A product capture sits centre-stage with arrows or short labels pointing to UI details.
-*Use when:* the product UI itself is the explanation.
-*Don't confuse with:* F2 Sticky-scroll (which uses multiple screenshots in sequence).
-
-```html
-<figure class="annotated">
-  <img src="" />
-  <span class="callout" style="--x:60%; --y:30%;">→ assigns automatically.</span>
-</figure>
-```
+### F5 · Annotated screenshot
+A product capture sits centre-stage with arrows or short labels pointing to UI details.
+*Use when:* the product UI itself is the explanation.
+*Don't confuse with:* F2 Sticky-scroll (which uses multiple screenshots in sequence).
+
+```html
+<figure class="annotated">
+  <img src="" />
+  <span class="callout" style="--x:60%; --y:30%;">→ assigns automatically.</span>
+</figure>
+```

package/template/.claude/skills/hallmark/references/components/f6-product-card-grid.md

@@ -1,41 +1,41 @@
-### F6 · Product card grid
-Each card is a product, not a feature. Image · name · price · one micro-action. Reads like a shop floor, not a marketing site.
-*Use when:* the brief is commerce, catalogue, lookbook, marketplace — anything where the page sells *things*, not *features*.
-*Don't confuse with:* F1 Bento (which sells *features*; tiles vary in size and span). Product cards are uniform on purpose — the rhythm comes from the products, not the layout.
-
-**Variation knobs:** card ratio (3/4 portrait · 1/1 square · 4/3 landscape) · density (3-up · 4-up · 5-up) · price treatment (under name · over image · hover-reveal) · micro-action (Add · Save · View → · none).
-
-```html
-<section class="product-grid">
-  <article class="product">
-    <a class="product__media" href=""><img src="" alt="" loading="lazy" /></a>
-    <div class="product__meta">
-      <h3 class="product__name">Linen Apron · Indigo</h3>
-      <p class="product__price tabular-nums">¥ 6,400</p>
-    </div>
-    <button class="product__add" aria-label="Add Linen Apron to bag">+</button>
-  </article>
-  <!-- ... more products, uniform shape ... -->
-</section>
-```
-```css
-.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); }
-@media (max-width: 60rem) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
-.product { display: grid; gap: var(--space-sm); position: relative; }
-.product__media { display: block; aspect-ratio: 3 / 4; background: var(--color-paper-2); overflow: hidden; }
-.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
-.product__media:hover img { transform: scale(1.02); }
-.product__name { font-family: var(--font-body); font-size: var(--text-md); margin: 0; }
-.product__price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); }
-.product__add { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); cursor: pointer; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
-.product:hover .product__add, .product:focus-within .product__add { opacity: 1; }
-@media (pointer: coarse) { .product__add { opacity: 1; } }
-```
-
-**Anti-patterns to avoid in product grids:**
-- Don't borrow Bento's irregular spans — products want uniform rhythm.
-- Don't put feature-style two-line descriptions under product names. The price *is* the description.
-- Don't auto-scale the image on idle — only on hover, and only by 1.02× max.
-- Don't use cards with shadow + radius + border + tile + ribbon. Pick one container signal.
-
----
+### F6 · Product card grid
+Each card is a product, not a feature. Image · name · price · one micro-action. Reads like a shop floor, not a marketing site.
+*Use when:* the brief is commerce, catalogue, lookbook, marketplace — anything where the page sells *things*, not *features*.
+*Don't confuse with:* F1 Bento (which sells *features*; tiles vary in size and span). Product cards are uniform on purpose — the rhythm comes from the products, not the layout.
+
+**Variation knobs:** card ratio (3/4 portrait · 1/1 square · 4/3 landscape) · density (3-up · 4-up · 5-up) · price treatment (under name · over image · hover-reveal) · micro-action (Add · Save · View → · none).
+
+```html
+<section class="product-grid">
+  <article class="product">
+    <a class="product__media" href=""><img src="" alt="" loading="lazy" /></a>
+    <div class="product__meta">
+      <h3 class="product__name">Linen Apron · Indigo</h3>
+      <p class="product__price tabular-nums">¥ 6,400</p>
+    </div>
+    <button class="product__add" aria-label="Add Linen Apron to bag">+</button>
+  </article>
+  <!-- ... more products, uniform shape ... -->
+</section>
+```
+```css
+.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); }
+@media (max-width: 60rem) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
+.product { display: grid; gap: var(--space-sm); position: relative; }
+.product__media { display: block; aspect-ratio: 3 / 4; background: var(--color-paper-2); overflow: hidden; }
+.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
+.product__media:hover img { transform: scale(1.02); }
+.product__name { font-family: var(--font-body); font-size: var(--text-md); margin: 0; }
+.product__price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); }
+.product__add { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); cursor: pointer; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
+.product:hover .product__add, .product:focus-within .product__add { opacity: 1; }
+@media (pointer: coarse) { .product__add { opacity: 1; } }
+```
+
+**Anti-patterns to avoid in product grids:**
+- Don't borrow Bento's irregular spans — products want uniform rhythm.
+- Don't put feature-style two-line descriptions under product names. The price *is* the description.
+- Don't auto-scale the image on idle — only on hover, and only by 1.02× max.
+- Don't use cards with shadow + radius + border + tile + ribbon. Pick one container signal.
+
+---

package/template/.claude/skills/hallmark/references/components/ft1-mast-headed.md

@@ -1,13 +1,13 @@
-
-### Ft1 · Mast-headed
-A wordmark and tagline anchor a single horizontal band. Two or three small links beside, address or licence below.
-*Use when:* the page has heavy content; the footer should be quiet and singular.
-*Don't confuse with:* Ft2 Inline-rule (which is even more reduced).
-
-```html
-<footer class="foot-mast">
-  <p class="wordmark">Studio Name</p>
-  <p class="tagline muted">Designs that don't look generated.</p>
-  <p class="links muted">Imprint · Privacy · Contact</p>
-</footer>
-```
+
+### Ft1 · Mast-headed
+A wordmark and tagline anchor a single horizontal band. Two or three small links beside, address or licence below.
+*Use when:* the page has heavy content; the footer should be quiet and singular.
+*Don't confuse with:* Ft2 Inline-rule (which is even more reduced).
+
+```html
+<footer class="foot-mast">
+  <p class="wordmark">Studio Name</p>
+  <p class="tagline muted">Designs that don't look generated.</p>
+  <p class="links muted">Imprint · Privacy · Contact</p>
+</footer>
+```

package/template/.claude/skills/hallmark/references/components/ft2-inline-rule-single-line.md

@@ -1,10 +1,10 @@
-### Ft2 · Inline-rule single line
-A single horizontal line of credits, address, copyright. Hairline rule above. No columns.
-*Use when:* the page is editorial and the footer is afterthought.
-*Don't confuse with:* Ft4 Dense typographic (which packs more in).
-
-```html
-<footer class="foot-line">
-  <p>© 2026 · 137 Marlow Street · MIT licensed</p>
-</footer>
-```
+### Ft2 · Inline-rule single line
+A single horizontal line of credits, address, copyright. Hairline rule above. No columns.
+*Use when:* the page is editorial and the footer is afterthought.
+*Don't confuse with:* Ft4 Dense typographic (which packs more in).
+
+```html
+<footer class="foot-line">
+  <p>© 2026 · 137 Marlow Street · MIT licensed</p>
+</footer>
+```

package/template/.claude/skills/hallmark/references/components/ft3-index-style-category-list.md

@@ -1,12 +1,12 @@
-### Ft3 · Index-style category list
-Three or four short columns, each headed by a category in small caps, holding 4–6 links each.
-*Use when:* the page is a hub or a documentation root.
-*Don't confuse with:* Ft4 Dense typographic (which is one big block, not columns).
-
-```html
-<footer class="foot-index">
-  <div><p class="caps">Product</p><ul>…</ul></div>
-  <div><p class="caps">Company</p><ul>…</ul></div>
-  <div><p class="caps">Resources</p><ul>…</ul></div>
-</footer>
-```
+### Ft3 · Index-style category list
+Three or four short columns, each headed by a category in small caps, holding 4–6 links each.
+*Use when:* the page is a hub or a documentation root.
+*Don't confuse with:* Ft4 Dense typographic (which is one big block, not columns).
+
+```html
+<footer class="foot-index">
+  <div><p class="caps">Product</p><ul>…</ul></div>
+  <div><p class="caps">Company</p><ul>…</ul></div>
+  <div><p class="caps">Resources</p><ul>…</ul></div>
+</footer>
+```

package/template/.claude/skills/hallmark/references/components/ft4-dense-typographic.md

@@ -1,10 +1,10 @@
-### Ft4 · Dense typographic
-One large block of text — credits, references, licence, address — in a small monospace font, fully justified or ragged-right. Editorial colophon energy.
-*Use when:* the brand is editorial and a colophon-style sign-off fits.
-*Don't confuse with:* Ft3 Index (which navigates).
-
-```html
-<footer class="foot-dense mono">
-  <p>Hallmark v0.2.0. Built with The Future, Fraunces, IBM Plex Mono. MIT licensed. Powered by Together AI. 137 Marlow Street, 2026.</p>
-</footer>
-```
+### Ft4 · Dense typographic
+One large block of text — credits, references, licence, address — in a small monospace font, fully justified or ragged-right. Editorial colophon energy.
+*Use when:* the brand is editorial and a colophon-style sign-off fits.
+*Don't confuse with:* Ft3 Index (which navigates).
+
+```html
+<footer class="foot-dense mono">
+  <p>Hallmark v0.2.0. Built with The Future, Fraunces, IBM Plex Mono. MIT licensed. Powered by Together AI. 137 Marlow Street, 2026.</p>
+</footer>
+```

package/template/.claude/skills/hallmark/references/components/ft5-statement.md

@@ -1,21 +1,21 @@
-### Ft5 · Statement
-One large display sentence dominates the footer — a closing line, not a sitemap. Wordmark, minimal links, copyright sit beneath in muted small type. Stripe (older), Mailchimp pre-rebrand, agency portfolio closers.
-*Use when:* the page wants a *closing line* — editorial, manifesto, atmospheric. The sentence pairs with the page's argument.
-*Don't confuse with:* Ft1 Mast-headed (which leads with the wordmark, not a sentence).
-
-```html
-<footer class="foot-stmt">
-  <p class="foot-stmt__line">Build something they'll remember.</p>
-  <div class="foot-stmt__meta">
-    <span class="wordmark">Studio</span>
-    <span class="muted">© 2026 · MIT</span>
-  </div>
-</footer>
-```
-```css
-.foot-stmt { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-lg); }
-.foot-stmt__line { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.02em; max-width: 28ch; margin: 0; }
-.foot-stmt__meta { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
-```
-
-*Anti-pattern:* using a Statement footer on a docs root or hub. The sentence reads as marketing fluff there; default Ft3 instead.
+### Ft5 · Statement
+One large display sentence dominates the footer — a closing line, not a sitemap. Wordmark, minimal links, copyright sit beneath in muted small type. Stripe (older), Mailchimp pre-rebrand, agency portfolio closers.
+*Use when:* the page wants a *closing line* — editorial, manifesto, atmospheric. The sentence pairs with the page's argument.
+*Don't confuse with:* Ft1 Mast-headed (which leads with the wordmark, not a sentence).
+
+```html
+<footer class="foot-stmt">
+  <p class="foot-stmt__line">Build something they'll remember.</p>
+  <div class="foot-stmt__meta">
+    <span class="wordmark">Studio</span>
+    <span class="muted">© 2026 · MIT</span>
+  </div>
+</footer>
+```
+```css
+.foot-stmt { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-lg); }
+.foot-stmt__line { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.02em; max-width: 28ch; margin: 0; }
+.foot-stmt__meta { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
+```
+
+*Anti-pattern:* using a Statement footer on a docs root or hub. The sentence reads as marketing fluff there; default Ft3 instead.

package/template/.claude/skills/hallmark/references/components/ft6-letter-close.md

@@ -1,19 +1,19 @@
-### Ft6 · Letter close
-Closes the page like a letter — `Yours, the team. 2026.` Optional postscript line beneath. Sets the page as a piece of writing rather than a product.
-*Use when:* the page voice is warm, hand-written, editorial-quiet — Garden, Atelier, Salon, personal sites.
-*Don't confuse with:* Ft1 Mast-headed (which is a wordmark anchor, not a signoff).
-
-```html
-<footer class="foot-letter">
-  <p class="foot-letter__close">Yours,<br><span class="foot-letter__sign">— Studio</span></p>
-  <p class="foot-letter__ps muted">P.S. — letters back welcome at <a href="mailto:hello@studio">hello@studio</a>.</p>
-</footer>
-```
-```css
-.foot-letter { padding: var(--space-2xl) var(--page-gutter); max-width: 60ch; }
-.foot-letter__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; }
-.foot-letter__sign { font-style: normal; font-weight: 600; }
-.foot-letter__ps { font-size: var(--text-sm); margin-top: var(--space-md); }
-```
-
-*Anti-pattern:* using Ft6 on a stat-led / B2B product page — voice mismatch reads as twee. Reserve for genuinely letter-shaped pages.
+### Ft6 · Letter close
+Closes the page like a letter — `Yours, the team. 2026.` Optional postscript line beneath. Sets the page as a piece of writing rather than a product.
+*Use when:* the page voice is warm, hand-written, editorial-quiet — Garden, Atelier, Salon, personal sites.
+*Don't confuse with:* Ft1 Mast-headed (which is a wordmark anchor, not a signoff).
+
+```html
+<footer class="foot-letter">
+  <p class="foot-letter__close">Yours,<br><span class="foot-letter__sign">— Studio</span></p>
+  <p class="foot-letter__ps muted">P.S. — letters back welcome at <a href="mailto:hello@studio">hello@studio</a>.</p>
+</footer>
+```
+```css
+.foot-letter { padding: var(--space-2xl) var(--page-gutter); max-width: 60ch; }
+.foot-letter__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; }
+.foot-letter__sign { font-style: normal; font-weight: 600; }
+.foot-letter__ps { font-size: var(--text-sm); margin-top: var(--space-md); }
+```
+
+*Anti-pattern:* using Ft6 on a stat-led / B2B product page — voice mismatch reads as twee. Reserve for genuinely letter-shaped pages.

package/template/.claude/skills/hallmark/references/components/ft7-newsletter-first.md

@@ -1,27 +1,27 @@
-### Ft7 · Newsletter-first
-The form (label + input + submit) is the *primary* element of the footer; everything else (wordmark, links, copyright) is set in 12 px muted type beneath. Stratechery, Substack-shaped sites, indie magazines.
-*Use when:* the brand legitimately publishes — and the page above the fold has *already* offered a subscription. The footer is a final invitation, not an ambush.
-*Don't confuse with:* Ft1 (which doesn't ask for anything).
-
-```html
-<footer class="foot-news">
-  <form class="foot-news__form" action="/subscribe" method="post">
-    <label for="foot-email">Letters from the studio · monthly</label>
-    <div class="foot-news__row">
-      <input id="foot-email" name="email" type="email" required placeholder="you@domain">
-      <button type="submit" class="cta-fill">Subscribe</button>
-    </div>
-  </form>
-  <p class="foot-news__meta muted">Studio · © 2026 · <a href="/imprint">Imprint</a></p>
-</footer>
-```
-```css
-.foot-news { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: 56ch; }
-.foot-news__form label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-2xs); }
-.foot-news__row { display: flex; gap: var(--space-2xs); }
-.foot-news__row input { flex: 1; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
-.foot-news__row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
-.foot-news__meta { font-size: var(--text-xs); }
-```
-
-*Anti-pattern:* Ft7 when the page never said "subscribe" above the fold. The footer is an honest *conclusion*; if you didn't ask, don't ambush. Drop to Ft2 instead.
+### Ft7 · Newsletter-first
+The form (label + input + submit) is the *primary* element of the footer; everything else (wordmark, links, copyright) is set in 12 px muted type beneath. Stratechery, Substack-shaped sites, indie magazines.
+*Use when:* the brand legitimately publishes — and the page above the fold has *already* offered a subscription. The footer is a final invitation, not an ambush.
+*Don't confuse with:* Ft1 (which doesn't ask for anything).
+
+```html
+<footer class="foot-news">
+  <form class="foot-news__form" action="/subscribe" method="post">
+    <label for="foot-email">Letters from the studio · monthly</label>
+    <div class="foot-news__row">
+      <input id="foot-email" name="email" type="email" required placeholder="you@domain">
+      <button type="submit" class="cta-fill">Subscribe</button>
+    </div>
+  </form>
+  <p class="foot-news__meta muted">Studio · © 2026 · <a href="/imprint">Imprint</a></p>
+</footer>
+```
+```css
+.foot-news { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: 56ch; }
+.foot-news__form label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-2xs); }
+.foot-news__row { display: flex; gap: var(--space-2xs); }
+.foot-news__row input { flex: 1; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
+.foot-news__row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
+.foot-news__meta { font-size: var(--text-xs); }
+```
+
+*Anti-pattern:* Ft7 when the page never said "subscribe" above the fold. The footer is an honest *conclusion*; if you didn't ask, don't ambush. Drop to Ft2 instead.

package/template/.claude/skills/hallmark/references/components/ft8-marquee-scroll.md

@@ -1,25 +1,25 @@
-### Ft8 · Marquee scroll
-A horizontal infinite-scroll line of repeating tagline + dot separator: `STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·`. Sport-genre sites, fashion lookbooks, brand-forward agencies.
-*Use when:* the brand voice is loud, kinetic, sport-or-manifesto.
-*Don't confuse with:* Ft4 Dense colophon (which is static text).
-
-```html
-<footer class="foot-marquee" aria-label="Footer">
-  <div class="foot-marquee__track" aria-hidden="true">
-    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span>
-    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span>
-  </div>
-  <p class="visually-hidden">Studio · 2026 · MIT licensed</p>
-</footer>
-```
-```css
-.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); }
-.foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; }
-.foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); }
-@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
-@media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }
-```
-
-*Anti-pattern:* using Ft8 on editorial / quiet contexts — the motion reads as loud. Pair only with playful / sport / manifesto voices, and always honour `prefers-reduced-motion: reduce`.
-
----
+### Ft8 · Marquee scroll
+A horizontal infinite-scroll line of repeating tagline + dot separator: `STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·`. Sport-genre sites, fashion lookbooks, brand-forward agencies.
+*Use when:* the brand voice is loud, kinetic, sport-or-manifesto.
+*Don't confuse with:* Ft4 Dense colophon (which is static text).
+
+```html
+<footer class="foot-marquee" aria-label="Footer">
+  <div class="foot-marquee__track" aria-hidden="true">
+    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span>
+    <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span>
+  </div>
+  <p class="visually-hidden">Studio · 2026 · MIT licensed</p>
+</footer>
+```
+```css
+.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); }
+.foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; }
+.foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); }
+@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }
+```
+
+*Anti-pattern:* using Ft8 on editorial / quiet contexts — the motion reads as loud. Pair only with playful / sport / manifesto voices, and always honour `prefers-reduced-motion: reduce`.
+
+---