Install · scope the skill to skills/hallmark/ (fixes #9)

The skills CLI copies everything under the directory containing SKILL.md.
With SKILL.md at the repo root, installs were pulling in docs/, site/,
package.json, README, ROADMAP, vercel.json, LICENSE. Moving the skill
into skills/hallmark/ scopes the install to just SKILL.md + references/.

The CLI's priority search hits skills/ first, so `npx skills add
nutlope/hallmark` is unchanged. Updated README install paths,
package.json (entry/references/files), and the internal links that
crossed the new boundary.
This commit is contained in:
Youssef
2026-05-26 12:07:51 +01:00
parent 9aba10e518
commit 3ec0173896
105 changed files with 34 additions and 35 deletions
+2 -2
View File
@@ -66,13 +66,13 @@ Each page is self-contained HTML + CSS, stamped with its macrostructure in the C
npx skills add nutlope/hallmark
```
Re-run any time to update. Or copy [`SKILL.md`](SKILL.md) + [`references/`](references/) into:
Re-run any time to update. Or copy [`SKILL.md`](skills/hallmark/SKILL.md) + [`references/`](skills/hallmark/references/) into:
- **Claude Code** — `~/.claude/skills/hallmark/`
- **Cursor** — `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
- **Codex** — `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)
The rule-set lives in [`SKILL.md`](SKILL.md) and [`references/`](references/). Worked examples in [`docs/recipes.md`](docs/recipes.md) and [`docs/study-examples.md`](docs/study-examples.md).
The rule-set lives in [`SKILL.md`](skills/hallmark/SKILL.md) and [`references/`](skills/hallmark/references/). Worked examples in [`docs/recipes.md`](docs/recipes.md) and [`docs/study-examples.md`](docs/study-examples.md).
---
+2 -2
View File
@@ -16,11 +16,11 @@ What's next.
**Brand-first flow.** From a short product description, Hallmark generates a complete brand — palette, type system, voice, custom imagery via Nanobanana — and locks it into a `design.md`. The user then runs Hallmark normally and the whole site builds against that generated brand, page after page. Closes the gap for users who have a product idea but no brand yet.
**Theme-aware motion tokens.** Per-theme `--dur-micro` / `--dur-short` / `--dur-long`, scaled by the table already in [`microinteractions.md`](references/microinteractions.md). Atelier should feel slower than Brutal; today they share durations. One pass through the tokens file.
**Theme-aware motion tokens.** Per-theme `--dur-micro` / `--dur-short` / `--dur-long`, scaled by the table already in [`microinteractions.md`](skills/hallmark/references/microinteractions.md). Atelier should feel slower than Brutal; today they share durations. One pass through the tokens file.
**`hallmark variant`** — produce three structurally distinct versions of the same brief side-by-side; the user picks one or asks for a fourth. The biggest cause of "AI feel" is users accepting the first output because they didn't know it could be different.
**Structural cookbook.** [`structure.md`](references/structure.md) catalogues the *axes* of variety but doesn't show what a left-margin-headed, hairline-divided, no-image page actually looks like assembled. Twelve to twenty worked fingerprints with short HTML/CSS sketches — patterns are easier to reach for than principles.
**Structural cookbook.** [`structure.md`](skills/hallmark/references/structure.md) catalogues the *axes* of variety but doesn't show what a left-margin-headed, hairline-divided, no-image page actually looks like assembled. Twelve to twenty worked fingerprints with short HTML/CSS sketches — patterns are easier to reach for than principles.
**Tactile-rebellion reference.** Controlled imperfection — handmade textures, hand-drawn SVG paths, controlled-jitter typography (a 0.5° tilt on one mark is taste; on every word it's chaos). Where the field is going.
+3 -4
View File
@@ -18,12 +18,11 @@
"license": "MIT",
"type": "module",
"files": [
"SKILL.md",
"references"
"skills"
],
"skill": {
"entry": "SKILL.md",
"references": "references",
"entry": "skills/hallmark/SKILL.md",
"references": "skills/hallmark/references",
"harnesses": [
"claude-code",
"cursor",
+2 -2
View File
@@ -2,7 +2,7 @@
Three landing pages produced by the **custom** theme route — the new opt-in branch added to Hallmark in v0.6.x. Custom is the route for one-off custom palettes + font pairings tuned to a single brand. **Catalog** (the 16 named themes) is the default; custom fires only when the brief signals creative or unique intent.
These three pages are the worked examples written into [`references/custom-theme.md`](../../../references/custom-theme.md) § G — rendered as actual HTML so the palette + pairing can be inspected visually.
These three pages are the worked examples written into [`references/custom-theme.md`](../../../skills/hallmark/references/custom-theme.md) § G — rendered as actual HTML so the palette + pairing can be inspected visually.
| # | Brand | Vibe | Anchor | Macrostructure | Axes |
| --- | --- | --- | --- | --- | --- |
@@ -27,4 +27,4 @@ The 16 named themes can't carry every brand. Coffeebox is closest to **Atelier**
4. **The Step 5 preview surfaces the palette + pairing.** Before any code is emitted, the user sees the OKLCH values and the chosen fonts in plain text. They can redirect early.
5. **Diversification is theme-route-blind.** Each custom run records its three axis values (paper-band / display-style / accent-hue) in `.hallmark/log.json`. The next run rotates against them the same way it does against catalog themes.
See [`references/custom-theme.md`](../../../references/custom-theme.md) for the full protocol.
See [`references/custom-theme.md`](../../../skills/hallmark/references/custom-theme.md) for the full protocol.
+3 -3
View File
@@ -4,9 +4,9 @@
## Verbs loaded
- [`anti-patterns.md`](../../../references/anti-patterns.md) — the named-tells library to score against
- [`structure.md`](../../../references/structure.md) — for the structural-fingerprint check (gate 9)
- [`microinteractions.md`](../../../references/microinteractions.md) — the timing/easing canon
- [`anti-patterns.md`](../../../skills/hallmark/references/anti-patterns.md) — the named-tells library to score against
- [`structure.md`](../../../skills/hallmark/references/structure.md) — for the structural-fingerprint check (gate 9)
- [`microinteractions.md`](../../../skills/hallmark/references/microinteractions.md) — the timing/easing canon
(No write paths. `audit` does not edit.)
+5 -5
View File
@@ -4,10 +4,10 @@
## References loaded
- [`study.md`](../../../references/study.md) — the vision-extraction protocol + structured-fields schema + refusal heuristics
- [`study-examples.md`](../../../references/study-examples.md) — three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal)
- [`macrostructures.md`](../../../references/macrostructures.md) — to name the page-shape
- [`component-cookbook.md`](../../../references/component-cookbook.md) — to name the hero / pitch / footer archetypes
- [`study.md`](../../../skills/hallmark/references/study.md) — the vision-extraction protocol + structured-fields schema + refusal heuristics
- [`study-examples.md`](../../../skills/hallmark/references/study-examples.md) — three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal)
- [`macrostructures.md`](../../../skills/hallmark/references/macrostructures.md) — to name the page-shape
- [`component-cookbook.md`](../../../skills/hallmark/references/component-cookbook.md) — to name the hero / pitch / footer archetypes
## Diagnosis (10 structured fields)
@@ -33,7 +33,7 @@
## Anti-patterns the screenshot has — do NOT carry over
> 1. The hover-state on the number-label uses a slow ease-in-out 800 ms colour fade. Per [`microinteractions.md`](../../../references/microinteractions.md) § The timing canon, hover state should be 150200 ms. **Carry the *idea* (colour-shift on hover); shorten the *duration*.**
> 1. The hover-state on the number-label uses a slow ease-in-out 800 ms colour fade. Per [`microinteractions.md`](../../../skills/hallmark/references/microinteractions.md) § The timing canon, hover state should be 150200 ms. **Carry the *idea* (colour-shift on hover); shorten the *duration*.**
>
> 2. The footer text is set at 11 px with 0.06 em tracking — under the 14 px floor for body copy. **Bump to 1213 px on rebuild, keep the tracking.**
+10 -10
View File
@@ -8,23 +8,23 @@ A described screenshot (`input-description.md`) of a Pentagram-style design stud
> *"Extract the DNA — macrostructure, archetypes, type-pairing role, colour anchor, rhythm — and produce a diagnosis report, then optionally rebuild the user's content using the extracted DNA. Never copies pixels. Never claims to identify exact fonts. Refuses obvious template-marketplace screenshots."*
Five-step pipeline (per [`SKILL.md`](../../../SKILL.md) § `hallmark study`):
Five-step pipeline (per [`SKILL.md`](../../../skills/hallmark/SKILL.md) § `hallmark study`):
1. **Refuse-or-proceed check** — public reference, not a paid template → proceed.
2. **Vision pass** — read the image into the structured-fields schema in [`study.md`](../../../references/study.md). Output ten fields.
2. **Vision pass** — read the image into the structured-fields schema in [`study.md`](../../../skills/hallmark/references/study.md). Output ten fields.
3. **Diagnosis report** — return the named macrostructure + archetypes + anti-patterns to NOT carry over. See [`diagnosis.md`](diagnosis.md).
4. **Confirmation question** — ask before building.
5. **Build** — produce `output.html` + `output.css` with the user's actual six projects, stamped `studied: yes`.
## What loaded
- [`references/study.md`](../../../references/study.md) — the protocol, schema, and refusal heuristics.
- [`references/study-examples.md`](../../../references/study-examples.md) — the three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal). The Pentagram example matched our screenshot most closely; the skill imitated the diagnosis structure.
- [`references/macrostructures.md`](../../../references/macrostructures.md) — to name the page-shape (Specimen).
- [`references/component-cookbook.md`](../../../references/component-cookbook.md) — for archetype names (H4 Margin-Number Display, Ft1 Single-Line Colophon).
- [`references/typography.md`](../../../references/typography.md) — for the type-role vocabulary (italic-display + sans-body) and free / paid candidate pairings.
- [`references/color.md`](../../../references/color.md) — for the warm-orange-at-low-chroma colour-anchor.
- [`references/microinteractions.md`](../../../references/microinteractions.md) — for the hover-duration anti-pattern callout (the screenshot's 800 ms is too slow; should be 150200 ms).
- [`references/study.md`](../../../skills/hallmark/references/study.md) — the protocol, schema, and refusal heuristics.
- [`references/study-examples.md`](../../../skills/hallmark/references/study-examples.md) — the three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal). The Pentagram example matched our screenshot most closely; the skill imitated the diagnosis structure.
- [`references/macrostructures.md`](../../../skills/hallmark/references/macrostructures.md) — to name the page-shape (Specimen).
- [`references/component-cookbook.md`](../../../skills/hallmark/references/component-cookbook.md) — for archetype names (H4 Margin-Number Display, Ft1 Single-Line Colophon).
- [`references/typography.md`](../../../skills/hallmark/references/typography.md) — for the type-role vocabulary (italic-display + sans-body) and free / paid candidate pairings.
- [`references/color.md`](../../../skills/hallmark/references/color.md) — for the warm-orange-at-low-chroma colour-anchor.
- [`references/microinteractions.md`](../../../skills/hallmark/references/microinteractions.md) — for the hover-duration anti-pattern callout (the screenshot's 800 ms is too slow; should be 150200 ms).
## What `study` did *not* do
@@ -58,4 +58,4 @@ The screenshot maps neatly to study-examples.md Example A (Pentagram-style edito
- The confirmation question.
- The `studied: yes` stamp.
If the input had been a paid Squarespace-template marketplace screenshot, the verb would have refused. If the input had been ambiguous (an unknown agency page or a personal portfolio with no clear ownership), the verb would have asked before extracting. Both branches are documented in [`study.md`](../../../references/study.md); this test exercises the proceed-with-public-reference branch.
If the input had been a paid Squarespace-template marketplace screenshot, the verb would have refused. If the input had been ambiguous (an unknown agency page or a personal portfolio with no clear ownership), the verb would have asked before extracting. Both branches are documented in [`study.md`](../../../skills/hallmark/references/study.md); this test exercises the proceed-with-public-reference branch.
+3 -3
View File
@@ -275,7 +275,7 @@ Before loading any visual ruleset, **read the slim index at [`references/macrost
If the previous output was Specimen (light · italic-serif · warm), the next can be Studio (light · italic-serif · chromatic-green) — the *accent hue* differs. But the next can't be Salon (light · roman-serif · warm) which only differs on display style and shares both paper band and accent — pick a more distant theme.
The per-theme axis values live as comments at the top of each theme's tokens block in [`site/css/tokens.css`](../site/css/tokens.css). When in doubt, name your candidate theme out loud and identify its three axis values; if two of three match the previous output, redirect.
The per-theme axis values live as comments at the top of each theme's tokens block in [`site/css/tokens.css`](../../site/css/tokens.css). When in doubt, name your candidate theme out loud and identify its three axis values; if two of three match the previous output, redirect.
**State your pick.** Before writing any code, say "Macrostructure: <name>. Theme: <name>. Differs from the last on: <axes>." in plain text. This is a deliberate accountability step — picking on the page (not in your head) prevents the default-attractor sameness that kept the skill emitting Specimen output.
@@ -382,8 +382,8 @@ The non-negotiables live in [`references/`](references/). **Be precise about wha
- [`study.md`](references/study.md) — load only when `hallmark study` runs.
**Human-only (do NOT auto-load):**
- [`../docs/recipes.md`](../docs/recipes.md) — eight worked briefs for human readers.
- [`../docs/study-examples.md`](../docs/study-examples.md) — three worked DNA-extractions for human readers.
- [`../../docs/recipes.md`](../../docs/recipes.md) — eight worked briefs for human readers.
- [`../../docs/study-examples.md`](../../docs/study-examples.md) — three worked DNA-extractions for human readers.
### 4. Decide on hero enrichment
@@ -213,7 +213,7 @@ Custom runs extend the existing schema with a `theme_axes` field and an optional
"brief": "Coffeebox · subscription" }
```
Catalog entries continue to record `theme: <name>` and skip `theme_axes` (the catalog's axes are looked up from [`tokens.css`](../../site/css/tokens.css)). Step 2.5 logic uses the same diversification check on both — for catalog entries it reads the axes from tokens.css; for custom entries it reads them from the entry.
Catalog entries continue to record `theme: <name>` and skip `theme_axes` (the catalog's axes are looked up from [`tokens.css`](../../../site/css/tokens.css)). Step 2.5 logic uses the same diversification check on both — for catalog entries it reads the axes from tokens.css; for custom entries it reads them from the entry.
When rotating, **a custom run that follows another custom run must differ on at least one axis from the previous custom** — same rule as catalog-vs-catalog. A custom run that follows a catalog run must differ on at least one axis from the catalog's axes. The diversification rule is theme-route-blind.
@@ -321,7 +321,7 @@ The vibe names two hues: *moss* (greenish, ~140°) and *soft pink* (warm, ~350°
## What custom does **not** do (worth restating)
1. **Does not invent themes that ignore the rules.** Every paper L band, accent chroma cap, neutral-tinting requirement, font ban, and slop-test gate carries forward. The freedom is the *combination* — not the rules.
2. **Does not save themes for reuse.** A custom run is per-output. The skill does not write back to [`tokens.css`](../../site/css/tokens.css). If the user wants a permanent theme, they paste the custom palette into tokens.css themselves and name it.
2. **Does not save themes for reuse.** A custom run is per-output. The skill does not write back to [`tokens.css`](../../../site/css/tokens.css). If the user wants a permanent theme, they paste the custom palette into tokens.css themselves and name it.
3. **Does not ask multiple follow-up questions.** One vibe answer (+ optional anchor) is enough. The audience/use/tone from Step 1 plus the brief plus the macrostructure pick already give the model 80 % of the signal.
4. **Does not relax the diversification rule.** Custom entries declare their three axes the same way catalog entries do; the rotation rule fires on both, theme-route-blind.
5. **Does not bypass the Step 5 preview.** The custom palette + pairing surface in plain text *before* any code is emitted, so the user can redirect early.
@@ -99,7 +99,7 @@ A display headline left, a demo video right, and the rightmost ~1020 % of the
- Aspect ratio (16/10 · 16/9 · 4/3)
- Frame treatment (hairline 1 px frame · browser chrome · none)
**Example.** Tracejam (SaaS observability — see [`site/_tests/05-tracejam-saas/`](../../site/_tests/05-tracejam-saas/)). Display headline left ("Distributed tracing that explains itself."); hand-built CSS-art trace waterfall right, tilted -0.4°, extending 12 vw past the viewport's right edge. Aspect 16/10. Hairline frame. **Not a real video** — the mockup is custom-built CSS at Tier A (rectangles on a percentage grid simulating a flame chart). Mobile (< 60 rem): drop the clip, stack vertically.
**Example.** Tracejam (SaaS observability — see [`site/_tests/05-tracejam-saas/`](../../../site/_tests/05-tracejam-saas/)). Display headline left ("Distributed tracing that explains itself."); hand-built CSS-art trace waterfall right, tilted -0.4°, extending 12 vw past the viewport's right edge. Aspect 16/10. Hairline frame. **Not a real video** — the mockup is custom-built CSS at Tier A (rectangles on a percentage grid simulating a flame chart). Mobile (< 60 rem): drop the clip, stack vertically.
```html
<section class="hero hero--clipped">
@@ -204,7 +204,7 @@ A hand-built SVG (the default, Tier B) or a generated raster (Tier C, when chara
- Animation (none · loop · scroll-linked)
- Scale (small accent · dominant)
**Example.** Maple Street Bread (bakery — see [`site/_tests/03-maple-bakery/`](../../site/_tests/03-maple-bakery/)). Letter-style hero copy left ("Saturday, 6:14 a.m. The dough went in at midnight."), 60-line hand-built SVG loaf right, 3 paths (body, shade, score-marks). Animated with `@property --rise` for a subtle 4 px breathing-loop over 6 s, alternating; the score-marks draw themselves on first paint via `stroke-dasharray`. Tier B, dominant scale, animation: loop. Reduced-motion fallback is a static keyframe.
**Example.** Maple Street Bread (bakery — see [`site/_tests/03-maple-bakery/`](../../../site/_tests/03-maple-bakery/)). Letter-style hero copy left ("Saturday, 6:14 a.m. The dough went in at midnight."), 60-line hand-built SVG loaf right, 3 paths (body, shade, score-marks). Animated with `@property --rise` for a subtle 4 px breathing-loop over 6 s, alternating; the score-marks draw themselves on first paint via `stroke-dasharray`. Tier B, dominant scale, animation: loop. Reduced-motion fallback is a static keyframe.
For *how* to build a hand-drawn loaf in 60 lines of SVG and animate its breath with `@property`, see [`custom-craft.md`](custom-craft.md) — there's a full bakery worked example, plus four more recipes (workflow diagram, mascot, architectural diagram, botanical accent).

Some files were not shown because too many files have changed in this diff Show More