@phuc1403/musketeer 0.9.0 → 0.10.0

package/template/.claude/skills/hallmark/references/components/n7-brutal-slab.md

@@ -1,22 +1,22 @@
-### N7 · Brutal slab
-A heavy, full-width nav with a 2 px solid border-bottom, all-caps wordmark and tracked uppercase link row, dense rhythm, no shadow, no rounded corners. Reads as Pentagram project pages, Liquid Death, brutalist-leaning agencies.
-*Use when:* the genre is playful (Brutal, Manifesto, Sport) or the brand voice is heavy / declarative.
-*Don't confuse with:* N1 Wordmark + 2 links (which is small and quiet).
-
-```html
-<header class="nav-slab">
-  <a class="slab-mark">STUDIO</a>
-  <nav class="slab-nav" aria-label="Primary">
-    <ul><li><a>CATALOG</a></li><li><a>VOICE</a></li><li><a>WORK</a></li></ul>
-  </nav>
-  <a class="cta-fill cta-fill--slab">GET</a>
-</header>
-```
-```css
-.nav-slab { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--page-gutter); border-bottom: 2px solid var(--color-ink); background: var(--color-paper); }
-.slab-mark { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
-.slab-nav ul { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0 0 0 auto; }
-.slab-nav a { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 600; }
-```
-
-*Anti-pattern:* combining N7 with rounded corners, soft shadows, or backdrop-blur — those vocabularies fight. If you reach for blur, drop to N5; if you reach for round, drop to N1.
+### N7 · Brutal slab
+A heavy, full-width nav with a 2 px solid border-bottom, all-caps wordmark and tracked uppercase link row, dense rhythm, no shadow, no rounded corners. Reads as Pentagram project pages, Liquid Death, brutalist-leaning agencies.
+*Use when:* the genre is playful (Brutal, Manifesto, Sport) or the brand voice is heavy / declarative.
+*Don't confuse with:* N1 Wordmark + 2 links (which is small and quiet).
+
+```html
+<header class="nav-slab">
+  <a class="slab-mark">STUDIO</a>
+  <nav class="slab-nav" aria-label="Primary">
+    <ul><li><a>CATALOG</a></li><li><a>VOICE</a></li><li><a>WORK</a></li></ul>
+  </nav>
+  <a class="cta-fill cta-fill--slab">GET</a>
+</header>
+```
+```css
+.nav-slab { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--page-gutter); border-bottom: 2px solid var(--color-ink); background: var(--color-paper); }
+.slab-mark { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
+.slab-nav ul { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0 0 0 auto; }
+.slab-nav a { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 600; }
+```
+
+*Anti-pattern:* combining N7 with rounded corners, soft shadows, or backdrop-blur — those vocabularies fight. If you reach for blur, drop to N5; if you reach for round, drop to N1.

package/template/.claude/skills/hallmark/references/components/n8-terminal-command.md

