mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
b5b21ceebf
The skill now knows how to add hero visuals — demo videos, mockups, illustrations, animated loops, abstract backgrounds, photography — and when not to. The default answer remains typography-only; enrichment has to earn its place. Three new references. hero-enrichment.md is the decision file: an enrichment hierarchy (typography → custom CSS art → hand-built SVG → generated illustration → library + customise → Lottie last resort), a brief-domain decision protocol (SaaS → demo video, bakery → custom illustration, manifesto → none), eight enrichment archetypes (E1 clipped-edge demo video with the full Linear/Vercel recipe, E3/E4 mockups, E5 custom centerpiece, E6 custom animated loop, E7 subtle gradient + grain background, E8 photography), and an eight-question quality bar. custom-craft.md is the how-to-build-it file: pure CSS art (Lynn Fisher / Diana Smith canon — clip-path, conic-gradient, @property, mask, blend-mode), hand-built SVG with the Figma → SVGOMG pipeline and declarative animation via CSS keyframes / @property / animation-timeline / View Transitions, JS-driven motion with the Motion / GSAP / AutoAnimate decision rule, Three.js when the 3D is the hero value not when it isn't, generated stills via Nanobanana 2 and Recraft V4 with discipline (always post-process, reference images, stamp the model), and Lottie explicitly demoted to last resort with the rule "never for what CSS can do". A bakery worked example shows all of it. assets.md is the sourcing canon: Lucide / Phosphor / Heroicons (icons, never mix sets), Simple Icons / SVGL (logos), Storyset / Humaaans / unDraw (library illustration with mandatory customisation), Browserframe / Ray.so / Cleanmock (mockups), Mixkit / Coverr / Pexels (video with the AV1 → VP9 → H.264 codec chain and fetchpriority="high" rule), Unsplash / Nappy / Shotstash (photography), CSS gradients + fffuel.co (abstracts, no aurora), LottieFiles / Rive (last resort). Three new hero archetypes in component-cookbook.md (H7 clipped video, H8 mockup split, H9 custom illustration centerpiece) with within- archetype variation knobs added to the table. Eight new tells in anti-patterns.md: aurora-blob background, floating- orb decoration, sound-on autoplay, lazy-loaded LCP, mismatched icon sets, AI-illustration look, Lottie shortcut, Three.js for a still object. Slop test 29 → 33 with four hero-enrichment gates: video autoplay discipline, abstract-background restraint, single-icon-library check, and the Lottie-shortcut catch. SKILL.md design flow gains Step 4 "Decide on hero enrichment" between the macrostructure pick and the build, with the enrichment hierarchy as a non-negotiable. Frontmatter version bumped to 0.4.0. New refs listed as load-on-demand. Sixteenth theme: Quiet. Restraint as the design — system fonts (no web fonts loaded for Quiet), barely-warm near-white paper (oklch 99.5% 0.002 90, deliberately not pure #FFFFFF), barely-cool near-black ink, accent equal to ink (no chromatic accent at all), average-sized headlines (clamp 1.75–2.75rem, much smaller than the 3.5–8rem of every other theme), generous whitespace (section-gap 12rem). Hero archetype: Letter. Footer: Inline. No reveals — Quiet is intentionally still. A deliberate exception to Hallmark's "pair distinctive display + body" rule, which the theme tokens block calls out explicitly. The user spec was "the most simple you can make it"; Quiet is. Landing page demonstration of E1: Pastel theme now renders the clipped-edge dashboard mockup as its hero instead of Letter. The mockup is hand-built CSS art — no real video, no images. Browser chrome (three dots, hallmark.studio URL), a sidebar with the active item in indigo accent, a 3-card grid showing a stat, a sparkline, and a rows card. Tilted -0.4° for life. Extends ~12vw past the viewport right edge. Collapses to stacked at < 60rem. The implementation IS the custom-craft principle: built, not picked. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>