Files
nutlope__hallmark/references/macrostructures/09-quote-led.md
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

1.8 KiB
Raw Permalink Blame History

09 · Quote-Led

The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brand's voice. The page leads with social proof.

  • Heading: italic display setting a customer's quote (36–60 px), with attribution below in small caps.
  • Body: continues with additional testimonials, case studies, or a quiet feature list.
  • Divider: centered quote-mark glyph or an em-rule between testimonials.
  • Button: typographic link beneath the attribution ("Read the full case study →").
  • Image: small avatar or company logo by the attribution; otherwise none.
  • Reveal: none in fold; below-fold may stagger.

Reach for it for B2B products with strong customer voices, agency case-study pages, fundraising sites, anywhere "people like me use this" is the unlock.

Avoid for new products without real testimonials. Fake quotes destroy trust on inspection.

Reference: many B2B SaaS landings, agency homepages, university development pages.

Sample opening lines (imitate the specificity — quote-led pages let someone else say it, then attribute):

"I started listening on a long bus ride. By the third episode I'd missed my stop, and I didn't mind." — Tide (test 01) — story-shaped, attributed to a listener "Restraint, repeated, becomes a signature." — Hallmark Atelier — short, philosophical, signed by the studio "It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes." — Tracejam-style — names the outcome with a number

<section class="quote-hero">
  <blockquote class="display-italic">"…"</blockquote>
  <p class="attribution">— Name, Title, Company</p>
  <a class="link">Read the case →</a>
</section>
<section class="more-quotes">…</section>