howone 0.1.28 → 0.1.30

package/templates/vite/.howone/skills/hallmark/ROADMAP.md

@@ -1,201 +0,0 @@
-# Hallmark — Roadmap
-
-A forward-looking plan for what to build next, drawn from the gaps the latest research surfaced and from where the field is heading. Ordered by impact-to-effort.
-
----
-
-## Now — actively working on
-
-### N.1  Better themes + more custom-designed themes
-
-**Status now.** The 22 catalog themes work but a handful (Plain, Specimen, Salon, Linen) bleed into each other on first read — same paper-band, similar accent footprint, similar display roles. Real distinctiveness lives in only ~12 of them. Custom-theme construction (the `custom-theme.md` branch) exists but is rarely reached for; users mostly stay on catalog defaults.
-
-**Build.**
-1. **Tighten the existing 22** — audit each theme's three diversification axes (paper-band / display-style / accent-hue) and pull any pair that overlaps on 2+ axes back to distinct territory. The themes that ship today should each carry a stronger fingerprint.
-2. **Add 4–6 new catalog themes** in underserved corners of the axis space — e.g. mid-band warm chromatic (something between Salon and Garden), dark-monochrome editorial (no current Midnight equivalent for serif-led editorial), high-contrast print-poster (a Brutal cousin that's quieter), warm dark with handwritten accent. Each new theme ships with its own tokens block in `site/css/tokens.css` and a stamp axis declaration.
-3. **Surface the custom branch more often.** Right now custom requires 3+ vibe words. Lower the bar so a single distinctive brand colour or unusual font request routes to custom, not the closest catalog cousin.
-
-**Why it matters.** Catalog rotation is the headline differentiator — if half the catalog is interchangeable, the rotation doesn't deliver. More distinct themes = more visible variety per session = users feel the discipline working without reading the rules.
-
-### N.2  Nanobanana image generation inside Hallmark (image-led theme)
-
-**Status now.** [`assets.md`](references/assets.md) lists Nanobanana as the canonical generated-still source (Tier C in the enrichment hierarchy) but the integration is *recommend-only* — Hallmark tells the user to go generate something and bring it back. No first-class image-led theme exists; image-heavy briefs route to a typography-only macrostructure and feel underserved.
-
-**Build.**
-1. **First-class Nanobanana hook.** When the brief signals "needs imagery" (e-commerce, travel, food, lookbook, gallery) and the user hasn't supplied real assets, Hallmark generates a brief for Nanobanana (style, subject, framing, palette tokens), invokes the API, ingests the returned image, and wires it into the build. Cache by prompt hash so re-runs are cheap.
-2. **New image-led theme** (working title: **Plate**) — a theme tuned for image-heavy compositions. Generous photographic framing, neutral chrome around full-bleed imagery, hairline rules, restrained type so the picture leads. Pairs with the Photographic macrostructure and the H6 Photographic-Fold archetype. Distinct from existing themes because it assumes imagery exists and treats text as caption-grade.
-3. **Token discipline for generated stills.** Nanobanana outputs need to thread back to the theme's accent / paper — extract dominant hue from the returned image, suggest as accent override, let the user confirm. Prevents the "generated image clashes with the theme palette" failure mode.
-
-**Why it matters.** Today Hallmark is a typography-led tool. Half of real-world landing pages need imagery (consumer brands, hospitality, e-commerce). Adding first-class Nanobanana support + an image-led theme covers that gap without forcing the user to leave the skill, and it positions Hallmark as a complete builder rather than a type-only specialist.
-
----
-
-## Tier 1 — Ship next (high impact, contained scope)
-
-### 1.1  Theme-aware microinteraction tokens
-
-**Status now.** [`microinteractions.md`](references/microinteractions.md) describes a duration multiplier per theme as a table — but the multipliers aren't actually expressed in CSS. Atelier and Salon should *feel* slower than Brutal and Sport, but right now they share the same `--dur-short` / `--dur-long`.
-
-**Build.** Move `--dur-micro`, `--dur-short`, `--dur-long` into per-theme overrides in [`tokens.css`](site/css/tokens.css), scaled by the table in `microinteractions.md`. Newsprint and Terminal use `0ms` for spatial motion (they're print/terminal metaphors). One pass through the file; small diff.
-
-**Why it matters.** Today a Salon page and a Brutal page animate at the same speed. They shouldn't. The principle of structural variety should extend to motion variety.
-
-### 1.2  DESIGN.md output protocol
-
-**Status now.** Hallmark produces code. It does not produce a portable design spec.
-
-**Build.** When Hallmark generates new work, also emit a `DESIGN.md` in the project root containing: chosen tone, palette tokens (with OKLCH values), type stack, spacing scale, structural fingerprint, motion tokens, and the named anti-patterns the page must continue to avoid. Other AI tools (Cursor, v0, Bolt) can read this file directly to keep iterating on the same design language.
-
-**Why it matters.** Closes the loop between Hallmark and the rest of the agent ecosystem. The skill stops being a one-shot generator and becomes a system that hands its decisions forward.
-
-### 1.3  `hallmark variant` — three fingerprints, user picks one
-
-**Status now.** Hallmark produces *one* designed output per brief.
-
-**Build.** New verb: `hallmark variant <target>` produces three structurally distinct versions of the same brief — different fingerprints across the six axes — and presents them as a side-by-side comparison. The user picks the one that fits, or asks for a fourth. This is the workflow `taste-skill v3.0` parameterises with dials; Hallmark would expose it as a verb.
-
-**Why it matters.** The biggest cause of "AI feel" isn't bad output — it's the user accepting the *first* output because they don't know it could be different. Showing three forces a judgement call and surfaces taste.
-
-### 1.4  Theme switcher polish on the landing page
-
-**Status now.** The 12-theme picker is good but a few rough edges remain.
-
-**Build.**
-- Trap the focus inside the popover when open (currently focus can escape).
-- Make the swatch dots match each theme's *exact* paper/ink/accent (some currently approximate).
-- On theme apply, briefly flash the orange accent rule under the trigger label to confirm — *silent success* via a 200ms colour pulse, not a toast.
-- The kbd hint (`press T`) currently sits next to the trigger but only on hover — also reveal on `:focus-within` of the navbar, for keyboard users who haven't reached for the mouse.
-
-**Why it matters.** The landing page itself is the strongest demo of Hallmark's microinteraction taste. It has to be exemplary.
-
----
-
-## Tier 2 — Build after Tier 1 lands (still concrete, more scope)
-
-### 2.1  `references/structural-cookbook.md` — concrete recipes
-
-**Status now.** [`structure.md`](references/structure.md) catalogues the *axes* of structural variety. It doesn't show *what* a left-margin-headed, single-column, hairline-divided, unstyled-link, no-image, no-reveal page actually looks like assembled.
-
-**Build.** A cookbook file with 12–20 *complete* structural fingerprints, each with a short HTML/CSS sketch, a paragraph explaining when to reach for it, and a real-world reference (NYT Mag, Stripe, Linear, Pentagram, etc.). The cookbook teaches the model patterns the same way recipe books teach cooking — through *worked examples*, not just *principles*.
-
-**Why it matters.** Models are pattern-matchers. Catalogued patterns + named recipes are easier to reach for than principles + axes.
-
-### 2.2  `references/tactile-rebellion.md` — controlled imperfection
-
-**Status now.** Hallmark assumes pixel-precision is the goal. The 2026 cultural movement is the opposite: handmade textures, controlled imperfection, *wabi-sabi*. 73% of designers (per CreativeBloq's 2026 trends report) are deliberately adding imperfections to differentiate from AI.
-
-**Build.** A new reference file covering: when to apply texture (sparingly; one element per page max); how to do it without falling into kitsch (real letterpress reference, not "letterpress filter"); free SVG noise/grain generators; hand-drawn SVG path techniques; controlled-jitter typography (a 0.5° rotation on a single mark is taste; on every word it's chaos).
-
-**Why it matters.** This is where the field is going and the current canon (impeccable, kami) has nothing on it. First-mover advantage.
-
-### 2.3  `references/data-viz.md` — Tufte-leaning anti-slop charts
-
-**Status now.** Nothing about charts. Yet a dashboard or analytics page is half data viz, and AI-generated charts are *especially* bad — rainbow palettes, 3D pies, gridlines everywhere, sparkles instead of lines.
-
-**Build.** A reference file covering: small multiples over single dense charts; tabular numbers; restraint in colour (one accent for the focal series, neutrals for context); axis design (minimum gridlines, no chartjunk); when to use bars vs lines vs sparklines; banned chart types (3D anything, donut charts where pie would do, dual-axis line charts).
-
-**Why it matters.** Data-density is the next frontier of "looks AI-generated" — and Tufte is the canonical reference no current skill cites.
-
-### 2.4  Multi-page coherence rules
-
-**Status now.** Hallmark's structural-variety rule says "two consecutive pages in the same session should not share more than three of the six structural axes." That's correct for variety but wrong for *brand consistency* across a real product where every page should feel like the same site.
-
-**Build.** A new reference: `references/coherence.md`. When working within a multi-page project, lock the first three axes (typography, colour, divider language — the *brand* axes) and vary the remaining three (heading placement, body composition, button voice — the *page-voice* axes). Different *pages* of the same site, not different *sites*. Add a test: "if I removed the navigation, would these two pages look like they're from the same product?" Yes. Continue. No. Re-anchor.
-
-**Why it matters.** Right now the structural-variety rule is too strong. Real products need *coherent variety*, not chaotic variety.
-
-### 2.5  `hallmark extract` — read existing code, output DESIGN.md
-
-**Status now.** Hallmark generates from briefs. It can't ingest existing systems.
-
-**Build.** New verb: `hallmark extract <directory>`. Reads the codebase. Identifies tokens (colour vars, type ramps, spacing scale, easings). Identifies the structural fingerprint actually in use. Writes a DESIGN.md the user can hand to other agents — or to Hallmark itself for `redesign` work. SkillUI does this for visual designs; Hallmark would do it taste-aware.
-
-**Why it matters.** Most users come to Hallmark *with* an existing codebase, not a greenfield brief. The skill needs an entry point for the existing case.
-
----
-
-## Tier 3 — Long horizon (research-grade, ambitious)
-
-### 3.1  `hallmark explain` — pedagogy verb
-
-A verb that explains the choices made, *axis by axis*, in plain language. "I picked left-margin headings because the brief was editorial and the audience is reading-led; I picked hairline dividers because the tone was austere and ornament would have warmed the page; I picked silent success on the form because the user can see the row was saved." Teaches users to make the same choices themselves over time. The skill becomes a *teacher*, not just a generator.
-
-### 3.2  Negative-capability rules
-
-[PencilPlaybook](https://github.com/stevembarclay/pencilplaybook) embeds *perceptual psychology* in its anti-patterns — not just "don't use side-stripe cards" but "side-stripe cards trigger a horizontal cognitive scan that splits the user's attention from the content; the brain has to process two reading axes at once, which costs ~120ms per card." That's a different kind of teaching.
-
-Build a `references/why.md` that, for each major anti-pattern, includes the perceptual or cognitive reason it fails. Models that *understand* an anti-pattern reach for the alternative more reliably than models that just *know* the anti-pattern.
-
-### 3.3  Emotion-first prompting
-
-Today: tone words (editorial, brutalist, austere). Tomorrow: emotion words (anxious, optimistic, nostalgic, sceptical). The brief "build me a page that feels nostalgic but also forward-looking" should produce different work than "build me a page that feels confident and warm" — even if the audience and use case are the same.
-
-This requires a new mapping: emotion → tone → fingerprint. Worth building once the field has converged on what these mappings are. (Currently nobody has mapped them.)
-
-### 3.4  Sound and haptic policy
-
-Currently [`microinteractions.md`](references/microinteractions.md) says "no sound on web" — correct default. But Hallmark could ship a tiny module covering: when sound is appropriate (gaming, AAA brands, accessibility-augmenting); haptic feedback (Vibration API on mobile); and how to do them without crossing into kitsch. Small file; long horizon.
-
-### 3.5  Live preview as a Claude Code MCP server
-
-The most ambitious direction. Today Hallmark writes code into files; the user runs a static server to preview. A Claude Code MCP server could:
-- Watch the file
-- Render it in a sandbox
-- Take a screenshot
-- Feed the screenshot back to the model for self-critique against the slop test
-- Iterate
-
-This closes the loop between *generation* and *audit*, automatically. The skill audits itself before handing back. Anthropic's [canvas-design](https://github.com/anthropics/skills) skill is a step toward this for static art; Hallmark could be the interactive equivalent.
-
----
-
-## Things to *not* do
-
-A list of tempting directions that would make Hallmark worse, not better. Forcing the discipline.
-
-- **Don't add a fifth verb** before the existing four are battle-tested. `default / audit / refine / redesign` is enough surface area for the next six months. Adding `polish / typeset / colorize / animate / ...` (impeccable's path) trades comprehensibility for surface area. Resist.
-- **Don't add more than 12 themes.** The cognitive cost of 16 themes is higher than the value of 16 themes. If anything, *cut* underperforming ones.
-- **Don't ship a UI library.** Hallmark is a *taste* skill, not a component kit. shadcn/ui and Geist exist; refer users to them. Building components inside Hallmark dilutes the focus.
-- **Don't add A/B testing or analytics** to the skill. It's not a SaaS product.
-- **Don't build a Figma plugin.** The skill works in code; that's a feature, not a limit. Designers who want Figma have other tools.
-- **Don't add prompts to "match a brand"** by URL scraping on the *default* verb. That's SkillUI's job — point users there. **Exception:** `hallmark study` accepts URLs as a source for DNA extraction (read-only; never to clone the surface). The same refusal heuristics that govern image-mode `study` apply — marketplaces, template demos, and disclosed competitors are auto-refused before WebFetch fires.
-- **Don't add image generation.** Out of scope; AI imagery is its own problem space, and the right answer is usually "use real photos" or "no image."
-
----
-
-## Measurement
-
-How we know Hallmark is getting better, not just bigger:
-
-1. **Slop test pass rate.** Every output should pass all 20 questions. Track failures and categorise.
-2. **Structural-fingerprint diversity.** Across the last 10 outputs of the skill, how many *unique* fingerprints? Target ≥ 8/10.
-3. **Microinteraction tells per output.** Target 0. (`transition-all`, `hover:scale-105`, bouncy easing on UI, etc. are flagged.)
-4. **User picks the first output without revision.** A high "first try" rate is the single best taste indicator. Track it.
-5. **DESIGN.md re-import round-trip.** A user runs `hallmark extract` then `hallmark` with the extracted DESIGN.md in scope. The result should match the original within token boundaries. If it drifts, the extraction or the application is wrong.
-
----
-
-## What's already shipped
-
-For reference. Everything below is in current `0.4.0`.
-
-- ✓ Skill: 5 verbs (default, audit, refine, redesign, study)
-- ✓ References: typography, color, layout-and-space, motion, microinteractions, structure, interaction-and-states, responsive, copy, anti-patterns, macrostructures, component-cookbook, study, hero-enrichment, custom-craft, assets
-- ✓ 16 themes with structural fingerprints (including Studio, Pastel, Riso, Quiet)
-- ✓ 21 named macrostructures + 36 component archetypes with within-archetype variation knobs
-- ✓ Sticky-top banner theme picker with random + ?theme= URL parameter
-- ✓ Per-theme component archetype swap (hero + footer rebuild on theme change)
-- ✓ Hero enrichment: demo video / mockup / illustration / abstract background, with Lottie demoted to last resort
-- ✓ Custom-craft canon: pure CSS art, hand-built SVG, declarative animation, View Transitions, Three.js when justified
-- ✓ Asset-source catalogue: Lucide / Phosphor / Heroicons (icons), Simple Icons / SVGL (logos), Nanobanana 2 / Recraft V4 (generated illustration), Storyset / Humaaans (library), Mixkit / Coverr (video), Unsplash / Nappy (photography)
-- ✓ Working install path: `cp skill/* ~/.claude/skills/hallmark/`
-- ✓ Slop test 33 questions: visual (8), structural (2), microinteractions (10), variety (3), implementation (6), hero enrichment (4)
-- ✓ View Transitions on theme switch, with reduced-motion fallback
-- ✓ Copy-to-clipboard with silent success on install code blocks
-- ✓ Keyboard shortcut (`T` cycle, `Shift+T` reverse, `R` random)
-
----
-
-## Deferred
-
-- **Tier 2.3 — Data-viz / chart canon.** Small multiples, axis restraint, banned types (3D donut, dual-axis), Tufte principles. Mentioned in hero-enrichment.md but full reference not yet written.

package/templates/vite/.howone/skills/hallmark/docs/recipes.md

@@ -1,186 +0,0 @@
-# Recipes — copy-paste prompts that ship Hallmark output
-
-Eight worked briefs you can paste into Claude Code, Cursor, or Codex with the Hallmark skill installed. Each shows the prompt verbatim, the audience/use/tone the skill inferred, the macrostructure + theme + enrichment it picked, and a one-paragraph excerpt of the output. Live page links are included where the test exists in [`site/_tests/`](../../site/_tests/).
-
-The first recipe is the **canonical try-it prompt** — paste it into a fresh project to verify the skill is installed and discover the flow before reading anything else.
-
----
-
-## 00 · Try it · Coffeebox
-
-**Prompt** (copy/paste verbatim):
-
-> *"Build me a landing page for Coffeebox — a small-batch coffee subscription. Roast on Sunday, ship on Monday, drink Tuesday. Audience: people who already buy good coffee and want fewer trips to the shop. Tone: warm, hand-set, editorial — like a small café's chalkboard."*
-
-**Inferred trio:** explicit (audience: serious-coffee buyers · use: subscribe · tone: editorial-warm).
-
-**Picks:** Long Document · **Linen** (warm-paper roman-serif) · Tier-B hand-built SVG (a small coffee-bean icon, optional).
-
-**Excerpt of the output:**
-
-> *"Coffeebox · est. 2026 · n.º 12.* The first roast leaves the drum at 6:14 a.m. Sunday. By Monday morning it's in a paper bag in your post box. By Tuesday the kitchen smells like a café. Subscribe, skip a week, change the roast — all from the email. We bake what we baked yesterday. We ship what shipped well. We answer the email ourselves."
-
-**Why this is the canonical try-it:** the brief has explicit context (no design-context-gate friction), an editorial tone (different from any AI-default landing page), and a domain (coffee subscription) that has zero overlap with SaaS/dev-tool clichés. If Hallmark produces *Linen-with-italic-Cormorant-and-warm-paper* for this prompt, the skill is wired correctly.
-
----
-
-## 01 · Tide · Indie podcast
-
-**Prompt:**
-
-> *"Design a landing page for Tide — an indie podcast about long-form interviews with small-studio designers. Just go ahead, pick the rest yourself."*
-
-**Inferred trio** (the user opted out): audience = designers, design-curious listeners · use = listen + subscribe · tone = quiet editorial.
-
-**Picks:** Letter · **Salon** (warm cream paper, IBM Plex Mono masthead, Cormorant Garamond body, warm-amber caret) · no enrichment (typography only).
-
-**Excerpt:**
-
-> *"Dear listener, Tide is a podcast about how small studios actually work. The bookings, the unsent invoices, the day a senior designer leaves and you sit in the office not knowing what to say to the four people who stayed."* The hero is the salutation. Below: three paragraphs of host-voice, a sign-off, then a single row of "listen where you listen" links — Apple, Spotify, Pocket Casts, Overcast, RSS. No mockups. No demo. The voice carries the brand.
-
-**Live:** [`_tests/01-tide-podcast/`](../../site/_tests/01-tide-podcast/index.html)
-
----
-
-## 02 · Streampipe · Open-source CLI
-
-**Prompt:**
-
-> *"Build me a landing page for Streampipe — a small, fast, single-binary CLI for parsing log and event streams from stdin. Filter, transform, route. Composes with anything that emits lines. Audience: developers. Use: install + read docs. Tone: technical. Use the Terminal theme."*
-
-**Inferred trio:** explicit. **Theme requested.**
-
-**Picks:** Long Document · **Terminal** (dark phosphor-green, mono everywhere) · Tier-A inline CSS-art terminal blocks (no Lottie, no real video, no sticky pin — embedded inline in the prose).
-
-**Excerpt:**
-
-> *"$ streampipe — a small, fast, single-binary CLI for parsing log and event streams from stdin."* Then a paragraph of prose explaining what it does, an inline `<pre>` showing `tail -f access.log | streampipe parse --format nginx --filter 'status >= 500' --out json` with three sample JSON output lines, then a second paragraph (Rust, 1.2 MB binary, no daemon, no buffer). Below: install section (three snippets — brew · cargo · curl), three numbered notes on how it works, a six-row flag table. Pure CSS, no scripts.
-
-**Live:** [`_tests/02-streampipe-cli/`](../../site/_tests/02-streampipe-cli/index.html)
-
----
-
-## 03 · Maple Street Bread · Artisan bakery
-
-**Prompt:**
-
-> *"Build a landing page for Maple Street Bread — a small artisan bakery in Lisbon. Sourdough, slow, by hand. We open at seven, thirty loaves, gone by noon, no online orders. Audience: locals. Use: see what we bake, find us. Tone: warm, hand-set."*
-
-**Inferred trio:** explicit.
-
-**Picks:** Catalogue · **Almanac** (warm parchment paper, IM Fell roman-serif display, warm-amber accent) · Tier-A hand-built inline-SVG bread silhouettes (one per item, 96 px, no animation).
-
-**Excerpt:**
-
-> Plate-banner masthead: *"Maple Street Bread · Lisbon · est. 2026 · n.º 47 · sourdough by hand."* Then a centred section: *"Today's bake — Saturday, 6:14 a.m., eight breads, gone by noon."* Below: a 2-column catalogue grid of eight breads (Country sourdough · Baguette tradition · Focaccia rosemary · Boule miche · Rye dark · Brioche feuilletée · Walnut levain · Bola d'óleo). Each row carries a 96-px bread silhouette, the name in IM Fell, a one-line description, and a price (or "sold out"). Visit and hours in a centred almanac panel at the bottom. No CTA — the brief is "see what's available + visit."
-
-**Live:** [`_tests/03-maple-bakery/`](../../site/_tests/03-maple-bakery/index.html)
-
----
-
-## 04 · Meridian · Studio manifesto
-
-**Prompt:**
-
-> *"A studio manifesto for Meridian — a small environmental-products design practice in Lisbon. Declarative, no flashy stuff."*
-
-**Inferred trio** (partial): audience = practice peers + clients · use = read it + sign on or move on · tone = declarative editorial.
-
-**Picks:** Quote-Led · **Brutal** (near-black paper, Druk-style condensed display, single yellow strike accent) · no enrichment.
-
-**Excerpt:**
-
-> A single twenty-word pull-quote: *"We make products that don't outlive their use"* — with a yellow strike-through behind "outlive." Attribution beneath: *"— The studio · the position we open with · this is the page."* Below the bleed-yellow rule, four numbered principles (Fewer things, made well · Material is the brief · Repair before replace · Slow is the deliverable), each with one paragraph of body copy. Final § Working rules — five terse operational statements (the shop runs on a four-day week · we answer the email ourselves · etc.). No CTA, no testimonials, no roadmap.
-
-**Live:** [`_tests/04-meridian-manifesto/`](../../site/_tests/04-meridian-manifesto/index.html)
-
----
-
-## 05 · Tracejam · SaaS observability
-
-**Prompt:**
-
-> *"Build me a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical."*
-
-**Inferred trio:** explicit.
-
-**Picks:** Workbench · **Midnight** (dark cool paper, Geist Mono display, phosphor-cyan accent) · Tier-A pure-CSS sticky trace panel (3-state, swaps on scroll — no clipped browser frame).
-
-**Excerpt:**
-
-> *"Tracejam · v0.4 · For SREs &amp; platform engineers. Distributed tracing that explains itself."* Hero left-aligned with two CTAs (Try it free / Talk to sales). On the right, a sample trace card with five spans — auth.verify, pricing.quote (red, regressed), rates.fx (orange, warning), ledger.write — bars rendered as flex children. Below: a sticky-walkthrough section with three steps (open · find · read), each with a one-paragraph body and a small `$ tracejam ...` command. The right column carries a pinned trace panel with a "REGRESSED" chip and a "WHY" explainer in plain text. Eight integrations strip, three-tier pricing, single-line colophon.
-
-**Live:** [`_tests/05-tracejam-saas/`](../../site/_tests/05-tracejam-saas/index.html)
-
----
-
-## 06 · Anya · Personal one-pager
-
-**Prompt:**
-
-> *"Personal site for Anya — software architect in Lisbon. Don't ask, just figure it out."*
-
-**Inferred trio** (the user opted out): audience = engineering hiring managers · use = read who I am, see my work · tone = austere, italic-editorial.
-
-**Picks:** Index-First · **Plain** (pure-white paper #ffffff, Inter Tight display-heavy, deep ink-blue accent) · no enrichment.
-
-**Excerpt:**
-
-> Sticky left sidebar with a numbered TOC: *00 Index · 01 Now · 02 Years · 03 Writing · 04 Reach.* Each section in the right column starts with its own num + label and a clamp-set H2. *"00 · Index"* opens with *"A small, scannable index of who I am and what I do."* — followed by a two-paragraph bio. *"01 · Now"* covers consulting two engagements at a time on payment systems and monolith-to-services migrations. *"02 · Years"* is a tabular work history (Stripe → Monzo → Knot → independent). *"03 · Writing"* lists five linked pieces with date columns. *"04 · Reach"* is a four-cell contact grid (email · GitHub · LinkedIn · Mastodon).
-
-**Live:** [`_tests/06-anya-portfolio/`](../../site/_tests/06-anya-portfolio/index.html)
-
----
-
-## 07 · Foundry · Compliance SaaS
-
-**Prompt:**
-
-> *"Build me a landing page for Foundry — SOC 2 and ISO 27001 compliance automation for B2B SaaS. Show: how many companies got compliant, what it costs, who uses it. Audience: founders + CTOs. Tone: technical but trustworthy."*
-
-**Inferred trio:** explicit.
-
-**Picks:** Bento Grid · **Newsprint** (warm-cream paper, Source Serif 4 display, warm-deep-red accent) · Tier-A pure-CSS logo grid (eight wordmark placeholders, mono).
-
-**Excerpt:**
-
-> Newspaper-banner masthead with the wordmark centred. Hero left-bias: *"Compliance, ground out in **days**, not in months."* — the word "days" set in red italic. Right: a pull-quote panel with a CTO testimonial. Below: a 6-tile bento — (1) the "847." anchor stat with a one-line caption, (2) eight customer wordmarks in a 4×2 logo grid, (3) three-tier pricing snippet (Starter $299 · Team $899 popular · Scale custom), (4) a second testimonial pull-quote, (5) a six-row "what's automated" feat-list, (6) a six-question FAQ teaser. Final CTA strip: *"Start the trial. Cancel before the first invoice if it's not ready."* Single-line colophon.
-
-**Live:** [`_tests/07-foundry-compliance/`](../../site/_tests/07-foundry-compliance/index.html)
-
----
-
-## 08 · Cohort · Cohort-based courses
-
-**Prompt:**
-
-> *"Build a landing page for Cohort — the platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams. Audience: course operators + indie creators. Tone: warm, salon-room, editorial."*
-
-**Inferred trio:** explicit.
-
-**Picks:** Stat-Led · **Linen** (warm beige paper, Inter Tight geometric-sans, warm-amber accent) · no enrichment (typography only — the brief's "30–500" range is the visual).
-
-**Excerpt:**
-
-> Centred eyebrow: *"Built for educators · not LMS sales teams."* Hero stat at 22 rem: **"30 — 500"** (with the dash in warm-amber). Headline: *"Live courses, the size your roster actually is."* Sub: *"Cohort runs courses with thirty to five hundred students at once — the size of a real classroom, the size of a real lecture, and a few sizes between. With a date, a roster, and a room."* Below: three supporting stats (186 cohorts run · 93 % finish-rate · 4.7/5 operator NPS). Two operator testimonials side-by-side. Two-tier pricing (First cohort free · Operator $199/mo). Single CTA strip and colophon. No marquee, no card-stack — the brief carried by the typography.
-
-**Live:** [`_tests/08-cohort-courses/`](../../site/_tests/08-cohort-courses/index.html)
-
----
-
-## How the recipes are organised
-
-Every recipe shares the same four lines so you can scan a brief and immediately see *which combination Hallmark picks for what*:
-
-1. **Prompt** — verbatim, copy/paste-ready.
-2. **Inferred trio** — what the design-context-gate produces (audience · use · tone). Marked `explicit` if the user provided all three; `the user opted out` if not.
-3. **Picks** — macrostructure · theme · enrichment archetype.
-4. **Excerpt** — one paragraph of the produced copy or layout, so you can verify the output matches the brief without running the skill yet.
-
-When generating something new, look for the closest match in this file and **note what's different** between your brief and the recipe. The macrostructure pick is usually inherited; the theme often shifts (per the diversification rule); enrichment may change tier.
-
-## What the recipes are *not*
-
-- Not templates. Hallmark's whole point is structural variety — duplicating a recipe verbatim is the **Specimen-fall-through** anti-pattern (gate 23 in [`SKILL.md`](../SKILL.md)).
-- Not fixed picks. Two consecutive runs of recipe 00 (Coffeebox) on the same project should produce *different* macrostructures or themes — the [`.hallmark/log.json`](../SKILL.md) project memory enforces this.
-- Not exhaustive. The 21 macrostructures × 16 themes × 8 enrichment archetypes = 2,688 distinct fingerprints. The 9 recipes here are a starter set; the next 50 are yours to discover.

package/templates/vite/.howone/skills/hallmark/docs/study-examples.md

@@ -1,176 +0,0 @@
-# `hallmark study` — three worked examples
-
-How `study` reads a screenshot the user admires, returns a diagnosis, and (optionally) rebuilds the user's content with the extracted DNA. Each worked example below shows: what the user pasted · what the skill names · what it refuses to do · what it produces.
-
-The whole point of `study`: extract **structural DNA** (macrostructure + archetypes + type-pairing role + colour anchor + rhythm), **never pixels**. If the user wants a 1:1 copy, they want a different tool. Hallmark hands them a diagnosis and lets them keep the bones.
-
----
-
-## Example A · A Pentagram-style editorial portfolio
-
-**What the user pastes:** a screenshot of a New York studio's portfolio site — large italic-serif name in the top-left margin, numbered project list flowing down the page, generous warm-cream paper, a single warm-orange accent on the active project, a hairline rule between rows. (User says: *"I want my portfolio to feel like this.")*
-
-### Refuse-or-proceed check
-
-Public reference for inspiration → proceed. (Refusal heuristics fire on: paid-template-marketplace listings, competitor live marketing pages, copy-protected portfolios. None match.)
-
-### Diagnosis report (what `study` returns first)
-
-> **Macrostructure:** **Specimen** (numbered left-margin labels + huge italic serif + asymmetric spans + typographic-only CTA).
->
-> **Hero archetype:** H4 Margin-Number Display — the page's only anchor is a vertical column of two-digit indices.
->
-> **Pitch archetype:** none. The work is the pitch.
->
-> **Footer archetype:** Ft1 Single-Line Colophon — studio name, year, contact, three links, no nav.
->
-> **Display family role:** italic editorial serif (high optical size, soft axis, ink-black). **Body family role:** geometric sans (humanist Inter-Tight-or-similar at 350-400 weight). Two free candidates: *Fraunces* italic display + *Geist* body. One paid candidate the user might confirm: *Tiempos Headline* + *Söhne*. The skill names *roles*, not exact font IDs — visual font ID is unreliable.
->
-> **Surface lightness band:** light (paper L ≈ 96%). Slight warm tint at hue 80 — Pentagram-warm cream, not stark white.
->
-> **Accent hue band + chroma:** warm-orange ~25-30°, low chroma (≤ 0.13), used at < 5% of viewport. One accent, applied to active state and the one number the brand wants the visitor to remember.
->
-> **Density verdict:** sparse. ~3-4 macro elements on the first viewport. Generous vertical margin between rows (≥ `--space-3xl`).
->
-> **Type-pairing role:** italic-display + sans-body — the canonical editorial pairing.
->
-> **Two anti-patterns the screenshot has** that you should NOT carry over:
->
-> 1. The hover-state on the number-label uses a slow ease-in-out 800 ms colour fade. Per `microinteractions.md` § The timing canon, hover state should be 150–200 ms. Carry the *idea* (colour-shift on hover); shorten the *duration*.
-> 2. The footer text is set at 11 px with 0.06em tracking — under the 14 px floor for body copy. Bump to 12-13 px on rebuild, keep the tracking.
-
-### Confirmation question
-
-> *"Adopt this DNA wholesale, or change one axis? For example, I could keep the macrostructure (Specimen) but pick a theme that better matches your work — if your tone is more ink-blue and B2B, I'd suggest **Plain** (pure-white paper) instead of the warm-cream **Specimen** theme."*
-
-### What `study` builds when the user says "go"
-
-Macrostructure stamp:
-```css
-/* Hallmark · macrostructure: Specimen · H4 hero knobs: number-column=margin, alignment=left-bias
- * theme: Specimen · accent: warm-orange ~3% · enrichment: none
- * studied: yes · DNA-source: user reference · paid-fonts: not confirmed (free pairing applied)
- */
-```
-
-Output: the user's actual portfolio entries arranged in a numbered-margin column with italic-Fraunces titles and Geist-body summaries. Hover delays shortened to 200 ms. Footer text bumped to 12 px. The bones come from the screenshot; the words and projects come from the user.
-
----
-
-## Example B · A Klim-Type-Foundry-leaning specimen
-
-**What the user pastes:** a screenshot of a type-specimen page — full-bleed black paper, single huge geometric-sans display character ("R") tilted -2°, a ruled grid behind it, a footer-band with the typeface name, weight, OpenType features, and a tiny set of glyph callouts. (User says: *"This is the energy I want for our agency rebrand.")*
-
-### Refuse-or-proceed check
-
-Type specimens are typically published references; proceed. (If the screenshot were a paid font foundry's marketing page with an explicit "preview is licensed" watermark, the skill would refuse and ask the user to bring an unconfirmed reference.)
-
-### Diagnosis report
-
-> **Macrostructure:** **Type Specimen** (single character or word centred + ruled grid + footer-band of metadata).
->
-> **Hero archetype:** H9 Single-Glyph — the entire above-the-fold is one letterform.
->
-> **Pitch archetype:** none on the first viewport. The page is *the work being specified*. Pitch (if any) lives below the fold as supporting paragraphs.
->
-> **Footer archetype:** Ft3 Tabular-Specimen — name · weight · OpenType features · designer credit.
->
-> **Display family role:** geometric-sans-heavy (display-display, weights 800-900). **Body family role:** the same sans at 400 — single-font specimen pages are allowed when the single font *is* the design (per `typography.md`). Free candidate: *Bricolage Grotesque 800*. Paid candidate: *Druk* or *NaN Jaune*. *Refuse to guess the exact paid font ID.*
->
-> **Surface lightness band:** dark (paper L ≈ 12%). The dark is uniform across the viewport — no gradient.
->
-> **Accent hue band + chroma:** chromatic-other — single hot-orange callout at ≈ 0.18 chroma, used on **one** OpenType-feature label. Even in a stark specimen, the rule "accent < 5% of viewport" holds.
->
-> **Density verdict:** ultra-sparse. One element above the fold. Density only increases below.
->
-> **Type-pairing role:** single-family specimen (single-font is the design). Body and display the same family at different weights.
->
-> **Two anti-patterns the screenshot has** to NOT carry over:
->
-> 1. The footer-band uses light-grey text (oklch ~75% lightness) on near-black paper. Contrast ratio ~3.2:1 — fails WCAG AA for body. Bump to oklch ~88% on rebuild.
-> 2. The grid lines behind the glyph are at 1 px solid white at 0.4 opacity. On a 4K display this becomes a sub-pixel that disappears or aliases. Use 1 px solid + colour-mix down to 35% lightness instead — keeps visibility across pixel densities.
-
-### Confirmation question
-
-> *"This DNA is for a specimen page, not a marketing page. If you're rebranding an agency, the glyph hero will be impressive on the first visit and pointless after. Suggested adaptation: Type Specimen as the homepage, then a Long Document or Workbench pattern for the about / case-studies / contact pages. Pick: keep all-Specimen, or hybrid?"*
-
-### What `study` builds (hybrid path)
-
-Macrostructure stamp:
-```css
-/* Hallmark · macrostructure: Type Specimen · H9 hero knobs: glyph=user-mark, tilt=-2deg, grid=1px-soft
- * theme: Manifesto · accent: hot-orange ~3% · enrichment: none
- * studied: yes · DNA-source: user reference · paid-fonts: not confirmed (Bricolage 800 free)
- */
-```
-
-The homepage emits the agency's mark in 22-rem Bricolage 800, ruled grid behind, single-line metadata footer. The about and case-study pages inherit the dark-paper + geometric-sans tokens but switch to **Workbench** macrostructure (left-margin index + 1fr content). Brand consistency, structural variety.
-
----
-
-## Example C · A small-studio personal site (Rauno-Freiberg-style)
-
-**What the user pastes:** a screenshot of a personal designer-engineer site — dark-mode paper, a small italic-serif name in the top-left, a single demo embed at the centre (CSS-art clock that ticks), a writing list below. (User says: *"I want my own personal site to feel like this.")*
-
-### Refuse-or-proceed check
-
-A *competitor's live portfolio* is the edge case here. Per `study.md` § Refusal heuristics: if the user is in the same domain as the screenshot subject, ask first.
-
-> *"Is this your own work, a public reference for inspiration, or someone else's live site? If it's someone else's live site, I'll extract the DNA at the structural level only — no copy, no demos, no font IDs — and you'll bring your own content. If it's a paid portfolio template, I won't reproduce it."*
-
-User confirms: public reference for inspiration → proceed with DNA extraction only.
-
-### Diagnosis report
-
-> **Macrostructure:** **Long Document** with a centred demo as the hero archetype.
->
-> **Hero archetype:** H5 Centered-Demo — a single hand-built artefact (CSS art, SVG illustration, declarative animation) sized at ~24 rem, centred on the page, no other hero copy above it.
->
-> **Pitch archetype:** P3 List-of-Writings — title + date + 1-line summary, in a tabular column.
->
-> **Footer archetype:** Ft1 Single-Line Colophon.
->
-> **Display family role:** italic editorial serif. **Body family role:** geometric sans, body weight 400. Free candidate pairing: *Fraunces* italic + *Geist*.
->
-> **Surface lightness band:** dark (paper L ≈ 16%). Slight cool tint at hue 240. Inks at ~90-95% L, also slight cool.
->
-> **Accent hue band + chroma:** chromatic-other — green at hue 145, ≈ 0.14 chroma. Used on the active demo's signal element (the ticking dot), nowhere else.
->
-> **Density verdict:** sparse-medium. Hero demo + ~12-line writing list above the fold.
->
-> **Type-pairing role:** italic-display-with-sans-body — same as Specimen, just on dark paper.
->
-> **One anti-pattern the screenshot has** to NOT carry over:
->
-> 1. The CSS-art clock loops at 1 fps with no `prefers-reduced-motion` fallback. **Always pair declarative animation with a reduced-motion alternative** (`microinteractions.md` § Reduced motion is a first-class state, not an afterthought).
->
-> One thing the screenshot does *better than most* and you SHOULD carry over:
->
-> 1. The italic name in the top-left has a baseline at the same y-position as the centred demo's vertical centre — a subtle horizontal-baseline alignment that makes the page feel composed rather than stacked. Carry this; it's invisible until removed.
-
-### Confirmation question
-
-> *"The DNA is portable: dark paper · italic-Fraunces name · centred demo · cool-green accent. Two questions before I build: (1) what's your demo? — I can hand-build it as Tier-A CSS art if you describe it, or you can paste an existing animation. (2) do you have ~5 writings to seed the list, or should I leave a placeholder section?"*
-
-### What `study` builds when the user provides their own demo + writings
-
-Macrostructure stamp:
-```css
-/* Hallmark · macrostructure: Long Document · H5 hero knobs: demo=centered, size=24rem
- * theme: Midnight · accent: forest-green ~3% · enrichment: Tier-A custom-craft (user-supplied recipe)
- * studied: yes · DNA-source: user reference · with reduced-motion fallback
- */
-```
-
-Output: the user's actual name in italic-Fraunces top-left, their demo (e.g. an ambient breathing-loop) hand-built as CSS art with an explicit `@media (prefers-reduced-motion: reduce)` fallback, their writings tabulated below in Geist body. The bones from the screenshot; the demo and writings from the user. **No pixel-faithful reproduction.**
-
----
-
-## What `study` doesn't do (worth restating)
-
-1. **Names the font role, not the font ID.** Visual font identification is unreliable. The skill proposes one or two real candidates from the canon and asks the user to confirm.
-2. **Never copies pixels.** The DNA is the macrostructure + archetype + colour-anchor + type-pairing — not the dress.
-3. **Refuses the obvious bad sources.** Paid-template-marketplace listings; competitor live marketing pages without explicit user confirmation; copy-protected portfolios without permission.
-4. **Always disclosures the substitutions.** When the screenshot's font is paid (Tiempos / Söhne / Druk) and the user hasn't confirmed a licence, the skill names a free understudy (Fraunces / Inter Tight / Bricolage Grotesque) and *says it's substituting*.
-
-These three examples cover the most common categories of `study` request: an editorial portfolio, a type-specimen statement page, and a small personal site. The protocol is the same for every screenshot — refuse-or-proceed, diagnose, confirm, build. See [`study.md`](study.md) for the full protocol.