Youssef
aedca8cb03
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.
1.6 KiB
04 · Stat-Led
The hero is a giant number — a metric, a count, a percentage. Everything that follows supports or qualifies it. Data is the narrative.
- Heading: numeric display (8–12 rem), tabular figures, small qualifier line below.
- Body: sections each anchored by a supporting stat or chart.
- Divider: hairline rules between stat blocks; tabular-nums everywhere.
- Button: outlined chip aligned beneath the qualifier.
- Image: charts and small data-viz; no photography.
- Reveal: number-tick on the hero figure — counter from 0 to target over ~500 ms.
Reach for it when the brief is "we have proof in numbers" — enterprise/B2B, fundraising platforms, climate or impact pages.
Avoid for products without a defensible single metric. A fake big number is worse than no number.
Reference: Ahrefs, Stripe Sessions stat blocks, climate-impact dashboards, venture firm portfolio pages.
Sample opening lines (imitate the specificity, not the wording — the number does the work):
"+47% · faster · decide late." — italicised number, three-word qualifier "4 seconds. From the alert link to the slow span." — pairs the number with what it bought "434 total posts. New CSS you feel like you could use today." — adam argyle, nerdy.dev — the count grounds the page in real volume
<section class="stat-hero">
<div class="figure tnum">99.97<span class="unit">%</span></div>
<p class="qualifier">uptime across 2026, measured externally.</p>
<a class="cta-outline">Read the report →</a>
</section>
<section class="supporting-stats">…</section>