Caption was sitting with a ~56px gap below the labels (32px container
padding-bottom + 24px caption margin-top). Move the <p> inside
.split-comparison so the padding wraps the caption too, not separates
it from the labels. Drop caption margin-top from 24px to 12px and tone
the color down from charcoal to ash + 0.8125rem to match the rest of
the supporting-text rhythm on these pages.
Two issues with the previous buffer pass:
1. The buffer was too small (20px) to feel forgiving.
2. The visible box had a cream background while the buffer area showed
the paper page background, creating a 2% contrast inset that read
as a card-inside-a-card border.
Bump the buffer to 32px per side (64px total) so the demo stops at
500px visible with 564px max-width. Change .split-container background
from cream to paper so it blends into the page and the buffer area is
genuinely invisible. The demo box is now defined by its 1px mist border
and 12px radius alone; individual demos still provide their own
background colors on top via the inline before/after HTML.
Ported the homepage's padding-margin trick: .split-comparison now has
20px of padding around the visible box, with a matching negative
top/bottom margin so the padding does not affect layout flow. The
pointer event listeners move from .split-container to .split-comparison
so the hover tracking engages inside the buffer and only resets when
the mouse leaves the full padded area. Percentage math still reads
.split-container.getBoundingClientRect() so the divider position stays
aligned with the visible box.
This matches how the landing-page split demo feels: graze the edge
and the divider holds; leave the box entirely and it eases back.
Four issues reported on /skills/overdrive (and every other skill demo):
1. The demo block was centered inside the content column, looking odd
against the otherwise left-aligned page. Drop 'margin: 0 auto' from
both .split-comparison and .split-container, and remove the nested
max-width so the whole demo left-aligns at 500px max-width with no
centering.
2. The BEFORE and AFTER labels were stretching beyond the demo box
because .split-comparison (560px) was wider than .split-container
(500px) and .split-labels was using justify-content: space-between
across the wider parent. Collapse the two max-widths to a single
500px cap so the labels now sit flush with the container edges.
3. The label row was sitting way below the demo (16px margin-top plus
the height-stretched container). Tighten margin-top to 10px.
4. The inline split-compare handler only supported click-and-drag. The
homepage effect also tracks hover on devices with hover:hover, so
the mouse sweeps the divider and leaving the box eases it back to
the default. Port that behavior: matchMedia('(hover: hover)') to
detect, pointerenter/leave to toggle a hovering flag, pointerdown/up
for drag, and a tiny lerp on requestAnimationFrame so the return to
center feels smooth. Eyebrow text now reads 'Drag or hover to
compare' to signal both modes.
Also drop text-align: center on .skill-demo-eyebrow and .skill-demo-caption
for the same left-align consistency.
The tutorial showed a hallucinated "installer output" block with
specific ✓-prefixed lines that do not match what npx skills add
actually prints. Delete the block and collapse the surrounding prose
into a single sentence that describes what the command does without
promising specific output. The important guidance (auto-detect, which
directories, reload the harness, look for slash commands) is preserved.
The tutorial h1 used font-style: italic + weight 500, which read as
cursive and sat oddly next to the non-italic h1 on /skills, /anti-patterns,
and skill detail pages. Align it with the shared .sub-page-title
treatment: display serif at weight 400, no italic, clamp(2.5rem, 6vw,
4.5rem). The italic style stays on subsection headings (skill category
titles, anti-pattern section titles) where it still reads as a label,
not a page title.
Two changes bundled:
1. Before/after split demos on every skill detail page.
- loadCommandDemos() in sub-pages-data.js: dynamically imports each
module in public/js/demos/commands (the same files the homepage
uses), returning a { skillId: { id, caption, before, after } } map.
Falls back to a warn-and-continue if a demo file can't be loaded
so one bad demo doesn't break the whole generator.
- buildSubPageData becomes async; caller in build-sub-pages.js
awaits it.
- Each skill object gets a .demo field (may be null for /shape).
- renderSkillDemo() produces the .split-comparison markup matching
the homepage: .split-container with .split-before + .split-after
+ .split-divider, plus Before/After labels and the caption. The
block sits between the detail header and the editorial wrapper
so readers see the visual before reading any prose.
- sub-pages.css ports the core .split-* layout from main.css (the
.slop-* and .impeccable-* helpers are homepage-specific and not
copied). Height is 360px to match the docs column.
- render-page.js grows a lightweight inline split-compare init
script (60 lines of vanilla JS) that handles drag and the skewed
clip-path without depending on the homepage's full lerp/ResizeObserver
module. Runs only on pages that actually have .split-container.
2. Sidebar reorder: Tutorials first, then skills.
Walk-throughs are the on-ramp; they belong at the top of the sidebar
where a new visitor will find them. Add <hr class="skills-sidebar-divider">
between the Tutorials group and the first skill category so the two
sections read as distinct.
Verified: /skills/polish, /skills/bolder, /skills/critique all render
the demo block. /skills/shape correctly has none. Sidebar on any /skills
or /tutorials page shows Tutorials first, then a thin mist divider,
then Create / Evaluate / Refine / Simplify / Harden / System skill
categories.
Two small-to-medium improvements bundled together.
1. Copy buttons on every rendered code block.
- render-markdown.js: wrap each fenced code block in a .code-block-wrap
container and emit a <button class="code-block-copy" data-copy="...">
alongside it. Button text is set via CSS ::before content so the
'Copy' / 'Copied' label is a single toggle class (.is-copied).
- render-page.js: 12-line inline script at the end of the body wires
a delegated click handler that calls navigator.clipboard.writeText
and flips .is-copied for 1.5s.
- sub-pages.css: button styles matching the dark terminal palette,
hidden until you hover the code block, accent-colored success state.
2. Merge Skills and Tutorials under a single Docs nav item.
- Rename the Skills nav link to 'Docs' in every header (partial +
4 hand-authored pages). Drop the separate Tutorials nav item; it
now lives inside Docs. Anti-patterns stays as its own top-level.
- scripts/build-sub-pages.js: replace renderSkillsSidebar and
renderTutorialsSidebar with a unified renderDocsSidebar that shows
every skill category followed by a Tutorials group. Takes a
current descriptor of shape { kind: 'skill'|'tutorial', id|slug }
so both skill detail and tutorial detail pages can mark the active
row. activeNav on every /skills/* and /tutorials/* page is now
'docs'; the shared site header's data-nav matches.
Verified: /skills/polish and /tutorials/getting-started both render
with the unified Docs sidebar (all 21 skills grouped by category +
both tutorials as a final group). The Docs nav item is aria-current
on both. Copy buttons appear on every fenced code block and toggle
to 'Copied' when clicked.
Feedback round from first review of the skill pages. Six concrete fixes:
1. Contain the auto-rendered SKILL.md in a distinct card.
The "skill itself" section was flowing straight into the editorial
wrapper above, making the two blocks read as one long mixed
document. Wrap the canonical body in .skill-source-card: white
paper background, mist border, rounded, with a small "SKILL.md"
badge header and an italic subtitle. Drop the old full-width
divider treatment; the card does the visual separation work.
2. Rewrite the /impeccable "do not fight the opinion" pitfall.
The old text said "fighting the opinion usually produces worse
output", which discouraged informed pushback. Replace with language
that explicitly encourages users with real reasons (brand guideline,
accessibility, user research) to push back; the skill raises the
floor, not overrules your judgment when you have evidence.
3. Move /onboard from create to refine.
Onboarding is refinement of empty states and first-run experiences,
not greenfield creation. Fixed in:
- scripts/lib/sub-pages-data.js SKILL_CATEGORIES
- public/js/data.js commandCategories
Both locations now list onboard under 'refine'.
4. De-dupe overdrive and animate.
- overdrive: "how it works" listed 7 techniques as bullets and then
"try it" listed 5 concrete examples using the same 7 techniques.
Collapse "how it works" into a tight paragraph and make "try it"
a specific scenario instead of a laundry list.
- animate: pitfalls repeated the "no layout properties" rule that
was already stated in "how it works". Drop the duplicate.
5. Remove outdated tutorial guidance.
getting-started.md said "Cursor needs Nightly channel plus Agent
Skills in Settings. Gemini CLI needs the preview version." Neither
is true anymore. Replace with a generic pointer to check the
harness's own skill docs.
6. Embed the live visual overlay in critique-with-overlay tutorial.
The tutorial now renders the same demo iframe the homepage uses
(/antipattern-examples/visual-mode-demo.html) inside step 2, with
a mac-window chrome frame that mirrors the homepage preview. New
.tutorial-embed CSS in sub-pages.css defines the header with
traffic-light dots + mono title, the iframe body (520px tall),
and an optional caption. The user now sees the overlay in action
before being asked to run it locally.
Sitemap previously listed only the landing page. Extend it to include
every canonical URL shipped in this IA expansion:
- 4 hand-authored pages (/, /cheatsheet, /gallery, /privacy)
- 3 section indexes (/skills, /anti-patterns, /tutorials)
- 21 skill detail pages (/skills/{id})
- 2 tutorial detail pages (/tutorials/getting-started, /tutorials/critique-with-overlay)
Priority ladder:
1.0 landing
0.9 section indexes
0.8 detail pages
0.7 utility pages (cheatsheet, gallery)
Note: privacy is intentionally not indexed (noindex meta) so it stays
out of the sitemap.
Smoke-tested all 31 live routes (29 pages + sitemap.xml + robots, not
the 2 that are noindex): all return 200.
Third and final new section. Adds the tutorials browser with two
hand-written walk-throughs: "Getting started" and "Critique with the
visual overlay". Same docs-browser shell as skills and anti-patterns.
- content/site/tutorials/getting-started.md
Five-minute install, teach, and first polish pass. Covers npx skills
add, answering the teach interview honestly, and running /polish on
an existing page. Includes common issues and what to try next.
- content/site/tutorials/critique-with-overlay.md
Ten-minute walk-through of the full /critique workflow with the
browser overlay. Covers the two-assessment model (LLM + detector),
the three ways to open the overlay (extension, inside critique, or
standalone via `npx impeccable live`), the fix-reload-verify loop,
and how to interpret merged reports.
- scripts/build-sub-pages.js
- renderTutorialsSidebar(): tutorial list with current-item marking
- renderTutorialsIndexMain(): card grid with mono order numbers,
italic display titles, taglines, arrow affordances
- renderTutorialDetail(): breadcrumb eyebrow, italic display title,
plain tagline, rendered markdown body inside .prose
- Wire both into the main generator loop.
- sub-pages-data.js already reads content/site/tutorials/*.md and
sorts by frontmatter.order, so no data-layer change was needed.
- public/css/sub-pages.css
- .tutorial-card grid (number, body, arrow) with hover border
darken + arrow slide. Mono order numbers, italic display titles.
- .tutorial-detail header with italic display title and plain sans
tagline (matching the visual rhythm of skill detail pages without
the mono command style since tutorials are prose, not commands).
Add the anti-patterns browser. Single page, same docs-browser shell as
the skills section, but the sidebar is a table of contents instead of
a navigation list.
- scripts/build-sub-pages.js
- groupRulesBySection(): bucket the 25 detection rules by skill
section (Visual Details, Typography, Color & Contrast, Layout &
Space, Motion) plus a 'General quality' bucket for the 7 rules
without a skillSection cross-reference. Each bucket sorts slop
rules first, then quality rules alphabetically.
- renderAntiPatternsSidebar(): TOC with anchor links to each
section, per-section rule count on the right, reusing the
.skills-sidebar styles with anti-patterns-specific tweaks for
the two-column item layout.
- renderRuleCard(): rule id + category badge + name + description
+ optional 'See in /impeccable' link that jumps to the right
anchor on the skill detail page.
- renderAntiPatternsMain(): editorial header ('25 detection rules')
+ 'How to read this' legend callout + six sections each with a
grid of rule cards.
- Wire the new page into the main generator loop.
- public/css/sub-pages.css
- .rule-card grid (auto-fill minmax 320px) with header row, mono
rule id, pill category badge, bold name, body description,
arrow skill link at the bottom.
- .rule-card-category variants: slop uses accent-dim background
with accent text, quality uses mist background with charcoal text.
- Section headers with baseline-aligned title and right-aligned
rule count, matching the rhythm of the /skills overview.
- Anti-patterns sidebar count styling (tabular-nums, ash).
Verified: /anti-patterns returns 200 with 25 rule cards rendered across
all six section anchors.
Final batch. Every user-invocable skill now has a hand-written editorial
wrapper. 21 of 21 done.
- clarify: rewrite confusing UX copy so interfaces explain themselves
- adapt: make designs work across screens and contexts without amputation
- normalize: pull drifted UI back into the design system
- optimize: diagnose and fix UI performance from LCP to bundle size
- onboard: first-run experiences, empty states, and paths to value
- overdrive: push interfaces past conventional limits (shaders, physics)
- extract: pull reusable components, tokens, and patterns into the system
Every wrapper follows the four-section template, keeps taglines tight,
and names the neighboring skill when the user is reaching for the wrong
tool (clarify -> delight when the copy is already clear, adapt -> harden
when responsive reveals edge cases, extract -> wait when the pattern
has fewer than three usages).
Second batch. Covers the seven skills that improve existing interfaces
along a single dimension at a time.
- typeset: fix generic typography (fonts, hierarchy, scale, readability)
- arrange: fix layout, spacing, and visual rhythm
- colorize: add strategic color to monochrome interfaces without slop
- animate: purposeful motion that conveys state, never decoration
- delight: small personality moments that turn functional into memorable
- bolder: push safe designs toward impact without sliding into loud
- quieter: tone down overstimulating designs while keeping their intent
Each wrapper keeps the four-section template (When to use it / How it
works / Try it / Pitfalls), stays concrete, flags the neighboring skill
when the user is reaching for the wrong tool, and calls out the explicit
anti-patterns each skill refuses to produce (bounces for animate, extra
colors for colorize, decoration for the rest).
First batch of hand-written editorial wrappers. Each wrapper lives at
content/site/skills/{id}.md and renders above the auto-generated SKILL.md
body on the skill detail page.
Shape follows the standard four-section template: When to use it / How
it works / Try it / Pitfalls. Plus a tagline in frontmatter that the
page template uses in place of the bare frontmatter description.
Shipped:
- impeccable: the foundation skill, why it exists, and when to call teach
- critique: the two-assessment design review with heuristic scoring
- audit: five-dimension technical quality check with P0-P3 severities
- polish: the meticulous final pass, what it covers, when not to run it
- shape: discovery interview that produces a design brief
- distill: ruthless subtraction, when it helps vs when to reach for arrange
- harden: edge cases, i18n, error states, production readiness
Tone: direct, opinionated, no hedging, no em dashes, concrete try-it
examples with expected output shapes. Next 14 wrappers ship in batches
2 and 3.
Three tightening passes based on visual feedback.
- Sidebar alignment. The skills layout now uses the same horizontal
padding clamp as the site header, so the sidebar column's left edge
sits under the brand logo above. Sidebar items drop their 10px left
padding and sit flush with the column edge; the 2px active-item
accent lives in a -2px margin so it hangs in the layout gutter
without pushing text right. Drop the max-width constraint so the
docs shell extends wall-to-wall on wide screens like a real docs site.
- Sidebar font. The command list was 0.8125rem which read too small
next to the sidebar group titles. Bump to 0.875rem and tighten the
vertical rhythm (4px vs 3px padding, group title margin-bottom 6px).
- Skill detail title. The title was set in mono at ~3rem and the
tagline in italic display, which inverted the visual weight (the
tagline felt heavier than the title). Rework to match the landing
page's .spread-command-name palette styling:
- Title: display serif, clamp(3rem, 5.5vw, 5rem), line-height 0.95
- Leading '/' split into <span class="skill-detail-title-slash">
and colored with --color-accent at weight 300 so it reads as a
quiet prefix glyph
- Tagline: body sans at 1-1.125rem, no italics, max-width 60ch
Builds on the /skills overview landing. Every skill detail page now lives
inside the same sticky-sidebar shell, with the active skill marked via
aria-current and pulled out of the list with a 2px accent border.
- scripts/build-sub-pages.js: detail pages now wrap the .skill-detail
body in wrapInDocsLayout() and pass currentSkillId into the sidebar
renderer so the active row is marked
- public/css/sub-pages.css sidebar pass:
- Narrow from 260px to 200px (was way too wide for the content)
- Drop the redundant "Skills" label at the top (it was visually
competing with the category titles); keep the node for a11y via
visually-hidden styling
- Group titles shrink to 0.625rem mono uppercase in --color-ash so
they read as quiet signposts, not headings
- Tighten item line-height to 1.5 and vertical padding to 3px
- Replace the box-shadow inset accent with a border-left accent on
the active item, leaving it visually pulled left
- Simplify .skill-detail sizing so it works inside .skills-main
without its own max-width / padding
- Ban em dashes in user-facing copy everywhere:
- Rewrite 9 copy lines in index.html, 2 title tags in gallery.html,
inline category descriptions, the /skills overview lede + how-to,
two skills-generator comments, one aria-label, and the page titles
for Skills and skill detail pages
- New validateNoEmDashes step in scripts/build.js scans content/site,
public/*.html, and the sub-page generator sources. Build fails on
any — or — in user-facing copy. Uses commas, colons, periods,
or parentheses instead
Build green: all 26 HTML entrypoints bundle cleanly, all four hand-authored
pages retain the shared site header, anti-pattern rules still match
SKILL.md, zero em dashes.
The old /skills was one long scrollable list. Replace it with a proper
app-shell layout: sticky left sidebar with every skill grouped by
category, main column on the right with an orientation piece (intro
+ 'how to pick one' callout + category sections with chip lists).
- scripts/build-sub-pages.js
- renderSkillsSidebar(): the sticky left rail used across the /skills
section. Takes an optional currentSkillId so we can mark the active
skill with aria-current when detail pages adopt the same shell in a
later commit
- renderSkillsOverviewMain(): the right column. Editorial header,
'how to pick one' callout that inlines 5 hot-link skill references,
then one block per category (title, count, description, chip row
of all skills in that category)
- wrapInDocsLayout(): tiny helper that pastes the sidebar and main
into a .skills-layout grid
- public/css/sub-pages.css
- Copy .skip-link a11y styles over from main.css so the 'Skip to
content' link is properly hidden until keyboard focus (was showing
unstyled at the top-left of every generated page)
- Add .skills-layout grid shell (260px sidebar + flex main column,
max-width 1400px, clamp-based horizontal padding)
- Add sticky .skills-sidebar with its own scroll-y overflow and a
thin scrollbar; group titles + mono link list; aria-current styling
with a 2px left accent bar
- Add .skills-overview-howto callout, category sections with chip
rows, and mobile collapse (sidebar becomes an inline block above
the main column at <=920px)
- Introduce --site-header-height and --skills-sidebar-width tokens
No detail page layout changes in this commit — those still use the
single-column .skill-detail shell.
Ships the first new sub-page section. Every user-invocable skill now has
its own page at /skills/{id}, with the canonical SKILL.md body rendered
via marked. The index at /skills lists all 21 skills grouped by category.
Editorial wrappers are opt-in: if content/site/skills/{id}.md exists, it
renders above the canonical body (with a "The skill itself" divider).
All 21 pages currently ship with the auto-rendered body only; hand-written
wrappers land in the next few commits.
- scripts/lib/sub-pages-data.js: builds the data model. Reuses
readSourceFiles() from lib/utils.js for skill content; parses the
ANTIPATTERNS array out of src/detect-antipatterns.mjs; reads optional
editorial wrappers from content/site/skills/*.md; validates that every
user-invocable skill has a category entry (build fails loudly if not).
- scripts/build-sub-pages.js: orchestrator. Writes generated HTML into
public/skills/*.html (gitignored). Called from both scripts/build.js
(before buildStaticSite) and server/index.js (at module load) so dev
and prod share the same generation code path.
- scripts/lib/render-page.js: new assetDepth parameter so generated
pages one level deep under public/ use relative paths (../favicon.svg,
../css/sub-pages.css) that Bun's HTML loader can resolve on disk.
- scripts/build.js: pass generated files into Bun.build entrypoints;
post-process to flatten build/public/* → build/* (Bun preserves the
public/ prefix when entrypoints span multiple depths).
- server/index.js: generateSubPages() runs at module load; new routes
/skills, /skills/:id, /anti-patterns, /tutorials, /tutorials/:slug
serve the pre-generated files via Bun.file().
- public/css/sub-pages.css: adds sub-page layout shell, skills index
grouped-list styling, skill detail header/meta chips/divider, collapsed
<details> reference sections, and a .prose block for rendered markdown
with editorial typography, code blocks, and inline code.
Verified: bun run build produces 26 HTML files (4 hand-authored + 22
generated), all flat under build/. Dev server returns 200 on /skills,
/skills/polish, /skills/impeccable, /skills/critique. Tests pass.
- Kill double underlines on nav items and brand: scope '.site-header a
{ text-decoration: none }' more specifically so the page-level 'a'
rule in main.css can't bleed through
- Add an inline SVG logo mark next to the 'Impeccable' wordmark (reuses
the favicon.svg glyph, inlined so Bun's HTML loader doesn't try to
bundle '/favicon.svg' from a non-relative path)
- Add a subtle GitHub star pill (icon + 17k + small star) at the far
right of the header; replaces the bare 'GitHub' nav text link
- Remove the duplicate .github-link floater from the hero on the landing
page; the header pill is the single place for the stars signal now
- Mobile: stop nav items from wrapping mid-word; lower the breakpoint
to 820px; enable horizontal scroll with a mask fade on the right;
hide the 'Home' link on mobile (the brand is already the home link);
hide the brand wordmark below 480px (logo glyph alone); hide the 17k
label inside the github pill on mobile (keep the icon + star)
The Visual Details DON'T entry in source/skills/impeccable/SKILL.md
was rewritten to cover border-left/border-right specifically ('colored
accent stripe') and no longer contains the old 'thick colored border
on one side' substring. Update the side-tab and border-accent-on-rounded
rules so the build-time validator passes again.
- Regenerate src/detect-antipatterns-browser.js via bun run build:browser
Every hand-authored HTML page now carries the same sticky top nav:
Home / Skills / Anti-Patterns / Tutorials / Gallery / GitHub. The three
future sections (skills, anti-patterns, tutorials) will land behind
these links in subsequent commits.
- Add <header class="site-header"> with a <!-- site-header v1 --> marker
to index, cheatsheet, gallery, privacy
- Each page links public/css/sub-pages.css so it picks up the shared
header styling (sticky, backdrop blur, accent-underlined current item)
- Gallery: drop the inline .site-header/.header-brand/.header-nav
definitions that predate the shared component (class names conflicted)
- Cheatsheet: restructure the page title into .cheatsheet-page-header
so it doesn't collide with the new <header class="site-header">; move
the page container max-width/padding off <body> onto .cheatsheet-page-header,
main, and footer so the shared sticky header spans the full viewport
- Privacy: full styling refresh using sub-pages.css tokens + a small
inline block for the page body typography
- Add a validateSiteHeader step to scripts/build.js that fails the build
if any of the four pages drops the marker
- Add /privacy route to server/index.js so extensionless URLs work
All four built pages pass the marker check; dev server serves all four
with 200 and the shared header.
Groundwork for new /skills, /anti-patterns, /tutorials sections.
No user-visible changes yet — this is pure plumbing.
- Split main.css into tokens.css (design tokens + reset, ~100 lines) and
main.css (everything else, imports tokens.css). Lets sub-pages import
only tokens without pulling in the landing-page component CSS.
- Add marked as a dependency.
- Add scripts/lib/render-markdown.js: marked wrapper with a custom link
resolver (skill slugs, reference/*.md anchors, external rel=noopener),
stable heading slugger, and terminal-style code blocks.
- Add scripts/lib/render-page.js: page shell wrapper that injects the
shared site header partial with aria-current marking.
- Add content/site/partials/header.html: shared site header with nav
(Home / Skills / Anti-Patterns / Tutorials / Gallery / GitHub).
- Add public/css/sub-pages.css: shared styles for generated pages, with
.site-header styling (sticky, backdrop blur, accent-underlined active
nav item) and mobile collapse.
Build still produces the same 104 KB landing-page CSS chunk; tests pass.
Tailwind was wired into the build but the project didn't actually use it:
no @tailwind/@theme/@apply directives in source CSS, no utility classes
in any HTML or JS, no tailwindcss dependency in package.json, and no
HTML page linked to the compiled styles.css output.
Bun's HTML loader already handles main.css's @import chain transparently
in both `bun run dev` and `bun run build`. Removing the Tailwind step:
- Deletes buildTailwindCSS() from scripts/build.js (and the now-unused
execSync import)
- Removes public/css/styles.css (dead compiled output that nothing read)
- Updates CLAUDE.md to drop the "must rebuild Tailwind after CSS edits"
instruction
Verified: `bun run build` produces the same 104 KB CSS chunk linked from
index.html via Bun's HTML loader. No more rebuild step after CSS edits.
- Fix isNeutralColor to handle oklch, oklab, lch, lab, hsl, and hwb
with format-specific chroma/saturation thresholds. jsdom returns
these formats literally, so the previous rgb-only regex caused every
modern-format border color to be silently treated as neutral and
skipped by checkBorders.
- Flip the unknown-format fallback from neutral to colored, so
unrecognized color strings err on the side of detection.
- Introduce a narrower BORDER_SAFE_TAGS set (SAFE_TAGS minus 'label')
used only by the border checks. Card-shaped clickable labels with
thick colored side borders are now detected, while colors, motion,
and nested-card checks continue to skip labels to avoid false
positives on real form labels.
- Add tests/fixtures/antipatterns/modern-color-borders.html with 8
flag cases (oklch x3, oklab, lch, lab, plus 2 label cards) and
10 pass cases (neutrals across formats, plain inline labels,
thin/neutral-bordered labels, colored-on-all-sides).
Reproducer (preop-portal demo): side-tab findings rise from 0 to 12.
- Restructure install section into a split primary card with the
recommended path on the left and other install methods on the right
- Drop the prefix toggle UI; bundle name is now baked into data-bundle
- Balance the Stay updated step as paired Substack iframe + X follow card
with matching height, border, and treatment
- Pair Changelog and FAQ side-by-side on desktop with a centered divider
and shared border-top; section nav highlights both when in view
- Tone down the Visual Mode demo by removing side-tab borders, stacked
card icons, and tiny body text so the overlay reads cleanly
- Refine the Chrome extension callout: drop the pill badge, use an
editorial eyebrow above the title, enlarge the thumbnail
- Exclude private evals/ directory from version control
The Visual Mode section had three competing cards in the right column
(25 deterministic checks, Three ways to use it, Get the Chrome extension)
all wrapped in bordered/backgrounded containers. The live detection
overlay iframe on the left is the visual anchor for the section — the
right column should be quieter editorial blocks, not three cards
fighting for attention.
Layout changes
- Strip card chrome from .visual-mode-feature: no padding, background,
or border-radius. Just an eyebrow label + paragraph in editorial flow.
- Strip card chrome from .detection-callout: no padding, background,
border, border-radius, or hover-transform theatrics.
- Bump .visual-mode-details gap from spacing-md to spacing-xl so the
three blocks breathe with editorial space instead of feeling stacked.
- Bump body text from 0.8125rem to 0.9375rem for readability without
the card padding.
Extension callout
- Add extension-detection.png — a tight 600×508 crop of the Chrome
extension's DevTools panel showing detected anti-patterns ("AI color
palette", "Overused font", "Quality issues", "Low contrast text").
Reads at thumbnail size and clearly shows the extension UI in action.
- Whole callout is a single anchor (entire row clickable).
- 88×88 image thumbnail on the left with a subtle border that shifts
to accent on hover.
- NEW eyebrow stacked above the "Get the Chrome extension →" CTA, both
left-aligned next to the thumbnail.
The result: the iframe carries the visual weight, the right column
becomes a quiet editorial sidebar, and the extension CTA gets just
enough visual punch (the thumbnail) without competing with the demo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Emojis render as multicolor glyphs regardless of CSS \`color\`, so the
text color is irrelevant for contrast calculations. The detector was
flagging emoji icons as low-contrast whenever the surrounding bg/text
colors were close (e.g. an emoji card with text-color set to match
the bg). Adds an isEmojiOnlyText() helper that returns true when the
direct text consists entirely of emoji characters (and zero-width
joiners, variation selectors, skin-tone modifiers, regional
indicators), and skips both gray-on-color and low-contrast checks
when it's true.
Same insight fixes a missed icon-tile-stack detection: many AI-
generated cards use \`<div class="card-icon">⚡</div>\` where the
tile contains the emoji directly as text, not an <svg>/<i> child.
The detector now also recognizes these "inline emoji icon" tiles.
Both fixes are TDD'd: new test cases in color.html (two emoji cards
with matching text/bg colors) and icon-tile-stack.html (the inline
emoji tile pattern). The test suite went from green → red → green
across both rules.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The CLI command `npx impeccable detect src/` was promoted in the
"New!" callout but it scans static source files — that's a separate
feature, not visual mode. Replaces it with a "Get the Chrome
extension" CTA which is the actual way users get visual mode in
their browser.
Also updates the lead text to drop the /critique-specific framing
and reframes the second feature blurb to mention all three usage
modes (Chrome extension, /critique embed, npx impeccable live).
The .detection-cmd class is restyled from a code-block-with-arrow
to a proper link/button with hover state, since it's now a CTA
rather than a shell prompt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The .mobile-commands-layout was rendering at ~2400px wide on mobile,
blowing out the entire .language-section to 2457px and causing the
section-lead text, the periodic table area, and everything else to
overflow the viewport horizontally.
Root cause: grid and flex items default to min-width: auto, which
lets them expand to fit any intrinsically wide descendant. The mobile
commands layout contains a .split-container (the demo split-compare
component) whose intrinsic content is ~2400px wide. That width
propagated up the parent chain — through .mobile-commands-layout
→ .commands-gallery → .commands-subsection → .language-content grid
track — and stretched the entire section.
Fix: cascade min-width: 0 through every descendant of the section so
the constraint stops the propagation at every layer.
.language-section,
.language-section * {
min-width: 0;
}
Verified at 390×844 (mobile): bodyScroll matches viewport, zero
overflowing elements, the line-length detector finding on
.mobile-cmd-desc is gone. Verified at 1280×800 (desktop): periodic
table and magazine layout still render at full content width with
no regression.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The previous footer split into two tiers with four different
interactive styles (plain underlined links, accent inline links,
round icon buttons, and pill CTAs with arrows). The hierarchy was
inverted — the loudest elements (Blog and Newsletter pills) were
secondary author plugs, while the actual primary nav was buried
as quiet underlined text.
Collapse to a single horizontal row with three groups:
- Impeccable wordmark anchored left
- 6 nav links centered in the middle column (auto / 1fr / auto grid)
- "Created by Paul Bakaus" + X + LinkedIn icons anchored right
Removed:
- Blog and Newsletter pill buttons
- Two vertical dividers between author elements
- Horizontal divider between the two former tiers
- The 36×36 round social-button background fill on hover
- Persistent underlines on all footer links
Interactive styles consolidated from 4 down to 2: plain text links
(nav + author credit) and inline icon links (socials). Both use the
same color → accent hover transition.
Mobile breakpoint reworked to stack the three groups in a single
centered column at 900px and below.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Hero demo card no longer uses <h3> for its title, fixing the
h1 → h3 skip in the document outline. The "after" card now uses
<p class="impeccable-title"> matching the structure of the
corresponding "before" slop-card (which already used a <div>).
- Constrains .changelog-items and .faq-answer to max-width: 70ch so
long bullet points and FAQ paragraphs don't exceed comfortable
reading length (was hitting ~135 chars/line).
- Bumps the destructive-action warning text in the /clarify command
demo from #a16207 to #854d0e on #fef3c7, lifting the contrast from
4.4:1 (just below WCAG AA) to ~6.4:1.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Overused-font check now measures actual computed-style usage across
text-bearing DOM elements instead of scanning CSS rules. A font is
only flagged as "primary" when it's used by ≥15% of text elements,
so demo/example classes that exist in the stylesheet but apply to
one tiny element no longer trigger false positives. The detail
message also includes the actual usage percentage.
- Same approach for the single-font check.
- Skipped-heading detail now includes the heading text on both sides
of the skip (e.g. <h1> "Title" followed by <h3> "Subtitle"), making
the offending element trivial to locate.
- Removes the 26-character truncation in TYPE_LABELS that cut long
anti-pattern names mid-word in overlay labels.
- Selector generator now uses class names + tag names and stops
walking up the DOM as soon as the partial selector uniquely matches
the target. Filters out CSS-in-JS hashed class names. Replaces ugly
6-level :nth-child chains with readable selectors like
`code.detection-cmd` or `#section > div > .card`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The old rule used a fixed 8px floor on minPad, which produced false
positives on small inline pills (like the homepage's .detection-cmd
at 6px vertical / 14px horizontal on 13px font) and false negatives
on large text (a 24px heading with 8px padding all around passed
the floor but is genuinely too tight for the text size).
The new rule uses two independent axis thresholds that scale with
font-size:
vertical: max(4px, fontSize × 0.3)
horizontal: max(8px, fontSize × 0.5)
The asymmetry reflects typographic reality: line-height already
provides built-in vertical breathing room (the line box is taller
than the cap height), so vertical padding can be tighter than
horizontal. Both thresholds scale with font-size — bigger text
demands proportionally more padding.
Behavior changes
- Small inline pills with line-height-aware padding now pass
(.detection-cmd: V 6 ≥ 4, H 14 ≥ 8). The homepage CSS is unchanged.
- Cramped large text now flags (24px heading with 8px padding fails
H 8 < 12). The old rule missed this entirely.
- All original 8px-floor flag cases still flag — 4px on 14px text
is still 4 < 4.2 vertical, 2px is still cramped, etc.
- Snippet now indicates which axis failed and the specific threshold
for the font-size: "6px vertical padding (need ≥4.8px for 16px text)"
instead of the old "6px padding (need >=8px)".
Fixture
- tests/fixtures/antipatterns/cramped-padding.html is a new
comprehensive side-by-side fixture with 8 flag cases and 12 pass
cases spanning small pills, cards, code blocks, interactive
elements, and big text. Replaces the prior 3-case version.
Test
- tests/detect-antipatterns-browser.test.mjs asserts exactly 8
cramped-padding findings with detailed comments listing each
expected case and which axis fails.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Renames "Page:" to "URL:" in both single and multi-finding copy formats
- Strips URL fragment so the page identifier isn't an in-page anchor
- Prefixes suggested skills with a slash (e.g. /arrange, /polish) so
they're recognizable as Impeccable slash commands
- In multi-finding output, rolls up all suggested skills into a single
deduplicated, frequency-sorted footer line instead of repeating the
same skill on every finding
- Drops "Please fix this" prescriptive footer in favor of a neutral
"Skills are suggestions, not required" note
- Compacts each multi-finding line to single-line format
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The quality detection rules (line-length, cramped-padding, tight-leading,
tiny-text, justified-text, all-caps-body, wide-tracking, skipped-heading)
were originally added as browser-only and wired only into the overlay
loop. The CLI's jsdom path silently skipped all of them.
Two of the eight rules genuinely need real browser layout
(line-length reads rect.width for chars-per-line; cramped-padding reads
rect.width/height to filter small badges). The other six only need
computed CSS values and pure DOM walks — they can run in jsdom too.
Refactor
- Extract a pure checkQuality(opts) from checkElementQualityDOM, taking
pre-resolved lineHeightPx and letterSpacingPx so each adapter handles
its own unit resolution.
- Add resolveFontSizePx(el, win) — walks the parent chain to compute
effective font-size in pixels, handling px / rem / em / % through
inheritance. Browsers do this automatically in getComputedStyle, but
jsdom returns "0.875rem" verbatim, which broke naive parseFloat math.
- Add resolveLengthPx(value, fontSizePx) — generic CSS length → px
helper used for line-height and letter-spacing in the Node adapter.
- Extract checkPageQualityFromDoc(doc) and add a Node call site so
skipped-heading fires from the CLI too.
- Add checkElementQuality(el, style, tag, window) Node adapter and wire
it into detectHtml's element loop.
Tests
- New tests/detect-antipatterns-browser.test.mjs — Puppeteer-backed
runner that spins up a temporary static server (port 8765, mirrors
the dev server's /fixtures/* and /js/* routes) and uses detectUrl()
to load fixtures in headless Chrome. Asserts the two browser-only
rules (cramped-padding, line-length) that need real layout.
- New tests/fixtures/antipatterns/cramped-padding.html — focused
side-by-side fixture for the cramped-padding rule. Pass column
includes a faithful replica of .detection-cmd from the homepage
(the disputed "small inline pill" case the user is deciding what
to do with). Test asserts 3 findings: 2 from the obvious flag
column + 1 from the disputed pill.
- New tests/fixtures/antipatterns/quality.html — merged side-by-side
replacement for the orphaned quality-should-flag/pass.html files.
Covers all 7 typography-quality rules. The 6 jsdom-compatible rules
are asserted in the jsdom test; line-length stays in the Puppeteer
test.
- Delete the orphaned quality-should-flag.html / quality-should-pass.html.
- Wire the new browser test into bun run test (~2.6s overhead).
Coverage win: the CLI now catches tight-leading, tiny-text,
justified-text, all-caps-body, wide-tracking, and skipped-heading on
real projects, where it previously missed all six.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Each problem-space fixture is now a single file with two columns: left
for cases that should flag, right for cases that should not. Matches the
icon-tile-stack convention and makes browser-based visual review easier.
The pass column proves that no false positives leak from look-alike
patterns next to the real anti-patterns.
Merged (4 pairs → 4 files)
- color-should-{flag,pass}.html → color.html
- motion-should-{flag,pass}.html → motion.html
- glow-should-{flag,pass}.html → glow.html
- layout-should-{flag,pass}.html → layout.html
Left untouched
- should-{flag,pass}.html — used by the CLI smoke tests in
detect-antipatterns.test.js, which need a known-clean fixture for the
exit-code-0 path.
- typography-should-{flag,pass}.html — all three typography rules
(overused-font, single-font, flat-type-hierarchy) are page-level and
fundamentally can't share a page with their pass cases. Loading two
font stacks suppresses single-font; varied sizes suppress flat-type-
hierarchy. Documented in the test file.
Test calibration
- Hardcoded the jsdom finding counts (motion: 2 bounce + 2 layout-
transition; glow: 1 dark-glow). Real browser sees more because
jsdom doesn't fully apply class-based styles, but the pass-column
count is reliably 0. Browser-verified all 4 fixtures show expected
flag counts and zero pass-column false positives.
Fixture chrome fixes
- Sub-section labels (.col h3) now use #64748b instead of #94a3b8 so
the fixture's own UI doesn't trigger low-contrast. glow.html got a
CSS restructure into card-dark/card-light/card-medium variants so
every text/background pairing meets WCAG AA. layout.html's "card
with image" gradient changed from blue→purple to amber→rose so it
doesn't trip ai-color-palette.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Removes the 26-character truncation in TYPE_LABELS that cut off long
anti-pattern names mid-word (e.g. "icon tile stacked above heading"
became "icon tile stacked above he"). The label is sized by content
via white-space: nowrap so it grows to fit, and multi-finding overlays
that exceed the outline width already fall back to the cycling UI.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
A new icon-tile-stack detection (the canonical AI feature-card with a
small rounded-square icon container above a heading), backed by a
two-column TDD fixture, plus a single-source-of-truth design that ties
the engine to the impeccable skill so they can no longer drift silently.
Detection
- New icon-tile-stack rule (slop): heading's previousElementSibling is
a 32–128px rounded-square element with a non-transparent background
or border, contains an svg/icon-i child, and sits above (not next to)
the heading. Excludes round avatars, wide thumbnails, side-by-side
layouts, tiny icons, and hero images.
- Two-column fixture convention: a single icon-tile-stack.html with a
flag column (4 cases) and pass column (6 cases), with snippet-text
matching used by the fixture test.
Single source of truth
- Each ANTIPATTERNS entry can now declare skillSection + skillGuideline.
18 of 25 rules carry these fields; the build's new
validateAntipatternRules() in scripts/build.js fails if any declared
skillGuideline isn't found verbatim in the right SKILL.md section.
- scripts/build-extension.js now includes the description field in
extension/detector/antipatterns.json (it was previously dropped).
- The existing count validator was promoted from warn to error so
command count drift fails the build the same way detection drift does.
Impeccable skill DON'Ts
- Added 4 new top-level DON'Ts that target real default AI behavior:
single-font, flat-type-hierarchy, all-caps-body, line-length.
- Cut 7 new DON'Ts I had drafted (tight-leading, tiny-text, wide-tracking,
justified-text, low-contrast, cramped-padding, skipped-heading) because
they teach things every model already knows from CSS/a11y basics. The
detector still catches all of them.
Stale count cleanup
- 22 commands → 21 across 17 references in HTML, README, NOTICE, AGENTS,
plugin.json, marketplace.json (left over from the validate skill removal).
- Dropped the hand-coded "212 design guidelines" marketing copy on the
homepage, which never mapped to any real count.
Sub-agent
- New private .claude/agents/anti-patterns.md captures the full TDD
recipe, schema, plug-in points, jsdom constraints, and pre-commit
checklist so future sessions can add rules end-to-end without
re-investigating the wiring.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds the three /impeccable usage modes (freeform, teach, craft) to the
command demo, with a clearer multi-pane layout. Also tightens the
commands grid spacing on the site and refreshes the framework viz and
glass terminal styles for consistency.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Updates the per-provider built skill files (.agents/, .claude/, .codex/,
.cursor/, .gemini/, .kiro/, .opencode/, .pi/, .rovodev/, .trae-cn/, .trae/)
to reflect the source removal of the /validate skill: deletes the
validate/SKILL.md output across all providers, drops /validate from the
command lists in audit and critique, and updates the impeccable craft
reference.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Previously checkColors bailed out whenever an ancestor used a gradient
background, since resolveBackground returned null. As a result, gray or
low-contrast text inside any gradient container was completely invisible
to both rules — e.g. the gray heading on bad-contrast.html.
Add a resolveGradientStops fallback that walks parents for gradient
stops and runs contrast against the worst-case stop, plus gray-on-color
when every stop is chromatic. parseGradientColors now also accepts hex
so jsdom fixtures with raw inline gradients work too. Extended the
color-should-flag fixture and tests to cover the gradient case.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Refactors the extension for on-demand injection (no static content_scripts
entry — content script and detector are loaded only when the user actively
opens the Impeccable panel, sidebar pane, or popup). Adds a new "Auto-scan"
preference (default: scan when the Impeccable panel opens, opt-in: scan
when DevTools opens) plus configurable line length (strict/lax) and
highlight blur on/off settings. Adds an Elements panel sidebar that shows
findings for the currently selected element.
Includes substantial overlay UX work: page-pixel-perfect spotlight mask
via clip-path, refined hover/dim states, instant transitions for snappier
feel, copy buttons for findings, hover-from-panel highlighting, and a
brand-aware exception list so the font check no longer flags Roboto on
Google's own properties.
Robustness fixes for the MV3 service worker lifecycle: heartbeat keepalive
plus auto-reconnecting ports across panel/sidebar/devtools so transient
SW restarts don't break the panel UI, and immediate teardown on DevTools
close (replacing an unreliable setTimeout-based defer that didn't survive
SW termination).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds a Manifest V3 Chrome extension that injects the detector when
DevTools opens, with a dedicated panel for browsing findings, a toolbar
popup for quick scan/toggle, and per-rule settings synced via
chrome.storage. Categorizes anti-patterns into AI slop vs quality
issues with visual differentiation (sparkle prefix, panel grouping).
Overlay labels are polished with flush positioning, cycling for
multi-finding elements, and synchronized hover darkening.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove redundant "Commands in Action" heading, replace with subtle hint
- Fix double spacing between section lead and periodic table
- Tighten grid gaps for more cohesive layout
- Update GitHub star count from 13.3k to 16k
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace freelance "Work with me" with "Work with us" for Renaissance Geek
- Update contact email to paul@renaissance-geek.ai
- Simplify FAQ: everything is Apache 2.0
- Remove terminal license labels and tip button
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Merges the impeccable-detect CLI repo (pbakaus/impeccable-cli@831a6cc)
into this repo. The BSL-1.1 license that motivated the split is gone;
everything is now Apache 2.0.
- Add bin/, src/, detection tests and fixtures from CLI repo
- Merge package.json: name → "impeccable", add bin/exports/files fields
- Internal refs now read from local src/ instead of node_modules/
- Update SPDX headers, NOTICE.md, CLAUDE.md, FAQ, npm README
- Add prepack/postpack scripts for CLI-focused README on npm
- Remove terminal license labels (no longer needed)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Paul Bakaus
