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.8 KiB
01 · Bento Grid
Modular blocks of varying sizes laid out as an irregular grid. Each block is a feature, a quote, an image, a stat. Visual rhythm comes from size variation, not card uniformity.
- Heading: centered display in a fixed-height hero (not full viewport).
- Body: asymmetric grid — 8–15 blocks of mixed spans (1×1, 2×1, 1×2, 2×2).
- Divider: consistent 12–24 px gap; no rules; the grid itself is the rhythm.
- Button: outlined chip on the hero; tile-internal CTAs as typographic links.
- Image: tightly cropped inside individual blocks; never full-bleed.
- Reveal: none, or a subtle one-shot fade on grid-tile entry.
Reach for it when the brief is "many small things to show", a feature page, a SaaS landing, or anywhere users have multiple equally-valid entry points.
Avoid when the message is a single hero idea — Bento spreads attention; one-idea pages need Marquee or Stat-Led.
Reference: Apple in-page sections, Framer feature pages, Tailwind UI templates.
Sample opening lines (imitate the specificity, not the wording):
"Tracejam · v0.4 · for SREs. Distributed tracing that explains itself." — paraphrased from real observability tools "Resend is the email API for developers. Send transactional and marketing emails at scale." — resend.com "The product development system for teams and agents." — linear.app
<header class="hero-fixed">…</header>
<section class="bento">
<article class="cell span-2x2">…</article> <!-- hero feature -->
<article class="cell span-1x1">…</article>
<article class="cell span-2x1">…</article> <!-- wide stat -->
<article class="cell span-1x2">…</article> <!-- tall image -->
<article class="cell span-1x1">…</article>
<article class="cell span-1x1">…</article>
</section>