mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
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:
@@ -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
@@ -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
@@ -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,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.
|
||||
|
||||
@@ -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.)
|
||||
|
||||
|
||||
@@ -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 150–200 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 150–200 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 12–13 px on rebuild, keep the tracking.**
|
||||
|
||||
|
||||
@@ -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 150–200 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 150–200 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.
|
||||
|
||||
@@ -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 ~10–20 % 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
Reference in New Issue
Block a user