@@ -1,21 +1,21 @@
-### N8 · Terminal command
-A nav formatted as a CLI prompt: `> studio --catalog --voice --get▮`. The "links" are command flags. The blinking cursor (`▮`) is allowed *only here* (it has purpose — signals "you'd type next"); never standalone elsewhere on the page. Reads as Vercel CLI docs landing, Charm, Mitchell Hashimoto's site.
-*Use when:* the page is a CLI tool, dev-tool docs, or carries the Terminal theme.
-*Don't confuse with:* N4 ⌘K-only (which is a palette, not a visible bar).
-
-```html
-<header class="nav-term">
-  <pre class="nav-term__line"><span class="prompt">&gt;</span> studio <a href="#catalog">--catalog</a> <a href="#voice">--voice</a> <a href="#get">--get</a><span class="caret" aria-hidden="true">▮</span></pre>
-</header>
-```
-```css
-.nav-term { padding: var(--space-sm) var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); }
-.nav-term__line { font-family: var(--font-outlier, ui-monospace, "JetBrains Mono", monospace); font-size: var(--text-sm); margin: 0; }
-.nav-term__line .prompt { color: var(--color-accent); padding-right: 0.4ch; }
-.nav-term__line a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
-.caret { display: inline-block; width: 1ch; animation: blink 1.05s steps(2) infinite; color: var(--color-accent); }
-@keyframes blink { 50% { opacity: 0; } }
-@media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } }
-```
-
-*Anti-pattern:* using `>` prompt vocabulary on a non-developer site (a wedding photographer's portfolio with a `> view --gallery` nav reads as set decoration). N8 belongs to genuine terminal / CLI brands only.
+### N8 · Terminal command
+A nav formatted as a CLI prompt: `> studio --catalog --voice --get▮`. The "links" are command flags. The blinking cursor (`▮`) is allowed *only here* (it has purpose — signals "you'd type next"); never standalone elsewhere on the page. Reads as Vercel CLI docs landing, Charm, Mitchell Hashimoto's site.
+*Use when:* the page is a CLI tool, dev-tool docs, or carries the Terminal theme.
+*Don't confuse with:* N4 ⌘K-only (which is a palette, not a visible bar).
+
+```html
+<header class="nav-term">
+  <pre class="nav-term__line"><span class="prompt">&gt;</span> studio <a href="#catalog">--catalog</a> <a href="#voice">--voice</a> <a href="#get">--get</a><span class="caret" aria-hidden="true">▮</span></pre>
+</header>
+```
+```css
+.nav-term { padding: var(--space-sm) var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); }
+.nav-term__line { font-family: var(--font-outlier, ui-monospace, "JetBrains Mono", monospace); font-size: var(--text-sm); margin: 0; }
+.nav-term__line .prompt { color: var(--color-accent); padding-right: 0.4ch; }
+.nav-term__line a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
+.caret { display: inline-block; width: 1ch; animation: blink 1.05s steps(2) infinite; color: var(--color-accent); }
+@keyframes blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } }
+```
+
+*Anti-pattern:* using `>` prompt vocabulary on a non-developer site (a wedding photographer's portfolio with a `> view --gallery` nav reads as set decoration). N8 belongs to genuine terminal / CLI brands only.

package/template/.claude/skills/hallmark/references/components/n9-edge-aligned-minimal.md

@@ -1,17 +1,17 @@
-### N9 · Edge-aligned minimal
-Wordmark hard-left, single CTA hard-right, vast empty space between, no link row at all. The *absence* is the design — Apple product pages, Carl Hauser, luxury sites.
-*Use when:* the page is luxury / quiet / Atelier / Salon and the brand earns the silence.
-*Don't confuse with:* N1 Wordmark + 2 links (which fills the middle).
-
-```html
-<header class="nav-edge">
-  <a class="wordmark">Studio</a>
-  <a class="cta-outline">Get →</a>
-</header>
-```
-```css
-.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--page-gutter); }
-.nav-edge .wordmark { font-family: var(--font-display); font-size: var(--text-md); }
-```
-
-*Anti-pattern:* adding 4 inline links between the wordmark and CTA "to fill the space". The space *is* the design; if you fill it, you've made N1 with extra steps.
+### N9 · Edge-aligned minimal
+Wordmark hard-left, single CTA hard-right, vast empty space between, no link row at all. The *absence* is the design — Apple product pages, Carl Hauser, luxury sites.
+*Use when:* the page is luxury / quiet / Atelier / Salon and the brand earns the silence.
+*Don't confuse with:* N1 Wordmark + 2 links (which fills the middle).
+
+```html
+<header class="nav-edge">
+  <a class="wordmark">Studio</a>
+  <a class="cta-outline">Get →</a>
+</header>
+```
+```css
+.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--page-gutter); }
+.nav-edge .wordmark { font-family: var(--font-display); font-size: var(--text-md); }
+```
+
+*Anti-pattern:* adding 4 inline links between the wordmark and CTA "to fill the space". The space *is* the design; if you fill it, you've made N1 with extra steps.

package/template/.claude/skills/hallmark/references/components/s1-left-margin-numbered.md

@@ -1,15 +1,15 @@
-
-### S1 · Left-margin numbered
-A narrow left column holds `01 — LABEL.`; the wide right column holds the heading and content.
-*Use when:* the page is editorial / specimen.
-*Don't confuse with:* S5 Bottom-anchored (which puts the label *under* the section).
-
-```html
-<header class="head-margin">
-  <p class="num-label">01 — Foundations</p>
-  <h2>…</h2>
-</header>
-```
-```css
-.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }
-```
+
+### S1 · Left-margin numbered
+A narrow left column holds `01 — LABEL.`; the wide right column holds the heading and content.
+*Use when:* the page is editorial / specimen.
+*Don't confuse with:* S5 Bottom-anchored (which puts the label *under* the section).
+
+```html
+<header class="head-margin">
+  <p class="num-label">01 — Foundations</p>
+  <h2>…</h2>
+</header>
+```
+```css
+.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }
+```

package/template/.claude/skills/hallmark/references/components/s2-hanging.md

@@ -1,13 +1,13 @@
-### S2 · Hanging
-Heading floats above the section in negative space; no border, no rule.
-*Use when:* the content has a quiet, room-to-breathe energy.
-*Don't confuse with:* S3 Sticky-pinned (which moves with scroll).
-
-```html
-<header class="head-hang">
-  <h2>…</h2>
-</header>
-```
-```css
-.head-hang { padding-block: var(--space-3xl) var(--space-xl); }
-```
+### S2 · Hanging
+Heading floats above the section in negative space; no border, no rule.
+*Use when:* the content has a quiet, room-to-breathe energy.
+*Don't confuse with:* S3 Sticky-pinned (which moves with scroll).
+
+```html
+<header class="head-hang">
+  <h2>…</h2>
+</header>
+```
+```css
+.head-hang { padding-block: var(--space-3xl) var(--space-xl); }
+```

package/template/.claude/skills/hallmark/references/components/s3-sticky-pinned.md

@@ -1,19 +1,19 @@
-### S3 · Sticky pinned
-Heading remains in viewport while content scrolls beneath. Orientation aid.
-*Use when:* the section is dense and the user benefits from always seeing where they are.
-*Don't confuse with:* S1 Left-margin (which doesn't move).
-
-```html
-<header class="head-sticky">
-  <p class="num-label">02</p>
-  <h2>…</h2>
-</header>
-```
-```css
-/* If the page has a sticky top nav, offset by its height so the sticky
-   head docks BENEATH it instead of bleeding over (slop-test gate 68).
-   Use --z-sticky (in-page) so the nav's --z-sticky-nav out-paints it. */
-.head-sticky { position: sticky; top: var(--banner-height, 0px); background: var(--color-paper); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-ink); z-index: var(--z-sticky); }
-```
-
-**Sticky pairing rule:** if the page emits a sticky `<header>` / `<nav>` / `.banner` (anything with `position: sticky; top: 0`), you MUST also declare `--banner-height` (a px value matching the nav's height) and `--z-sticky-nav` (≥ 1 above `--z-sticky`) in `tokens.css`. The S3 recipe above pulls both. Without those tokens the section head paints over the nav during scroll — see slop-test gate 68.
+### S3 · Sticky pinned
+Heading remains in viewport while content scrolls beneath. Orientation aid.
+*Use when:* the section is dense and the user benefits from always seeing where they are.
+*Don't confuse with:* S1 Left-margin (which doesn't move).
+
+```html
+<header class="head-sticky">
+  <p class="num-label">02</p>
+  <h2>…</h2>
+</header>
+```
+```css
+/* If the page has a sticky top nav, offset by its height so the sticky
+   head docks BENEATH it instead of bleeding over (slop-test gate 68).
+   Use --z-sticky (in-page) so the nav's --z-sticky-nav out-paints it. */
+.head-sticky { position: sticky; top: var(--banner-height, 0px); background: var(--color-paper); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-ink); z-index: var(--z-sticky); }
+```
+
+**Sticky pairing rule:** if the page emits a sticky `<header>` / `<nav>` / `.banner` (anything with `position: sticky; top: 0`), you MUST also declare `--banner-height` (a px value matching the nav's height) and `--z-sticky-nav` (≥ 1 above `--z-sticky`) in `tokens.css`. The S3 recipe above pulls both. Without those tokens the section head paints over the nav during scroll — see slop-test gate 68.

package/template/.claude/skills/hallmark/references/components/s4-inline-no-break.md

@@ -1,11 +1,11 @@
-### S4 · Inline (no break)
-The heading is a small caps phrase that emerges *inside* the body flow; no spatial break.
-*Use when:* the page is prose-led; reading should be continuous.
-*Don't confuse with:* S2 Hanging (which separates with negative space).
-
-```html
-<p>… <span class="head-inline">A small heading.</span> …</p>
-```
-```css
-.head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; }
-```
+### S4 · Inline (no break)
+The heading is a small caps phrase that emerges *inside* the body flow; no spatial break.
+*Use when:* the page is prose-led; reading should be continuous.
+*Don't confuse with:* S2 Hanging (which separates with negative space).
+
+```html
+<p>… <span class="head-inline">A small heading.</span> …</p>
+```
+```css
+.head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; }
+```

package/template/.claude/skills/hallmark/references/components/s5-bottom-anchored.md

@@ -1,13 +1,13 @@
-### S5 · Bottom-anchored
-The label or heading sits *below* the section's content. Inverts hierarchy.
-*Use when:* the content is the primary act and the label is a footer to it.
-*Don't confuse with:* S1 Left-margin (which leads with the label).
-
-```html
-<section>
-  <div class="content">…</div>
-  <p class="num-label">— end of 02</p>
-</section>
-```
-
----
+### S5 · Bottom-anchored
+The label or heading sits *below* the section's content. Inverts hierarchy.
+*Use when:* the content is the primary act and the label is a footer to it.
+*Don't confuse with:* S1 Left-margin (which leads with the label).
+
+```html
+<section>
+  <div class="content">…</div>
+  <p class="num-label">— end of 02</p>
+</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/components/t1-pull-quote-with-marginalia.md

@@ -1,12 +1,12 @@
-
-### T1 · Pull-quote with marginalia
-A quote sits in the wide column; the attribution and source link float in the narrow margin column.
-*Use when:* the page already has a marginalia rhythm (Tufte-leaning, editorial).
-*Don't confuse with:* T3 Single huge quote (which is centered and dominates).
-
-```html
-<aside class="proof-margin">
-  <blockquote class="serif-italic">"…"</blockquote>
-  <p class="attribution muted">— Name<br />Role, Company</p>
-</aside>
-```
+
+### T1 · Pull-quote with marginalia
+A quote sits in the wide column; the attribution and source link float in the narrow margin column.
+*Use when:* the page already has a marginalia rhythm (Tufte-leaning, editorial).
+*Don't confuse with:* T3 Single huge quote (which is centered and dominates).
+
+```html
+<aside class="proof-margin">
+  <blockquote class="serif-italic">"…"</blockquote>
+  <p class="attribution muted">— Name<br />Role, Company</p>
+</aside>
+```

package/template/.claude/skills/hallmark/references/components/t2-logo-wall-hairline.md

@@ -1,19 +1,19 @@
-### T2 · Logo wall (hairline)
-A row of customer logos, monochromatic, separated by hairline rules. No card boxes, no shadows.
-*Use when:* you have recognisable customers and want to surface them quietly.
-*Don't confuse with:* the AI-default 6-logo box grid; this version refuses card boxes.
-
-```html
-<section class="logo-wall">
-  <ul>
-    <li><img src="" /></li>
-    <li><img src="" /></li>
-    <li><img src="" /></li>
-  </ul>
-</section>
-```
-```css
-.logo-wall ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; }
-.logo-wall li { padding: var(--space-md); border-right: 1px solid var(--color-rule); display: grid; place-items: center; }
-.logo-wall img { filter: grayscale(1); opacity: 0.7; }
-```
+### T2 · Logo wall (hairline)
+A row of customer logos, monochromatic, separated by hairline rules. No card boxes, no shadows.
+*Use when:* you have recognisable customers and want to surface them quietly.
+*Don't confuse with:* the AI-default 6-logo box grid; this version refuses card boxes.
+
+```html
+<section class="logo-wall">
+  <ul>
+    <li><img src="" /></li>
+    <li><img src="" /></li>
+    <li><img src="" /></li>
+  </ul>
+</section>
+```
+```css
+.logo-wall ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; }
+.logo-wall li { padding: var(--space-md); border-right: 1px solid var(--color-rule); display: grid; place-items: center; }
+.logo-wall img { filter: grayscale(1); opacity: 0.7; }
+```

package/template/.claude/skills/hallmark/references/components/t3-single-huge-quote.md

@@ -1,11 +1,11 @@
-### T3 · Single huge quote
-One quote, set big, centered, taking a whole section. No supporting text, no attribution boxes — attribution is a small caps line beneath.
-*Use when:* one quote is so good it earns the room.
-*Don't confuse with:* T1 Margin pull-quote (which is the *side* mate, not the *room*).
-
-```html
-<section class="proof-room">
-  <blockquote class="display-italic">"…"</blockquote>
-  <p class="attribution"><span class="caps">— Name, Company</span></p>
-</section>
-```
+### T3 · Single huge quote
+One quote, set big, centered, taking a whole section. No supporting text, no attribution boxes — attribution is a small caps line beneath.
+*Use when:* one quote is so good it earns the room.
+*Don't confuse with:* T1 Margin pull-quote (which is the *side* mate, not the *room*).
+
+```html
+<section class="proof-room">
+  <blockquote class="display-italic">"…"</blockquote>
+  <p class="attribution"><span class="caps">— Name, Company</span></p>
+</section>
+```

package/template/.claude/skills/hallmark/references/components/t4-numbered-stat-strip.md

@@ -1,14 +1,14 @@
-### T4 · Numbered stat strip
-A horizontal strip of 3–5 stats (count + qualifier) running across one row. Tabular nums.
-*Use when:* you have multiple complementary metrics that work together.
-*Don't confuse with:* H4 Stat-led hero (which is one focal number, not several).
-
-```html
-<section class="stat-strip tnum">
-  <div><b>2.4M</b><span>users</span></div>
-  <div><b>99.97%</b><span>uptime</span></div>
-  <div><b>14</b><span>regions</span></div>
-</section>
-```
-
----
+### T4 · Numbered stat strip
+A horizontal strip of 3–5 stats (count + qualifier) running across one row. Tabular nums.
+*Use when:* you have multiple complementary metrics that work together.
+*Don't confuse with:* H4 Stat-led hero (which is one focal number, not several).
+
+```html
+<section class="stat-strip tnum">
+  <div><b>2.4M</b><span>users</span></div>
+  <div><b>99.97%</b><span>uptime</span></div>
+  <div><b>14</b><span>regions</span></div>
+</section>
+```
+
+---

package/template/.claude/skills/hallmark/references/contract.md

@@ -1,24 +1,24 @@
-# Output contract & scope
-
-Loaded once per build, at handoff time.
-
-## Output contract
-
-When producing new work:
-
-- Put design tokens in one place at the top of the stylesheet (`:root` custom properties) or in a `tokens.css` / `tokens.ts` file if the project uses one.
-- Name tokens by semantic role, not value. `--color-ink`, not `--color-black`.
-- If the project uses Tailwind, extend the theme; do not inline arbitrary values across components.
-- If the project uses a framework, match the framework's file conventions — don't reinvent them.
-- Include a short comment block at the top of the stylesheet naming the genre, the tone the user picked, the palette's anchor hue, and the structural fingerprint. This is the only comment you need.
-
-## Scope and limits
-
-Hallmark is a *taste* skill. It will not:
-
-- Invent product copy. If the user hasn't given you the words, ask.
-- Pick a brand identity. It will follow one you give it.
-- Enforce a specific style (dark mode, glassmorphism, brutalism). It will execute whichever genre + tone the user committed to.
-- Build logic — state management, data fetching, business rules. It is a visual / interaction layer only.
-
-If a request falls outside taste — "build the auth flow", "wire up Stripe" — do the work, but apply Hallmark to the rendered surface.
+# Output contract & scope
+
+Loaded once per build, at handoff time.
+
+## Output contract
+
+When producing new work:
+
+- Put design tokens in one place at the top of the stylesheet (`:root` custom properties) or in a `tokens.css` / `tokens.ts` file if the project uses one.
+- Name tokens by semantic role, not value. `--color-ink`, not `--color-black`.
+- If the project uses Tailwind, extend the theme; do not inline arbitrary values across components.
+- If the project uses a framework, match the framework's file conventions — don't reinvent them.
+- Include a short comment block at the top of the stylesheet naming the genre, the tone the user picked, the palette's anchor hue, and the structural fingerprint. This is the only comment you need.
+
+## Scope and limits
+
+Hallmark is a *taste* skill. It will not:
+
+- Invent product copy. If the user hasn't given you the words, ask.
+- Pick a brand identity. It will follow one you give it.
+- Enforce a specific style (dark mode, glassmorphism, brutalism). It will execute whichever genre + tone the user committed to.
+- Build logic — state management, data fetching, business rules. It is a visual / interaction layer only.
+
+If a request falls outside taste — "build the auth flow", "wire up Stripe" — do the work, but apply Hallmark to the rendered surface.