From 14791a0e3587817d68fafd739d28be4f2e45d856 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 20 May 2026 00:28:07 -0700 Subject: [PATCH] skill: rip out baked-in category recipes and saturated-default motion tropes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Programmatic bias mining (impeccable-evals) traced four major defects back to specific lines in this skill that contradicted SKILL.md's own first-order-reflex warning: - brand.md "Pairing and voice" prescribed four category→aesthetic recipes (editorial → serif+sans, tech/dev/fintech → tight tracking, consumer/food/travel → script/display serif, creative → rule-break). These directly drove OpenAI's 76% extreme-negative letter-spacing on tech briefs and Anthropic/Google's 28-34% italic-serif-display slop on editorial/food briefs. Replaced with one sentence: the shape depends on the brand, not on the brand's category. - brand.md "Brand permissions" had "Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines, a single oversize word as a hero." — a four-for-one slop driver behind 97% OpenAI comically-large H1, 42% bad-SVG illustration, and the editorial-italic slop. Deleted outright. - typeset.md and teach.md repeated the same category recipes; trimmed to the principle without the recipe. - SKILL.md Typography: added a hard hero-H1 ceiling (clamp() max ≤ 6rem ≈ 96px), with a block to make it explicit since OpenAI over-indexes here (97% ≥128px vs 24% for Anthropic). - animate.md, bolder.md, brand.md: removed "staggered reveals" and "scroll-triggered transitions" as the prescribed default ambitious motion. By 2026 that's the saturated AI tell, not a choreography. Reserved stagger for legitimate list-sibling rhythm. Co-Authored-By: Claude Opus 4.7 (1M context) --- skill/SKILL.md | 5 +++++ skill/reference/animate.md | 5 ++--- skill/reference/bolder.md | 8 ++++---- skill/reference/brand.md | 12 +++--------- skill/reference/teach.md | 3 +-- skill/reference/typeset.md | 2 +- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/skill/SKILL.md b/skill/SKILL.md index 1d611efc5..ed7f15eb2 100644 --- a/skill/SKILL.md +++ b/skill/SKILL.md @@ -80,6 +80,11 @@ Before choosing, write one sentence of physical scene: who uses this, where, und - Cap body line length at 65–75ch. - Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales. +- Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing. + + +The hero ceiling is hard. Stop at 6rem max. 8–11rem (128–176px) clamp maxes read as comically loud, not bold. + ### Layout diff --git a/skill/reference/animate.md b/skill/reference/animate.md index a73450aad..176721e2c 100644 --- a/skill/reference/animate.md +++ b/skill/reference/animate.md @@ -6,7 +6,7 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti ## Register -Brand: orchestrated page-load sequences, staggered reveals, scroll-driven animation. Motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. +Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section — that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it. Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it. @@ -49,10 +49,9 @@ Create a purposeful animation plan: Add motion systematically across these categories: ### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations - **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer - **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management +- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing — cap total stagger time per [motion-design.md](motion-design.md). Whole-section fade-on-scroll is not a list and is not legitimate. ### Micro-interactions - **Button feedback**: diff --git a/skill/reference/bolder.md b/skill/reference/bolder.md index 7c6b756ba..562e51c3e 100644 --- a/skill/reference/bolder.md +++ b/skill/reference/bolder.md @@ -78,10 +78,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic, which cheapen the effect) +- **Hero moment**: One signature entrance, once. Not on every visit and not on every section. +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes. +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic, which cheapen the effect). +- **Bolder ≠ scroll-fade-rise on every section.** That's the saturated AI default, the opposite of bold. ### Composition Boldness - **Hero moments**: Create clear focal points with dramatic treatment diff --git a/skill/reference/brand.md b/skill/reference/brand.md index 3d83a1cdc..2d5f79397 100644 --- a/skill/reference/brand.md +++ b/skill/reference/brand.md @@ -43,12 +43,7 @@ The reflex-reject lists apply to **new design choices**. When the existing brand ### Pairing and voice -Distinctive + refined is the goal. The specific shape depends on the brand: - -- **Editorial / long-form / luxury**: display serif + sans body (a magazine shape). -- **Tech / dev tools / fintech**: one committed sans, usually; custom-tight tracking, strong weight contrast inside a single family. -- **Consumer / food / travel**: warmer pairings, often a humanist sans plus a script or display serif. -- **Creative studios / agencies**: rule-breaking welcome. Mono-only, or display-only, or custom-drawn type as voice. +Distinctive + refined is the goal. The specific shape depends on the brand, not on the brand's category. A category — "restaurant", "dev tool", "magazine", "fintech" — is not a recipe; treating it as one is the first-order reflex SKILL.md warns against. Two families minimum is the rule *only* when the voice needs it. A single well-chosen family with committed weight/size contrast is stronger than a timid display+body pair. @@ -93,7 +88,7 @@ Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landin ## Motion -- One well-orchestrated page-load with staggered reveals beats scattered micro-interactions, when the brand invites it. Tech-minimal brands often skip entrance motion entirely; the restraint is the voice. +- One well-orchestrated page-load beats scattered micro-interactions, when the brand invites it. Some brands skip entrance motion entirely; the restraint is the voice. - For collapsing/expanding sections, transition `grid-template-rows` rather than `height`. ## Brand bans (on top of the shared absolute bans) @@ -111,8 +106,7 @@ Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landin Brand can afford things product can't. Take them. -- Ambitious first-load motion. Reveals, scroll-triggered transitions, typographic choreography. +- Ambitious first-load motion. Reveals and typographic choreography that earn their place; not fade-on-scroll for every section. - Single-purpose viewports. One dominant idea per fold, long scroll, deliberate pacing. -- Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines, a single oversize word as a hero. - Unexpected color strategies. Palette IS voice; a calm brand and a restless brand should not share palette mechanics. - Art direction per section. Different sections can have different visual worlds if the narrative demands it. Consistency of voice beats consistency of treatment. diff --git a/skill/reference/teach.md b/skill/reference/teach.md index 474fce7d6..efe88cb73 100644 --- a/skill/reference/teach.md +++ b/skill/reference/teach.md @@ -84,8 +84,7 @@ If the signal is genuinely split (e.g. a product with a big marketing landing), ### Brand & Personality - How would you describe the brand personality in 3 words? - Reference sites or apps that capture the right feel? What specifically about them? - - For brand, push for real-world references in the right lane (tech-minimal, editorial-magazine, consumer-warm, brutalist-grid, etc.), not generic "modern" adjectives. - - For product, push for category best-tool references (Linear, Figma, Notion, Raycast, Stripe). + - Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes. - What should this explicitly NOT look like? Any anti-references? ### Accessibility & Inclusion diff --git a/skill/reference/typeset.md b/skill/reference/typeset.md index acf95ad0b..212a0ebbd 100644 --- a/skill/reference/typeset.md +++ b/skill/reference/typeset.md @@ -4,7 +4,7 @@ Typography carries most of the information on the page. Replace generic defaults ## Register -Brand: run the font selection procedure in [brand.md](brand.md). Pairing follows the brand's lane (display serif + sans body for editorial/luxury, one committed sans for tech, etc.). Fluid `clamp()` scale, ≥1.25 ratio between steps. +Brand: run the font selection procedure in [brand.md](brand.md). Fluid `clamp()` scale, ≥1.25 ratio between steps. Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.