Commit Graph
368 Commits
Author SHA1 Message Date
Paul Bakaus 7847daffff Generate /skills index + 21 auto-rendered skill detail pages
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.
2026-04-08 09:16:19 -07:00
Paul Bakaus c4dc0feb23 Polish the site header based on user feedback
- 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)
2026-04-08 09:03:13 -07:00
Paul Bakaus 21a8c58044 Update side-tab skillGuideline to match refreshed SKILL.md text
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
2026-04-08 09:02:58 -07:00
Paul Bakaus c598a63498 Add shared site header across all pages
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.
2026-04-08 08:09:41 -07:00
Paul Bakaus 54b687d16f Add sub-page render pipeline foundation
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.
2026-04-08 08:01:34 -07:00
Paul Bakaus 038d281247 Drop Tailwind CLI from the build
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.
2026-04-07 19:52:27 -07:00
Paul Bakaus 30d1e06a75 Detect side-tab borders on modern color formats and label cards
- 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.
2026-04-07 19:35:33 -07:00
Paul Bakaus d85efab51f Refine homepage layout: install, Stay updated, Changelog/FAQ, Visual Mode
- 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
2026-04-07 18:37:08 -07:00
Paul BakausandClaude Opus 4.6 d63855341a Restructure Visual Mode right column as editorial blocks, add extension thumbnail
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>
2026-04-07 09:46:43 -07:00
Paul BakausandClaude Opus 4.6 06ef4f3c14 Handle emoji-only text in contrast and icon-tile detection
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>
2026-04-07 01:38:11 -07:00
Paul BakausandClaude Opus 4.6 89f4ec41d7 Refocus Visual Mode section on the Chrome extension
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>
2026-04-07 01:37:54 -07:00
Paul BakausandClaude Opus 4.6 b54c46cac7 Fix mobile horizontal overflow on the Language section
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>
2026-04-07 01:21:06 -07:00
Paul BakausandClaude Opus 4.6 0d59981499 Simplify homepage footer to a single editorial row
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>
2026-04-07 01:09:02 -07:00
Paul BakausandClaude Opus 4.6 0566a60dfa Fix anti-patterns flagged by Impeccable on the homepage
- 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>
2026-04-07 00:59:31 -07:00
Paul BakausandClaude Opus 4.6 e0090266fc Improve detector accuracy and finding quality
- 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>
2026-04-07 00:59:20 -07:00
Paul BakausandClaude Opus 4.6 3569085cea Make cramped-padding rule asymmetric and proportional to font-size
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>
2026-04-07 00:26:44 -07:00
Paul BakausandClaude Opus 4.6 092e4a9e4f Improve copy output: URL, slash-prefixed skills, rollup, no fragment
- 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>
2026-04-07 00:21:36 -07:00
Paul BakausandClaude Opus 4.6 5bc5ece1ab Wire quality rules into the CLI and add Puppeteer fixture tests
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>
2026-04-07 00:07:34 -07:00
Paul BakausandClaude Opus 4.6 8b93dfad5e Merge color/motion/glow/layout fixture pairs into side-by-side files
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>
2026-04-06 23:31:29 -07:00
Paul BakausandClaude Opus 4.6 45e68519a4 Show full anti-pattern names in overlay labels
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>
2026-04-06 23:29:44 -07:00
Paul BakausandClaude Opus 4.6 e1032b7285 Add icon-tile-stack rule and cross-validate engine against skill
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>
2026-04-06 22:58:13 -07:00
Paul BakausandClaude Opus 4.6 83330a66cb Update commands grid layout and impeccable command demo
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>
2026-04-06 21:34:56 -07:00
Paul BakausandClaude Opus 4.6 bb4de8ed9b Sync built skill outputs after validate skill removal
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>
2026-04-06 21:34:37 -07:00
Paul BakausandClaude Opus 4.6 b391485e16 Detect low-contrast and gray text over gradient backgrounds
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>
2026-04-06 21:33:50 -07:00
Paul BakausandClaude Opus 4.6 13b2f763d9 Polish Chrome extension for Web Store submission
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>
2026-04-06 21:06:09 -07:00
Paul BakausandClaude Opus 4.6 e961d56252 Add Chrome DevTools extension for anti-pattern detection
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>
2026-04-06 15:18:36 -07:00
Paul BakausandClaude Opus 4.6 9ccdb9148a Reorganize periodic table, remove validate skill
New categories that distinguish create-new vs improve-existing:
- Create: shape, impeccable craft, impeccable, onboard, overdrive
- Evaluate: critique, audit
- Refine: typeset, arrange, colorize, animate, delight, bolder, quieter
- Simplify: distill, clarify, adapt
- Harden: normalize, polish, optimize, harden
- System: impeccable teach, extract

