From b210dd71e73e1b289b1e2f2407ad3b1458dc632e Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 8 Jun 2026 11:24:38 -0700 Subject: [PATCH] skill: strip self-priming examples from 5 rules MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase-2 ablation audit caught these rules causing the exact behavior they ban via the literal examples in their own prose. Verified: OpenAI samples under skill-on produced "fake theater", "vendor theater", "heatmap theater" as verbatim copies of the 'X theater' example. Same pattern for the restrained-on-cream example, the aphoristic-cadence template, and the "reserve uppercase for…" enumeration. - skill-ban-codex-x-theater: drop the 3 syntactic templates + 3 example phrases ("Productivity theater" etc.) - brand-imagery-required: drop the niche enumeration that cued "imagery not required elsewhere" - skill-typo-no-all-caps-body: drop the "Reserve uppercase for labels / eyebrows / badges" enumeration that primed uppercase usage - brand-color-no-converge: drop the "restrained-on-cream" example that was priming cream-heavy palettes - skill-copy-no-aphoristic-cadence: drop the literal cadence template ("serious statement, then punchy short negation") that named the rhythm it bans Ablation re-run pending in impeccable-evals to measure impact. Co-Authored-By: Claude Opus 4.7 (1M context) --- skill/SKILL.src.md | 6 +++--- skill/reference/brand.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/skill/SKILL.src.md b/skill/SKILL.src.md index d7e534605..3ac559822 100644 --- a/skill/SKILL.src.md +++ b/skill/SKILL.src.md @@ -37,7 +37,7 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. - Hierarchy through scale + weight contrast (≥1.25 ratio between steps). Avoid flat scales. - Cap font-family count at 3 (display + body + optional mono). More than 3 reads as indecision, not richness. One well-tuned family with weight contrast usually beats three competing typefaces. - Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights. -- No all-caps body copy. Reserve uppercase for short labels (≤4 words), section eyebrows (used sparingly per the Absolute bans), and badges. Sentences in ALL CAPS are unreadable at body sizes. +- No all-caps body copy. Sentences in ALL CAPS are unreadable at body sizes. - Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing. - Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed". - Use `text-wrap: balance` on h1–h3 for even line lengths; `text-wrap: pretty` on long prose to reduce orphans. @@ -78,7 +78,7 @@ Two hard typographic ceilings you currently miss: - Every word earns its place. No restated headings, no intros that repeat the title. - **No em dashes.** Use commas, colons, semicolons, periods, or parentheses. Also not `--`. -- **No aphoristic-cadence body copy as a default voice.** Don't fall into the rhythm of "serious statement, then punchy short negation" as the page's recurring voice. If three or more section copy blocks on the page land on a short rebuttal-shaped sentence, rewrite. Specific, not aphoristic. +- **No aphoristic-cadence body copy as a default voice.** If multiple section copy blocks share a single repeating sentence rhythm — especially a contrarian-sounding closer: rewrite. Specific, not aphoristic. - **No marketing buzzwords.** The streamline / empower / supercharge / leverage / unleash / transform / seamless / world-class / enterprise-grade / next-generation / cutting-edge / game-changer / mission-critical family of phrases. Pick a specific noun and a verb that describes what the product literally does. - Button labels: verb + object. "Save changes" beats "OK"; "Delete project" beats "Yes". The label should say what will happen. - Link text needs standalone meaning. "View pricing plans" beats "Click here"; screen readers announce links out of context. @@ -117,7 +117,7 @@ Match-and-refuse. If you're about to write any of these, rewrite the element wit - **`border-radius: 32px+` on cards / sections / inputs.** You over-round. Cards top out at 12–16px; full-pill is fine for tags/buttons. Picking 24/28/32/40px on a card is the codex tell; no brand wants "insanely rounded". - **Hand-drawn / sketchy SVG illustrations.** Class names like `loose-sketch`, `*-sketch`, `doodle`, `wavy`; `feTurbulence` / `feDisplacementMap` "paper grain" filters; 5-to-30 path crude scenes meant to depict a tangible subject (an otter, a table-and-fork, an album cover). All of these read as amateurish, not whimsical. If you can't render the scene with real assets, ship no illustration. Don't attempt sketchy SVG as a fallback. - **`repeating-linear-gradient(...)` stripe backgrounds.** Diagonal stripes in `body:before` or section backgrounds are pure codex decoration. Don't. -- **"X theater" / "actually X" / "not just X, it's Y" copy.** "Productivity theater", "engagement theater", "growth theater": instant AI slop. Choose a specific noun, not a meta-criticism phrase. +- **Meta-criticism copy.** Naming a concept then layering an ironic modifier, or staging a strawman to "correct" it. Make the specific claim instead. ### The AI slop test diff --git a/skill/reference/brand.md b/skill/reference/brand.md index ba8c2b34c..359efc069 100644 --- a/skill/reference/brand.md +++ b/skill/reference/brand.md @@ -60,7 +60,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Name a real reference before picking a strategy. "Klim Type Foundry #ff4500 orange drench", "Stripe purple-on-white restraint", "Liquid Death acid-green full palette", "Mailchimp yellow full palette", "Condé Nast Traveler muted navy restraint", "Vercel pure black monochrome". Unnamed ambition becomes beige. - Palette IS voice. A calm brand and a restless brand should not share palette mechanics. - When the strategy is Committed or Drenched, color carries the brand. Don't hedge with neutrals around the edges. Commit. -- Don't converge across projects. If the last brand surface was restrained-on-cream, this one is not. +- Don't converge across projects. Each brand surface differentiates from the last. - When a cultural-symbol palette is the obvious pull, reach past it. Let the cultural reading come from typography, imagery, and copy, not the palette. ## Layout @@ -74,7 +74,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo. -**When the brief implies imagery (restaurants, hotels, magazines, photography, hobbyist communities, food, travel, fashion, product), you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse. If the approved comp or brief is image-led, ship real project assets, generated raster assets, or a credible canvas/SVG/WebGL scene. Do not replace photographic, architectural, product, or place imagery with generic CSS panels, decorative diagrams, cards, bullets, or copy. +**When the brief implies imagery, you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse. If the approved comp or brief is image-led, ship real project assets, generated raster assets, or a credible canvas/SVG/WebGL scene. Do not replace photographic, architectural, product, or place imagery with generic CSS panels, decorative diagrams, cards, bullets, or copy. - **For greenfield work without local assets, use stock imagery.** Unsplash is the default. The URL shape is `https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w=1600&q=80`. **Verify the URLs before referencing them.** If you have an image-search MCP, web-fetch tool, or browser access, use it to find real photo IDs and confirm they resolve. Guessed IDs (even ones that look real) often 404 and ship as broken-image placeholders. Without a verification path, pick fewer photos you're confident exist over more that you guessed; never substitute colored `
` placeholders. - **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".