mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
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
1.6 KiB
H7 · Demo Video — Clipped-by-viewport-edge
Display headline left, demo video right, the rightmost ~10–20 % extending past the viewport so it's intentionally cut off. The clip is the design — implies "there's more product than fits the screen". Pioneered by Linear, refined by Vercel / Resend / Cursor. Use when: the brief is SaaS / dev-tool / dashboard / platform AND you have real footage of the product (or a hand-built CSS-art mockup of it). Don't confuse with: H4 Stat-Led (number-led, no video) or H8 Mockup Split (still screenshot, not video).
See hero-enrichment.md for the full E1 recipe (codec chain, autoplay rules, prefers-reduced-motion fallback, mobile collapse). The cookbook entry below is the structural sketch.
<section class="hero hero--clipped">
<div class="hero__copy">
<h1>Plan, build, ship.</h1>
<p>The project tracker your engineering team won't ignore.</p>
</div>
<figure class="hero__media">
<video autoplay muted loop playsinline preload="metadata"
poster="/hero-poster.webp" fetchpriority="high">
<source src="/hero.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
<source src="/hero.h264.mp4" type="video/mp4">
</video>
</figure>
</section>
.hero--clipped { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2xl); overflow: visible; }
.hero__media { width: calc(100% + 12vw); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
@media (max-width: 60rem) { .hero--clipped { grid-template-columns: 1fr; } .hero__media { width: 100%; } }