Files
hallmark/references/preview-examples.md
T
Youssef aedca8cb03 Refactor · move SKILL.md + references/ to repo root so 'npx skills add nutlope/hallmark' works
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.
2026-05-19 12:12:45 +01:00

2.8 KiB

Preview-block worked examples

Four sample Step 5 preview blocks for the model to imitate, varied across macrostructure types. Load this file only when picking an unusual macrostructure or custom theme and the bullet-list spec in SKILL.md § 5. Preview doesn't give enough scaffolding on its own. Most builds don't need to read this file.


Long Document (editorial, motion-cut):

Hallmark · v1.0.0

  • Macrostructure · Long Document
  • Theme · Linen (cool slate paper · steel-blue accent · geometric sans)
  • Enrichment · Tier-B hand-built SVG (a 60-line coffee bean with @property --rise 6 s breathing-loop)
  • Sections · Masthead · Letter · Three Notes · Visit · Colophon
  • Motion · breathing-loop on bean only (respects prefers-reduced-motion)
  • Slop test · 69 / 69 ✓
  • Diversification · first run for this project

Bento Grid (SaaS, motion-on):

Hallmark · v1.0.0

  • Macrostructure · Bento Grid
  • Theme · Linen (cool slate paper · steel-blue accent · geometric sans)
  • Enrichment · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
  • Sections · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
  • Motion · counter · pricing-lift · CSS marquee on integrations strip
  • Slop test · 69 / 69 ✓
  • Diversification · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)

Manifesto (declarative, no enrichment):

Hallmark · v1.0.0

  • Macrostructure · Manifesto
  • Theme · Manifesto (dark · Inter Tight 900 · single red bleed)
  • Enrichment · none (typography only — voice carries the brand)
  • Sections · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon
  • Motion · none — typography only
  • Slop test · 69 / 69 ✓
  • Diversification · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans)

Custom (Coffeebox archival café):

Hallmark · v1.0.0

  • Macrostructure · Long Document
  • Theme · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)
  • Enrichment · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
  • Sections · Masthead · Letter · Three Notes · Visit · Colophon
  • Motion · breathing-loop on bean (with reduced-motion fallback)
  • Slop test · 69 / 69 ✓
  • Diversification · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style