When Hallmark builds into a project that already has an entry stylesheet
(e.g. app/globals.css, src/index.css), treat it as append-only: keep the
existing @tailwind / @import "tailwindcss" directives and the project's own
tokens, add the Hallmark layer below them, and keep any new @import at the
top. Overwriting it was silently dropping the framework's CSS entry
directives and the user's tokens, which left the whole app unstyled.
Swapped the single full-page custom-04 screenshot for two hero-only shots side
by side, the Cascadia Nightjar sleeper ticket and the Ferns and Fathom
periodic-table tea menu, so the section shows the range without dumping a whole
page. Trimmed the Custom blurb down to the essentials.
Swapped in the new Open Graph image (2400x1260), keeping the OG-hallmark.png
filename so the meta tags, the README banner, and the deployed URL all stay
valid; updated the height meta to match.
Refreshed the "Different briefs, different shapes" gallery to the worked
examples we actually ship now: the four new themes (Bubble, Distil, Cold Snap,
Cinder), the Custom and newly generated pages (Mend Assembly, Hollowback Apiary,
Off-Register, Press Quaternary), and four originals (Tally, Wayfare, NAJM,
Hyperlane). Dropped the retired examples, reworded the intro, and added eight
new hero shots.
Theme picker: Hum is now theme 01, with the rest renumbered 02-20. The ordinal
reads off the registry index, so switching, cycling, and the "NN / 20" readout
all stay correct.
Theme numbers: each picker swatch now carries an explicit number colour that
contrasts with its own background, instead of inheriting the active theme's ink.
Dark swatches (Midnight, Terminal, Manifesto, Aurora, Lumen) get a light number
rather than a near-invisible dark one. All twenty clear AA (min 10:1).
Worked Examples: moved the first three carousel cards (Cobalt, Carnival, Lumen)
to the end so the page leads with Hum.
Bumped the asset cache-bust.
Carnival: fixed the three palette drops whose second accent failed contrast,
tightened the display tracking, and added section-rhythm, alignment, and
drop-selection guidance so the theme lands well-aligned and readable by
default. Lightened and tightened the Carnival headers on the landing.
Anti-slop guards (skill references): heading-to-body alignment coherence as a
principle rather than a rigid rule; centered overlays and command palettes must
center via their container; and a hero headline is never only a number, a lead
figure always pairs with words.
Worked Examples: added three generated pages to the landing carousel, a
small-batch honey farm, a risograph print fair, and an experimental type
studio, after fixing their nav centering and section alignment.
Media: removed the Soroe example card along with the unused scroll-videos,
poster stills, and orphaned thumbnails it left behind, and bumped the asset
cache-bust so the restyled CSS reloads.
Replace the carousel's inconsistent scroll-videos with one CSS image hover-scroll
across all twelve cards. Each thumb is a tall full-page screenshot that pans top
to bottom on hover, with a per-card duration scaled to page height so they all
move at the same brisk, readable pace; captured Retina-sharp at 1400px wide.
Touch and reduced-motion get a static crop. Drop the Slow Pour card.
Bump the version to v1.1 on the landing (banner + footer), package.json, SKILL.md,
and the preview-block examples.
Give the five image cards (the four new themes and the Mend Assembly) a
hover-scroll: each thumb is now a tall full-page screenshot, and CSS pans
object-position top to bottom on hover so the page scrolls itself. No video,
no JS, GPU-light; touch and reduced-motion get a static top crop. Cache-bust
the regenerated thumbs.
Trim the README Custom section to the single Mend Assembly feature (matching
the landing) and de-dash the whole README. Fix three pre-existing dead doc
links in the component cookbook (floating-nav, custom-craft, hero-enrichment
were linked without the ../ that reaches the references root).
Swap the Hum carousel card from Sprout (hum-02) to Bubble (hum-07), the
guided sourdough Narrative Workflow build. Keep only one custom example in
the showcase, the Mend Assembly repair-cafe poster; the other bespoke pages
stay in the repo but off the landing. Untrack hum-02 so only featured builds
ship, refresh the scroll-demos manifest, and bump the cache version.
Merge the clear duplicates (gradient text into the gradient gate, macrostructure-
repeat into the structural-fingerprint gate, the overflow-x:clip mandate into the
horizontal-scroll gate, emoji-icon into the icon-libraries gate), collapse the five
contrast gates to two, the five input-state gates to one, and the four hero gates to
two. No coverage lost. Renumber 1–57 and update every gate-number and gate-total
reference across SKILL.md, the reference docs, the landing copy, and the example builds.
Adds Carnival, Lumen, Hum, and Cobalt to the catalogue (now 20 themes),
each with its own tokens block, hero archetype, landing copy, and spec doc.
Introduces Custom as a first-class route: when a brief carries real
creative intent, Hallmark designs the whole page from first principles —
palette, type, and structure — rather than recolouring a catalogue theme.
Ships five worked custom examples and a README section.
Rewrites the per-theme landing copy and reconciles every catalogue count
across the site and the skill (20 themes · 21 macrostructures · 50
component archetypes · 70 slop-test gates). Drops the last competitor
references from the CSS comments, fixes the genre rosters, and ignores
the local example explorations so only the featured builds ship.
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.
Remove the "refuses competitor pages" policy from the study verb.
Touches the verb summary in README and SKILL.md, both refusal tables
in study.md, the URL refuse list, the schema's refusal enum, the
emission-attestation parenthetical, and the worked examples plus the
test fixtures.
Paid-template refusal and the signature-work soft-refusal stay —
those carry real copyright weight.
Add a brand-first flow as the lead Next item — from a short product
description, Hallmark generates a complete brand (palette, type, voice,
Nanobanana imagery) into a design.md, then builds the whole site
against it.
Rewrite the data-viz item as "Charts reference for analytics pages" —
names the actual AI tells (rainbow palettes, 3D donuts, dual-axis
spaghetti) and what the new reference file would do.
Fold the proposed hallmark extract verb into study as a third input
mode (codebase path, alongside screenshot and URL). Same verb, same
design.md output, no new surface area.
Drop the Won't-do section.
README: 147 → 81 lines. Drop the comparison table, the long
"What's distinct" bullet list, the references/ inventory, the
v1.0.0 release-note blockquote, and the duplicate Update section.
Keep the verb table, the example grid, and install paths.
ROADMAP: 201 → 50 lines. Fold the Status/Build/Why-it-matters
tri-headers into one or two sentences per item. Drop the stale
"What's already shipped" list, the "Measurement" section, and
the duplicate Deferred entry. Keep the Won't-do list — that's
where the discipline lives.
The description was an unquoted YAML plain scalar containing multiple
colon-space sequences ("Four verbs: ", "Fires when ANY: ", "Does NOT
fire on: ", "Decisive signal: "). YAML reads ': ' inside a plain
scalar as a nested mapping, so strict parsers abort with 'mapping
values are not allowed here'. The skills CLI parses this frontmatter
during 'npx skills add', so install failed.
Wrapped the value in double quotes (no internal " or backslash, so
this is lossless and stays one line). Frontmatter now parses; name,
description, and version keys intact.
Co-Authored-By: WOZCODE <contact@withwoz.com>
Codex enforces a 1024-char cap on the frontmatter description; ours was 1813,
causing "invalid description: exceeds maximum length of 1024 characters" on
load. Rewrote to 927 chars, lossless on routing signals — all five fire
triggers, all three don't-fire conditions, and the decisive heuristic are
preserved. Stripped duplicate verb listings, parenthetical examples on each
trigger, and padding prose.
README + site install panes now document `~/.codex/skills/hallmark/` (personal)
and `.codex/skills/hallmark/` (project-scoped) for Codex, replacing the prior
"manual / git clone" placeholder.
A subagent generating a Hallmark page with explicit "preserve structural parity with this reference build" instructions inherited the banned tag-left / header-right pattern (`.workbench__head` with `grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr)` and three `01 · The tour`-style eyebrows) from a launch-day reference that pre-dated gates 66/67/68/69. Gate 66 didn't catch it because the wrapper used `.workbench__head` rather than the canonical `.section__head` named in the original wording.
Two fixes:
1. **gate 66 (slop-test.md) — bind on content shape, not class.** The rule now reads "any <header>, <div>, or <section> wrapper — regardless of class name (.section__head, .workbench__head, .pricing__head, .catches__head, .foo__intro, anything macrostructure- or section-specific) — that contains both an eyebrow/label/number/kicker element AND a heading element MUST resolve to single-column layout." Class-name allowlists are out; the rule binds wherever the *shape* appears.
2. **Both rules (gate 66 + anti-patterns.md "Eyebrow on every section") — explicitly non-bypassable by parity instructions.** New clause in both: instructions to "preserve structural parity", "mirror this reference build", or "match the prior build" do NOT exempt the new build from the rule. If the reference ships the banned pattern, silently flatten it in the new build — the rules win over parity. Reference builds often pre-date these gates; the gates are authoritative.
No content/scope change beyond hardening the wording. Local Hallmark mirror updated.
The skills CLI's frontmatter parser rejected SKILL.md with "Nested mappings are not allowed in compact mappings" because the description contained " ANY of: (1) " — the colon-space sequence inside an unquoted YAML scalar made the parser think it had hit a nested key/value pair. End result: 'npx skills add nutlope/hallmark' cloned successfully but then bailed with "No skills found. Skills require a SKILL.md with name and description."
Fix: rephrase "Fires when ANY of:" → "Fires when ANY of these match —". Single character semantic — colon→em-dash. Frontmatter now parses cleanly under js-yaml. No content semantics change.
Also tightened the repo to what actually helps the skill or a future user — per the new instruction. Added to .gitignore + git rm --cached:
- .hallmark/ — runtime state from my dogfooding runs, has no business being committed
- site/_launch-comparison/ — one-off launch-day comparison artifact (Hallmark / Impeccable / no-skills); not linked from the marketing site, README, or anywhere else
Working-directory copies preserved (rm --cached, not rm). docs/talk-slides.md left in place — it's user-authored content, not mine to remove.
The published install command in the README — npx skills add nutlope/hallmark — was failing for users because the skills CLI looks for SKILL.md at the repo root, not at skill/SKILL.md where Hallmark kept it. The clone succeeded but the CLI reported "No skills found." Manual cp was the only working install path.
Flattened the layout:
- skill/SKILL.md → SKILL.md
- skill/references/ → references/
- (skill/ directory removed; was empty after moves)
git mv preserved rename history for all 76+ files (SKILL.md + 28 reference files + 21 macrostructures + 46 components + 7 verb/genre subfolders).
Updated every cross-reference (36 occurrences across 9 files):
- README.md — 4 links (SKILL.md + references/ + the install snippet still reads the same)
- ROADMAP.md — 4 links to reference files
- package.json — "files" field + "skill" entry/references paths
- site/js/main.js — 3 source comments
- references/design-md.md — one broken link (was pointing skill/references/export-formats.md from inside references/ — now just export-formats.md as a sibling)
- site/_tests/verbs/study/notes.md, diagnosis.md and verbs/audit/audit-report.md, custom/README.md — test-artifact relative paths shortened by one segment (e.g. ../../../skill/SKILL.md → ../../../SKILL.md)
No skill content changes. After this lands, 'npx skills add nutlope/hallmark' should clone + install correctly without any manual cp fallback.
- docs/screenshots/hero-*.jpg: 8 fresh hero-only captures of each worked example (1440×900 via Chrome headless on the local dev server). Replaces the mid-video stills in _tests/_thumbs/*-still.jpg which had video-player overlay and cropped headlines. Each is unique — no duplicates. README "Different briefs, different shapes" section now uses these and each thumbnail is a clickable link to the live deployed example.
- site/index.html: the Study verb's brief-pill swapped from "/hallmark study this landing page" to "/hallmark study together.ai · or paste a screenshot" so URL mode is visually concrete next to the lede that already names both modes. One-line change.
- ROADMAP.md: new "Now — actively working on" section at the top. N.1 covers tightening the existing 22 themes + adding 4–6 new distinct ones + lowering the bar to route to custom. N.2 covers first-class Nanobanana image generation + a new image-led theme (working title: Plate) + token discipline for generated stills.
The frontmatter description opened with "Use this skill when ANY of these fire" — agent-facing trigger logic. Users typing /hall in the slash picker saw the truncated preview as "Use this skill when ANY of these fire — (1) the user names one of Hallmark's explicit verbs..." which says nothing about what Hallmark actually does.
Prepended a one-line user-facing summary so the picker preview reads as: "Anti-AI-slop design skill — generate distinctive landing pages, audit existing UIs, redesign templated pages, or study an admired URL / screenshot to extract its DNA." plus a usage hint with the four verbs. The full 5-condition trigger logic stays underneath unchanged so Claude's auto-fire behaviour is preserved.
Each .ex-card div is now an <a target="_blank" rel="noopener"> wrapping the same content. The hover-play video, prompt line, and .ex-card styles all work unchanged (the class already had color: inherit + focus-visible). Added one CSS line — text-decoration: none on .ex-card — so the <a> doesn't underline the card.
Linked destinations:
- examples/tally/ — SaaS, modern-minimal (from /Users/youssef/test-hallmark-9)
- examples/wayfare/ — travel booking, atmospheric (from test-hallmark-12)
- _tests/09-slow-pour/ — small-batch coffee subscription (already in site)
- examples/bananastudio/ — creative studio with playful motion (from test-hallmark-6)
- _tests/06-anya-portfolio/ — software architect personal site (already in site)
- examples/najm/ — Moroccan fashion (from test-hallmark-7)
- _tests/11-soroe-ceramics/ — small ceramics studio (already in site)
- examples/hyperlane/ — developer infrastructure (from test-hallmark-15)
site/examples/ adds ~308 KB total across the 5 copied projects. The other 3 already live under site/_tests/ so no copying needed for them.
When the user ran `study <URL>` and then said "build it", Hallmark fell back to a catalog theme (the "closest cousin" hint in the diagnosis) instead of using the studied DNA — paper/accent/fonts/macrostructure from the source were discarded.
- study.md: rewrote both diagnosis templates and the worked example. The "closest catalog theme" line is now framed as an explicit pivot option ("just say 'use X instead'"), not a recommendation. The "build it" handoff explicitly uses the studied DNA as the system.
- SKILL.md § 2.6: new Condition 0 (highest priority) — when a study diagnosis was emitted earlier in the conversation and the user asks to build from it ("build it" / "make it" / "use this DNA"), skip catalog/custom dispatch entirely. The DNA's tokens, macrostructure, and archetypes become the locked system. Diversification suspended for the build. Pivot phrases ("use Linen instead" / "ignore the DNA") route back to normal dispatch.
- SKILL.md Step 6: stamp's `theme:` field is `studied-DNA (source: <URL or image>)` with inline OKLCH/font values for studied builds.
- slop-test.md: new gate 69 auto-fails any build that names a catalog theme in its stamp when a recent study exists and the user didn't explicitly pivot.
- Gate count bumped 68 → 69 in SKILL.md + preview-examples.md.
- Bloom: .section__head was text-align: center with .section-label justify-content: center and .section__title margin-inline: auto — every section read as centered-everything (the AI fingerprint). Flipped to text-align: left, justify-content: flex-start, margin-inline: 0. Hero (.hero--marquee) stays centered via its own rules; the atmospheric glow does the centering work without needing every section head to repeat it. Tag stays above the title in the same column (still passes gate 66).
- Newsprint: removed border-top: 3px double var(--color-ink) from .section__head — the double rule above each section tag was reading as decorative noise on a layout that already has a strong 1 px bottom border. Single bottom border kept.
Two sticky-at-top:0 elements in the same stacking context (.banner and Almanac's .section__head) overlapped during scroll because they shared --z-sticky (200) and the section head paints last in DOM order. Visible on the marketing site as the section header drawing on top of the nav as you scroll.
site/ — actual fix for the live page:
- tokens.css: split --z-sticky into --z-sticky (200, in-page) + --z-sticky-nav (300, top nav); add --banner-height: 44px so secondary stickies can offset by a single token
- components.css: .banner now uses --z-sticky-nav and reads --banner-height for its height (kept at 44 px)
- sections.css: Almanac .section__head docks at top: var(--banner-height) instead of top: 0; z-index stays at --z-sticky so the banner always out-paints when their boxes momentarily overlap
skill/ — prevent the pattern in future generated pages (without forcing sticky on every output):
- slop-test.md: new gate 68 auto-fails any second sticky-at-top:0 element when a sticky page-level nav exists; fires only when the page actually has sticky elements (S3, F2, sticky TOCs), trivial pass otherwise
- components/s3-sticky-pinned.md: recipe rewritten to use top: var(--banner-height) + --z-sticky; pairing rule explained
- components/f2-sticky-scroll-stack.md: top now calc(var(--banner-height) + var(--space-xl)) so the sticky pane docks below the nav with breathing room
- SKILL.md + preview-examples.md: gate count bumped 67 → 68
Only Almanac uses sticky section heads in the live site — no other themes affected.
Manifesto and Sport themes set --lh-tight: 0.94 paired with text-transform: uppercase and condensed display faces (Anton / Inter Tight 900). On a two-line .section__title the cap-tops of line N+1 collide with the baseline of line N — most visible on the marketing site's "SAME PROMPT, TWO / DIFFERENT OUTPUTS." headline where the comma and the D fuse into one glyph.
- tokens.css: bump --lh-tight to 1.02 for both themes (safe floor for all-caps condensed display)
- slop-test.md: new gate 67 auto-fails any display-size element that pairs text-transform: uppercase with line-height < 1.0
- typography.md: explicit "Floor for all-caps display heads is 1.0 — recommended 1.02–1.08" line added to body-text rules
- SKILL.md + preview-examples.md: gate count bumped 66 → 67
- macrostructures.md (37 KB monolith) split into 21 per-macro files in references/macrostructures/; slim index lists names + summaries; SKILL.md Step 2 instructs to pick from index, then load ONLY the matching per-item file
- component-cookbook.md (55 KB monolith) split into 46 per-archetype files in references/components/; slim index lists names + summaries; SKILL.md Step 2 instructs to pick archetype codes, then load ONLY the matching files (typical build: 5–7 archetype files vs the whole cookbook)
- SKILL.md § 3 load-list rewritten: macros + components moved from eager-load to index-then-pick; slop-test.md gated to Step 7 only with explicit "do not pre-load" language; hero-enrichment.md no longer auto-loaded at Step 4
- 4 worked Step 5 preview blocks extracted from SKILL.md to references/preview-examples.md (lazy-loaded)
- gate count bumped 65 → 66 across SKILL.md (gate 66 was added in prior commit)
Expected token reduction per build: ~30–40 K (~30–40 % of the previous ~100 K-per-build cost), driven primarily by no longer loading 21 macros or 46 archetypes when only one of each is picked.
After a study diagnosis, the user can now say "lock the DNA" to write
a portable design.md from the extracted DNA — same format as the
default verb's lock-the-system flow, seeded from the studied source.
URL mode populates exact tokens + fonts; image mode populates
estimated bands + candidate fonts. URL-mode emission asks the user
to attest the source is theirs or a public reference for their own
brand — third-party URLs are refused at the emission step even when
the diagnosis itself was allowed. Image mode emits without asking.
Updates skill protocol, design-md trigger list, public verb table,
README comparison, and the site's Study row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
URL mode reads HTML/CSS via WebFetch — names exact fonts and exact
colour values; trades the rhythm pass for everything else getting
more accurate. Auto-refuses template-marketplace URLs; falls back
to asking for a screenshot if the URL is auth-walled or an SPA shell.
Also drops a stale external reference from ROADMAP.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Youssef