Also: remove Dt (detect CLI) from table, remove validate skill,
split /impeccable into its sub-commands (craft, teach).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 18:05:47 -07:00
Paul BakausandClaude Opus 4.6 7154b4d080 Tighten The Language section, update star count to 16k
- 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>
2026-04-05 17:34:31 -07:00
Paul BakausandClaude Opus 4.6 6ec6d97c9a Update partnerships section for Renaissance Geek, unify licensing to Apache 2.0
- 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>
2026-04-05 17:12:30 -07:00
Paul BakausandClaude Opus 4.6 3ca60a8f76 Remove stale package-lock.json (project uses bun.lock)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 16:51:26 -07:00
Paul BakausandClaude Opus 4.6 3c9cc86061 Merge CLI into main repo, switch everything to Apache 2.0
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>
2026-04-05 16:50:33 -07:00
Paul BakausandClaude Opus 4.6 6c6b7fcc95 Add license labels to Get Started terminal headers
Shows "Apache 2.0" and "BSL-1.1 · Free for individuals and small teams"
right-aligned in the glass terminal title bars.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:27:36 -07:00
Paul BakausandClaude Opus 4.6 f9b78b1957 Replace spring bounce with ease-out-quint on foundation cards
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:18:14 -07:00
Paul BakausandClaude Opus 4.6 8531503f2c Rename /craft to /shape, add /impeccable craft, remove "--" pattern
- Rename /craft skill to /shape and make it planning-only (no code output)
- Add /impeccable craft sub-command that calls /shape, loads references,
  builds with visual iteration until delightful
- Replace all " -- " (em dash substitutes) with proper punctuation across
  all skill files and index.html
- Move v1.6 changelog entry to "View older releases" section

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 20:07:02 -07:00
Paul BakausandClaude Opus 4.6 ef871725c5 Remove /validate from v2.0 changelog (not ready yet)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:23:51 -07:00
Paul BakausandClaude Opus 4.6 6ff1333f08 Add /craft and /validate to v2.0 changelog
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:21:54 -07:00
Paul BakausandClaude Opus 4.6 2eb7674d0c Tighten v2.0 changelog: single CLI bullet, highlight critique browser overlay
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:16:23 -07:00
Paul BakausandClaude Opus 4.6 f2a40ba4c6 Fix changelog: scoring/personas were v1.6, not v2.0
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:14:58 -07:00
Paul BakausandClaude Opus 4.6 e18ee529f3 Clean up FAQ and consolidate changelog into single v2.0 entry
Simplify the licensing FAQ (no more CLI-calls-engine indirection).
Merge v2.0.0 and v2.0.6 changelog entries into one v2.0 release note
covering the full detection engine, CLI, framework support, and critique
overhaul.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:14:06 -07:00
Paul BakausandClaude Opus 4.6 c8d654a71a Align all version references to 2.0.6, update repo URLs to impeccable-cli
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:08:45 -07:00
Paul BakausandClaude Opus 4.6 824a04b109 Version 2.0.6
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 19:00:32 -07:00
Paul BakausandClaude Opus 4.6 d8d5b8acd8 Move CLI to separate repo, make this skills-only (Apache 2.0)
The CLI and detection engine now live in pbakaus/impeccable-detect
(published as 'impeccable' on npm, BSL-1.1). This repo is purely
Apache 2.0: skills, prompts, website, and build system.

- Remove bin/ (CLI moved to CLI repo)
- Remove README.npm.md (moved to CLI repo)
- Remove @impeccable/detect dependency, add impeccable dependency
- Set package.json to private (no longer published to npm)
- Update all references from @impeccable/detect to impeccable
- Update CLAUDE.md, NOTICE.md, FAQ, and changelog
- Rebuild all provider skill distributions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 18:59:19 -07:00
Paul BakausandClaude Opus 4.6 077e1a7b2b Update @impeccable/detect to 2.0.5 (live stop support)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 18:40:17 -07:00
Paul BakausandClaude Opus 4.6 87243ca35c Update critique skill to use live stop instead of kill/lsof
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 18:33:10 -07:00
Paul BakausandClaude Opus 4.6 76f61af87f Add licensing FAQ entry explaining BSL/Apache split
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 17:03:31 -07:00
Paul BakausandClaude Opus 4.6 62a6472348 Bump all version references to 2.0.4, add changelog entry
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:50:27 -07:00
Paul BakausandClaude Opus 4.6 12aae1f42a Bump to 2.0.4, align version with @impeccable/detect
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:48:09 -07:00
Paul BakausandClaude Opus 4.6 f974875e62 Add BSL-1.1 dependency disclosure to NOTICE.md
Disclose that @impeccable/detect (BSL-1.1) is a transitive dependency
of this Apache 2.0 project, with a summary of the license terms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:42:28 -07:00
Paul BakausandClaude Opus 4.6 3974789903 Remove detection engine files, now in @impeccable/detect package
Remove all detection engine source, tests, fixtures, and build scripts
that have been extracted to the @impeccable/detect package (BSL-1.1).

- Delete source/skills/critique/scripts/ (detect-antipatterns.mjs, browser.js)
- Delete scripts/build-browser-detector.js
- Delete tests/detect-antipatterns*.test.* and tests/fixtures/antipatterns/
- Delete .claude/skills/critique/scripts/detect-antipatterns-browser.js
- Update scripts/build.js to read detection count from npm package
- Update server/index.js to serve browser script from npm package
- Update CLAUDE.md to reference @impeccable/detect
- Update package.json test script (detection tests removed)
- Update .gitignore (remove obsolete browser script entry)
- Rebuild all provider skill distributions with updated critique skill

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:32:57 -07:00
Paul BakausandClaude Opus 4.6 1a28702d24 Switch @impeccable/detect dependency to npm registry
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:25:54 -07:00