From c384e6b5687f9b4f9b6ffc3554d2b50e7cf07e08 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 8 Apr 2026 12:38:12 -0700 Subject: [PATCH] Anti-patterns page polish: visuals for LLM rules, wider grid, compact legend, sidebar divider fix Six fixes from the first-pass review. 1. Visuals for all 13 LLM-only rules. The catalog now ships a preview snippet for every card: Syne-style display, monospace-as-technical, dark-mode-default, everything-in-cards (nested), identical card grids (literal 3x2), hero metric layout (big number + gradient + supporting stats), glassmorphism (backdrop-filter on a gradient), sparkline decoration, generic drop shadows (three rounded squares), modal reflex (backdrop + centered dialog), every-button-primary, redundant-headers, mobile-amputation. Every rule card now has the same ~160px preview treatment. 2. Lede font normalized to match skill detail pages. .sub-page-lede dropped from clamp(1.0625, 1.6vw, 1.25rem) to clamp(1, 1.4vw, 1.125rem) so the paragraph under the anti-patterns title is the same size as the tagline on every other /skills page. 3. "How to read this" legend collapsed into a
disclosure. Summary is a single compact row with the title + chevron, padding 14px vertical. Body appears when opened, same content as before. Chevron rotates on open. 4. Visual example height bumped 140px -> 160px for more breathing room with the complex snippets. 5. Wider grid on the anti-patterns page. .anti-patterns-content no longer has a 820px max-width; only the header (720px max) and legend (720px max) are capped. The rule card grid fills the full main column width on wide viewports, so 38 cards stop wasting horizontal space. 6. Sidebar divider extends to the bottom of the viewport. Add min-height: calc(100vh - var(--site-header-height)) to .skills-sidebar so the sticky column fills the full viewport vertically regardless of content height, and the border-right reaches the footer. --- content/site/anti-patterns-catalog.js | 28 ++++++++++ public/css/sub-pages.css | 74 ++++++++++++++++++++------- scripts/build-sub-pages.js | 23 +++++---- 3 files changed, 97 insertions(+), 28 deletions(-) diff --git a/content/site/anti-patterns-catalog.js b/content/site/anti-patterns-catalog.js index ab93c3b9f..b864f77e9 100644 --- a/content/site/anti-patterns-catalog.js +++ b/content/site/anti-patterns-catalog.js @@ -135,6 +135,34 @@ export const VISUAL_EXAMPLES = { 'wide-tracking': `
Wide tracking on body text slows reading by breaking up natural character groupings.
`, 'line-length': `
Paragraphs wider than roughly 75 characters per line become fatiguing because the eye has to track an excessive distance back to the start of the next line, losing its place.
`, + + // ── LLM-only rule visuals ───────────────────────────────────────── + + 'syne-display-font': `
Synelike
Every AI landing page uses this shape.
`, + + 'monospace-as-technical': `
TECHNICAL_TOOL
Mono for "developer" vibes. Lazy.
`, + + 'dark-mode-default': `
Dark by default
Defaulting to dark is a retreat from a decision.
`, + + 'everything-in-cards': `
Title
Card around every single thing.
`, + + 'identical-card-grids': `
${'
Feature
Short copy.
'.repeat(6)}
`, + + 'hero-metric-layout': `
10M+
Active users
99.9% uptime200ms p50
`, + + 'glassmorphism': `
Frosted glass card
`, + + 'sparkline-decoration': `
Revenue
$42.1k
Tiny chart, no real information.
`, + + 'generic-drop-shadows': `
`, + + 'modal-reflex': `
Are you sure?
Really, truly sure about this?
Cancel
OK
`, + + 'every-button-primary': `
Every action shouts equally.
`, + + 'redundant-headers': `
Overview
This is the overview section, which provides an overview of the overview.
`, + + 'mobile-amputation': `
Export to CSV
"Not available on mobile."
`, }; // ─── LLM-only rules ────────────────────────────────────────────────── diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css index 66de69d04..79940eba4 100644 --- a/public/css/sub-pages.css +++ b/public/css/sub-pages.css @@ -297,7 +297,7 @@ main#main { } .sub-page-lede { - font-size: clamp(1.0625rem, 1.6vw, 1.25rem); + font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.55; color: var(--color-charcoal); max-width: 62ch; @@ -340,6 +340,9 @@ main#main { position: sticky; top: var(--site-header-height); align-self: start; + /* Always full viewport height below the site header so the divider + line extends to the bottom of the viewport even on short pages. */ + min-height: calc(100vh - var(--site-header-height)); max-height: calc(100vh - var(--site-header-height)); overflow-y: auto; padding: var(--spacing-lg) 0 var(--spacing-2xl); @@ -622,12 +625,15 @@ main#main { font-variant-numeric: tabular-nums; } +/* The anti-patterns page lets the grid of rule cards use the full + column width. Header, lede, and legend stay capped for line length. */ .anti-patterns-content { - max-width: 820px; + width: 100%; } .anti-patterns-header { - margin-bottom: clamp(2.5rem, 5vw, 4rem); + max-width: 720px; + margin-bottom: clamp(2rem, 4vw, 3rem); } .anti-patterns-header .sub-page-lede code { @@ -652,30 +658,63 @@ main#main { } .anti-patterns-legend { - padding: var(--spacing-lg); background: var(--color-cream); border: 1px solid var(--color-mist); border-radius: 10px; - margin-bottom: clamp(2.5rem, 5vw, 4rem); + margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 720px; } -.anti-patterns-legend-title { - font-family: var(--font-display); - font-size: 1.25rem; - font-style: italic; - font-weight: 500; - color: var(--color-ink); - margin-bottom: var(--spacing-sm); +.anti-patterns-legend-summary { + list-style: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-sm); + padding: 14px var(--spacing-lg); + transition: background var(--duration-fast) var(--ease-out); } -.anti-patterns-legend p { +.anti-patterns-legend-summary::-webkit-details-marker { + display: none; +} + +.anti-patterns-legend-summary:hover { + background: color-mix(in oklch, var(--color-mist) 40%, transparent); +} + +.anti-patterns-legend-title { + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-ink); +} + +.anti-patterns-legend-chevron { + color: var(--color-ash); + transition: transform var(--duration-base) var(--ease-out); + flex-shrink: 0; +} + +.anti-patterns-legend[open] .anti-patterns-legend-chevron { + transform: rotate(180deg); +} + +.anti-patterns-legend-body { + padding: 0 var(--spacing-lg) var(--spacing-lg); + border-top: 1px solid var(--color-mist); + margin-top: 4px; + padding-top: var(--spacing-md); +} + +.anti-patterns-legend-body p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-charcoal); } -.anti-patterns-legend a { +.anti-patterns-legend-body a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-accent); @@ -684,7 +723,7 @@ main#main { font-weight: 500; } -.anti-patterns-legend a:hover { +.anti-patterns-legend-body a:hover { color: var(--color-accent); } @@ -745,13 +784,10 @@ main#main { /* Visual example preview at the top of each card. */ .rule-card-visual { position: relative; - height: 140px; + height: 160px; background: var(--color-cream); border-bottom: 1px solid var(--color-mist); overflow: hidden; - /* The inline demo snippets often contain text they don't want to - inherit from the card; isolate their context with `all: revert` - on children via .rule-card-visual-inner. */ } .rule-card-visual-inner { diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index c009ef646..f54b24e0c 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -489,15 +489,20 @@ ${rules.map(renderRuleCard).join('\n')}

The full catalog of patterns /impeccable teaches against. ${detectedCount} are caught by a deterministic detector (npx impeccable detect or the browser extension). ${llmCount} can only be flagged by /critique's LLM review pass.

-
-

How to read this

-

AI slop rules flag the visible tells of AI-generated UIs. Quality rules flag general design mistakes that are not AI-specific but still hurt the work. Each rule also shows how it is detected:

-
-
CLI
Deterministic. Runs from npx impeccable detect on files, no browser required.
-
Browser
Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
-
LLM only
No deterministic detector. Caught by /critique during its LLM design review.
-
-
+
+ + How to read this + + +
+

AI slop rules flag the visible tells of AI-generated UIs. Quality rules flag general design mistakes that are not AI-specific but still hurt the work. Each rule also shows how it is detected:

+
+
CLI
Deterministic. Runs from npx impeccable detect on files, no browser required.
+
Browser
Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
+
LLM only
No deterministic detector. Caught by /critique during its LLM design review.
+
+
+
${sectionsHtml}