Skip to content

v2.0: Anti-pattern detection system#56

Open
pbakaus wants to merge 50 commits intomainfrom
v2.0
Open

v2.0: Anti-pattern detection system#56
pbakaus wants to merge 50 commits intomainfrom
v2.0

Conversation

@pbakaus
Copy link
Copy Markdown
Owner

@pbakaus pbakaus commented Mar 20, 2026

Summary

Working branch for Impeccable v2.0. This release adds a comprehensive anti-pattern detection system -- both a deterministic CLI scanner and browser visualization overlay -- plus major improvements to the build system and critique skill.

Anti-pattern detection engine

  • 25 detection rules across typography, color, layout, visual details, motion, and design quality
  • Dual-mode scanner: jsdom-based deep analysis (default) with regex-only fast mode (--fast)
  • Browser visualizer: injects overlays directly on live pages highlighting detected anti-patterns
  • CLI tool: bun bin/impeccable.mjs detect [target] for standalone usage outside AI harnesses
  • Unified universal detection script works in both Node.js and browser environments

/critique skill overhaul

  • Sub-agent architecture: LLM design review and automated detection run independently to avoid bias, results synthesized into a combined report
  • {{scripts_path}} build placeholder resolves per-provider (${CLAUDE_PLUGIN_ROOT}/scripts for Claude Code, relative paths for Cursor/Gemini/Codex/etc.)
  • Browser overlay is now a visual aid for the user -- agent reads findings from console instead of scrolling through screenshots
  • allowed-tools frontmatter declares required bash commands

Build system improvements

  • Shared transformer (shared.js) replaces per-provider duplication
  • YAML parser now handles simple string arrays (not just - name: objects)
  • {{scripts_path}} dynamic placeholder -- prefix-aware, provider-aware
  • Browser detector script auto-generated at build time from shared source

Gallery of Shame

  • New /gallery page showcasing real anti-pattern examples with live detection overlays

Tests

  • 590+ test assertions covering all 25 detection rules
  • Browser detector tests
  • Fixture-based test suite with should-flag/should-pass HTML files

Test plan

  • Run bun test -- all detection tests pass
  • Run bun bin/impeccable.mjs detect public/index.html -- CLI works
  • Run /critique in Claude Code -- sub-agent flow, console-based overlay reading
  • Verify bun run build succeeds and {{scripts_path}} resolves correctly for Claude Code and Cursor outputs
  • Check /gallery page loads with live detection overlays

🤖 Generated with Claude Code

pbakaus and others added 30 commits March 17, 2026 10:54
@pbakaus @claude
Add anti-pattern detection CLI, browser visualizer, gallery page, and…
f9bfe18 
… build DRY refactor

- Anti-pattern detector script (source/skills/critique/scripts/detect-antipatterns.mjs):
  CLI tool that scans files/dirs for UI anti-patterns via regex. Detects side-tab
  accent borders and border-accent-on-rounded patterns across Tailwind, CSS, JSX.
  Context-aware: skips safe elements (blockquotes, nav, inputs, code), neutral
  colors, and adjusts thresholds based on border-radius co-occurrence.

- Browser visualizer (public/js/detect-antipatterns-browser.js):
  Drop-in script that highlights anti-patterns directly in the browser with
  labeled overlays. Two modes: "static" (regex, matches CLI) and "computed"
  (getComputedStyle, catches CSS cascade). Scans both inline styles and
  <style> blocks.

- Gallery of Shame (public/gallery.html):
  Standalone page showcasing 11 AI anti-pattern examples with thumbnails
  and links. Anti-pattern example pages updated from 1080x1080 Twitter
  format to responsive layouts, labels removed, screenshots retaken at 16:10.

- Critique skill updated to run detector before manual review.

- Build system: skills now support scripts/ directories alongside reference/.
  All 8 provider transformers refactored to use shared.js (DRY).

- 58 new tests covering detection logic, fixtures, CLI integration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add typography anti-pattern detection: overused fonts, single font, f…
1fb896a 
…lat hierarchy

Three new detections:
- overused-font: flags Inter, Roboto, Open Sans, Lato, Montserrat, Arial
  as primary font-family or via Google Fonts imports
- single-font: file-level analyzer flags pages using only one non-generic
  font family (needs pairing for typographic hierarchy)
- flat-type-hierarchy: file-level analyzer collects all font-size values
  (px, rem, Tailwind text-* classes, clamp min/max) and flags when the
  max/min ratio is below 2.0

Detection engine extended to support file-level analyzers alongside
line-level matchers. Typography fixtures added for both should-flag
and should-pass cases.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add deep detection via jsdom and URL scanning via Puppeteer
32a5413 
Three detection tiers:
- file/dir (default): fast regex scan, zero dependencies
- file + --deep: jsdom computed styles, resolves linked local stylesheets
  by inlining <link rel="stylesheet"> content before parsing
- URL (https://...): auto-launches Puppeteer for full browser rendering,
  handles CDN stylesheets, JS-rendered content, everything

New exports: detectAntiPatternsDeep(), detectAntiPatternsUrl()
jsdom added as devDependency; puppeteer remains optional (npx cache).

TDD: linked-stylesheet fixture demonstrates the gap — regex finds 0
border issues, --deep correctly catches side-tab and top-accent from
the external CSS file.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Normalize detection to jsdom by default, regex as fallback
37393f1 
Architecture simplified to two paths:
- HTML files: jsdom with getComputedStyle (resolves linked CSS, cascade)
- Non-HTML files: regex fallback (CSS, JSX, TSX, etc.)
- URLs: Puppeteer (unchanged)
- --fast flag forces regex-only for all files

Removed --deep flag (jsdom is now the default). Removed static mode
from browser script (always uses getComputedStyle — it's in a real
browser). Anti-pattern definitions split into:
- checkElementBorders() — shared element-level computed style checker
- checkPageTypography() — shared page-level checker
- REGEX_MATCHERS/REGEX_ANALYZERS — regex fallback for non-HTML

Browser script simplified from 470 lines to 250. CLI script reduced
from 810 lines to 440. Detection logic is now single-source for
jsdom/puppeteer/browser.

Fixtures now served via /fixtures/* route in dev server for proper
CORS handling of linked stylesheets.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Skip page-level checks on partials/components
ed1579e 
Page-level typography checks (flat hierarchy, single font, overused font)
now only run on files that look like full pages (have <!DOCTYPE, <html>,
or <head> tags). Partials and components still get element-level border
checks.

isFullPage() strips HTML comments before checking to avoid false matches
on prose that mentions tag names.

Added partial-component.html fixture that has Inter, flat sizes, and a
side-tab border — verifies only the border is flagged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add color and contrast anti-pattern detection
8a357d4 
Five new detections:
- pure-black-white: flags #000/#fff in styles via regex (jsdom bg
  resolution unreliable for this)
- gray-on-color: gray text (low chroma, mid luminance) on colored
  backgrounds via getComputedStyle + ancestor bg walk
- low-contrast: WCAG AA violation (4.5:1 body, 3:1 large text) via
  computed contrast ratio with resolved effective background
- gradient-text: background-clip:text + gradient combo via regex
  (jsdom doesn't compute background-clip)
- ai-color-palette: conservative purple/violet accent detection via
  regex on known hex values in prominent contexts

Background resolution handles jsdom limitation where background
shorthand isn't decomposed — falls back to parsing raw style attribute
for hex colors.

Color fixtures added for both should-flag (all 5 types) and
should-pass (tinted neutrals, good contrast, non-purple accents).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add Tailwind color class detection for all color anti-patterns
27715ed 
Element-level (jsdom) and regex (--fast) detection for:
- bg-black, bg-white, text-black: pure black/white
- text-white without dark bg class: pure white on light
- text-gray-*/slate-*/zinc-* on bg-{color}-*: gray on colored bg
- text-purple-*/violet-*/indigo-* on headings/large text: AI palette
- from-purple-* to-indigo-*: purple gradient
- bg-clip-text + bg-gradient-to-*: gradient text (already existed)

text-white is NOT flagged when paired with a dark bg class (bg-black,
bg-gray-700+, bg-blue-500+, etc.) since that's intentional contrast.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add color detection to browser visualizer script
e45d6cd 
Mirrors all 5 color anti-pattern checks from the CLI:
- pure-black-white (computed bg + Tailwind classes)
- gray-on-color (computed style + ancestor bg resolution + Tailwind)
- low-contrast (WCAG AA ratio via computed styles)
- gradient-text (computed background-clip + Tailwind bg-clip-text)
- ai-color-palette (computed hue analysis + Tailwind purple classes)

Browser version uses real getComputedStyle so bg resolution works
properly (unlike jsdom). Tailwind class checks are shared logic.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add layout anti-pattern detection: nested cards, identical grids, spa…
72b9ca2 
…cing, centering

Four new layout detections:
- nested-cards: jsdom DOM walk finds card-like elements (shadow + rounded + bg)
  nested inside other card-like elements. Excludes dropdowns (absolute/fixed),
  form inputs, code blocks, badges (<20 chars), and known component classes.
- identical-card-grid: detects grid/flex parents with 3+ children sharing the
  same structural fingerprint (icon + heading + paragraph template pattern).
- monotonous-spacing: regex on raw HTML collects padding/margin/gap values
  (px, rem, Tailwind classes), rounds to nearest 4px, flags when >60% use
  the same value with <=3 distinct values.
- everything-centered: regex counts text-align:center and Tailwind text-center
  on text elements, flags when >70% of 5+ text elements are centered.

Also narrowed pure-black-white to only flag #000 as background color —
text-black, text-white, bg-white, and #fff are no longer flagged (too
common, per user feedback).

Extensive should-pass fixture covers: shadcn card sub-components, cards
with form inputs/dropdowns/code blocks/badges/accordions/tabs/images,
pricing cards, varied spacing, mixed centered/left-aligned layouts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Narrow browser script pure-black-white to only flag #000 backgrounds
9dad325 
Matches CLI behavior: only bg-black and computed #000 backgrounds are
flagged. bg-white, text-black, text-white, and #fff are no longer
flagged in the browser visualizer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add layout detection to browser visualizer
94a20d8 
Adds checkLayout() with nested-cards and identical-card-grid detection
using computed styles and DOM tree walking. Same logic as CLI:
- isCardLike() checks shadow + rounded + bg/border (2 of 3)
- Excludes dropdowns, modals, tiny elements, safe tags
- Identical grid fingerprints icon + heading + paragraph structure

Layout findings are highlighted on the actual elements (not just
in the page banner).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix nested card detection, drop identical-card-grid
f90e640 
- Nested cards: fixed dedup to use WeakSet on actual elements instead
  of tag-name key, so all nested card instances are found (not just
  the first div-in-div pair). Now catches all 4+ nesting examples.
- Dropped identical-card-grid: too many legitimate uses (data displays,
  pricing cards, navigation tiles) make false positives unavoidable.
- Removed from CLI, browser script, tests, and ANTIPATTERNS registry.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix browser nested card dedup — use WeakSet like CLI
ae47758 
Same bug as the CLI had: Set with tag-name key ('DIV:DIV') deduped
all nested divs to one finding. Now uses WeakSet on actual elements
so each nested card instance gets its own outline.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix nested card detection: innermost-only, lower threshold, raw style…
add8c19 
… fallback

Three fixes:
- Only flag innermost nested cards: if L1>L2>L3, only L3 gets flagged
  (not L2). Uses ancestor-filtering after collection pass.
- Lower text threshold from 20 to 10 chars to catch short card content
  like "Inner card via CSS."
- isCardLike now also checks raw inline style attribute for box-shadow
  and border-radius (jsdom doesn't resolve CSS shorthands). Tightened
  heuristic: shadow or border is mandatory (not optional).

Fixes false positive on layout-should-pass where a tinted subsection
(rounded + bg, no shadow) inside a card was incorrectly flagged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix browser nested cards: WeakSet not iterable, match CLI heuristic
b34e094 
WeakSet.prototype[Symbol.iterator] doesn't exist — can't use for..of.
Changed to Set (same fix as CLI). Also updated isCardLike heuristic
to require shadow or border as mandatory, matching the CLI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
DRY: replace Puppeteer page.evaluate with browser script injection, a…
7bc3a55 
…dd browser tests

Major cleanup:
- detectUrl() now injects the browser script via page.evaluate() and
  calls window.impeccableScan() instead of reimplementing all detection
  logic inline. Removes ~80 lines of triple-duplicated code.
- Removed dead isPureBlackOrWhite function.
- CLI reduced from 1286 to 1212 lines.

New: Puppeteer-powered browser parity tests (detect-antipatterns-browser.test.js):
- Starts a local HTTP server for fixtures
- Loads fixture pages in headless Chrome
- Runs the browser detection script via impeccableScan()
- Verifies findings match expectations for all fixture categories:
  borders, colors, layout, typography, partials

8 new browser tests catch desync between CLI and browser script
(like the WeakSet iteration bugs we hit earlier).

puppeteer added as devDependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Extract shared core module, generate browser script at build time
623a8a8 
DRY refactor:
- detect-antipatterns-core.mjs (297 lines): shared constants (SAFE_TAGS,
  OVERUSED_FONTS, GENERIC_FONTS, ANTIPATTERNS), color utilities (parseRgb,
  relativeLuminance, contrastRatio, hasChroma, getHue, colorToHex,
  isNeutralColor), and pure detection functions (checkBorders, checkColors,
  isCardLikeFromProps).
- CLI (889 lines, was 1212): imports from core, keeps jsdom-specific
  resolveBackground, page-level analyzers, regex fallback, and CLI logic.
- Browser wrapper (335 lines): template with browser-specific DOM adapters,
  highlighting, scan loop. Core is injected at build time.
- build-browser-detector.js: reads core, strips exports, injects into
  wrapper, writes to public/js/detect-antipatterns-browser.js (generated).
- Build step added to scripts/build.js (runs before Bun bundling).

Source of truth for detection logic is now the core module. Browser script
is generated — do not edit public/js/detect-antipatterns-browser.js directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Move generated browser script to .claude/skills/critique/scripts/
fbfe525 
The generated browser detector now lives alongside the CLI script in
.claude/skills/critique/scripts/ — clearly a build artifact, not a
hand-maintained source file in public/js/.

- build-browser-detector.js outputs to .claude/ instead of public/js/
- Dev server serves .claude/skills/* for local testing
- All fixture and antipattern-example HTML files updated to new path
- Puppeteer detectUrl reads browser script from same directory
- Browser parity test server updated to serve from .claude/
- Deleted public/js/detect-antipatterns-browser.js

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix browser script serving: run build after skill sync, serve via /js/
d8803c8 
The skill sync wipes .claude/skills/ and re-copies from dist, deleting
the generated browser script. Moved build-browser-detector.js to run
AFTER the sync. Dev server's /js/* route now falls through to
.claude/skills/critique/scripts/ for built artifacts. All fixture HTML
references use /js/detect-antipatterns-browser.js (clean URL).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Merge 3 detection scripts into one universal file
d1d8929 
Combine detect-antipatterns-core.mjs, detect-antipatterns.mjs, and
detect-antipatterns-browser-wrapper.js into a single universal file
that auto-detects browser vs Node via IS_BROWSER. Shared constants,
color utilities, and pure detection logic exist once instead of
being duplicated across files.

Build script simplified to strip @browser-strip-start/end markers,
set IS_BROWSER=true, and wrap in IIFE.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add motion and dark-glow anti-pattern detection (15 → 16)
c751015 
New detections:
- bounce-easing: flags bounce/elastic animation names, animate-bounce
  (Tailwind), and cubic-bezier curves with overshoot (y values outside
  [0, 1])
- layout-transition: flags explicit transition of width, height, padding,
  margin, and max-height/min-width variants; skips transition: all
- dark-glow: flags colored box-shadow with blur > 4px on dark backgrounds
  (luminance < 0.1); skips gray shadows, focus rings (no blur), and
  non-dark backgrounds

Includes 48 new tests across unit, regex, and jsdom fixture tests with
dedicated should-flag and should-pass HTML fixtures for both categories.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Redesign antidote section with detector summary and gallery link
0ac2e2b 
Replace the buried "Gallery of Shame" inline link with a compact
detector summary card showing all 16 auto-detected anti-patterns
as chips grouped by category (Borders, Typography, Color, Layout,
Motion). Prominent gallery link in the footer. Revised lead copy
to mention the automated detector.

Keeps the tabbed Do/Don't pattern reference below unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Refine antidote section: inline critique note, remove card layout
d444d25 
Replace the detector summary card and badge system with a simple
inline note below the tabbed Do/Don't patterns: "/critique catches
all of these. 16 deterministically, the rest through LLM analysis."
Gallery of Shame and Suggest a pattern links sit inline alongside.

Subtle divider separates the note from the patterns above.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
DRY: extract checkHtmlPatterns, add gradient background detection
0574bd0 
Extract all regex-on-HTML checks into shared checkHtmlPatterns()
function called by both browser and Node paths. Eliminates drift
between checkTypography/checkPageTypography and removes separate
checkPageMotion/checkPageGlow functions.

Add parseGradientColors() utility and checkElementGradientDOM()
to detect purple/violet gradient backgrounds on any element
including buttons (bypasses SAFE_TAGS). Fix false low-contrast
findings on gradient backgrounds by returning null from
resolveBackground when a gradient is encountered.

Fix "Only font:" double-colon in browser labels.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix glow/gradient detection, fix test performance (280s -> 5s)
4d2ef64 
Detection improvements:
- Remove SAFE_TAGS from glow check (buttons/links with glows are valid)
- Add gradient color parsing (parseGradientColors) for AI palette
  detection on gradient backgrounds including buttons
- Detect cyan neon text on dark backgrounds as AI palette
- Resolve gradient backgrounds as dark for glow detection
- Fix pure-black false positive on semi-transparent overlays (a >= 0.9)
- Skip low-contrast/gray-on-color when background is a gradient
- Fix "Only font:" double-colon in browser labels

Test performance:
- Split jsdom fixture tests to Node's test runner (bun + jsdom hangs
  after ~13 instances due to resource leak)
- bun test for unit/regex/CLI tests (94 tests, 4s)
- node --test for jsdom fixtures (15 tests, 1.3s)
- Total: 109 tests in ~5s (was 280s+)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add 9 design quality detections, improve browser overlay UX
50485e0 
New detections (browser-only, DOM-based):
- line-length: text wider than ~85 chars per line
- cramped-padding: <8px padding in bordered/bg containers (2+ borders)
- tight-leading: line-height < 1.3x on body text
- small-target: interactive elements < 44x44px
- skipped-heading: heading levels that skip (h1 then h3)
- justified-text: text-align: justify without hyphens: auto
- tiny-text: font-size < 12px on body text (>20 chars)
- all-caps-body: text-transform: uppercase on >30 chars of body text
- wide-tracking: letter-spacing > 0.05em on non-uppercase body text

Browser overlay improvements:
- Hover swaps label for detail tooltip (CSS-based, not JS events)
- Border goes transparent on hover to reveal element underneath
- Fixtures: quality-should-flag.html and quality-should-pass.html

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Polish browser overlay UX: hover expansion, tooltip, resize tracking
8899d51 
- Switch from border to CSS outline for overlays (cleaner, animatable)
- On hover: outline expands outward 4px, label shifts up to match,
  tooltip slides in from below with fade, z-index elevates above others
- Exclude page banner from hover transitions via .impeccable-banner class
- Reposition overlays on window resize via requestAnimationFrame
- CSS-only hover states (no JS event listeners)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add impeccable CLI with detect subcommand
afcff7e 
Usage: npx impeccable detect [file-or-dir-or-url...]

Subcommand structure designed for future expansion. The detect
subcommand delegates to the existing detection engine with all
its modes (jsdom, regex, Puppeteer).

- bin/impeccable.mjs: CLI entry point with bun shebang
- package.json: bin field added
- Export detectCli (main) from detection script
- Updated help text to show impeccable detect usage
- Updated CLAUDE.md and README.md with CLI docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Enhance /critique skill with CLI-first scan and browser visualization
2f49a27 
The critique skill now has three layers of detection:

1. CLI-first pass (always): Runs the deterministic detector via
   `node {{skills_dir}}/critique/scripts/detect-antipatterns.mjs --json`
   with scope checks (file count estimation, --fast for 200-500 files,
   user prompt for >500 files)

2. Browser visualization (when available): If the AI harness has
   browser automation (Chrome MCP, Cursor browser), injects the
   detection script into the page for live visual overlays. Reads
   the browser script via cat, injects via javascript_tool.

3. LLM analysis (always): The existing deep design critique across
   10 dimensions, now informed by deterministic scan results.

Add {{skills_dir}} placeholder to build system for cross-provider
script paths (.claude/skills, .cursor/skills, .gemini/skills, etc).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Tighten critique skill per best practices (195 -> 104 lines)
4591e51 
- Add trigger context to description ("Use when...")
- Compress scan workflow from 4 verbose steps to concise block
- Remove false "zero false negatives" claim, add false-positive guidance
- Avoid loading 55KB browser script into context (inject directly)
- Remove time-sensitive "2024-2025" reference
- Compress 10 evaluation dimensions to AI Slop (expanded) + single
  holistic review paragraph (Claude knows how to evaluate these)
- Revert {{skills_dir}} placeholder (relative paths per skill docs)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
pbakaus and others added 7 commits March 19, 2026 13:12
@pbakaus @claude
Skip CLI detector for URLs (avoids Puppeteer install)
a24328a 
URLs should use browser visualization + LLM analysis instead of
the CLI detector, which would need to install Puppeteer and its
dependencies first.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix critique skill from real-world testing
699c104 
Detection fixes:
- Cramped padding: skip small elements (labels/badges < 100x30px)
  and require >20 chars of text content
- Skip browser extension elements (claude-*, cic-*) from scan loop
  and quality checks to avoid flagging the Claude Chrome indicator

Skill prompt fixes:
- Use python HTTP server + script tag injection instead of direct
  javascript_tool evaluation (avoids CORS issues)
- Add cleanup step for the HTTP server

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Flip critique order: LLM assessment first, detector second
cda5e42 
The detector findings were anchoring the LLM's thinking too heavily,
making the critique feel detector-driven rather than design-driven.
Now the LLM forms its own assessment first, then the detector runs
to catch anything missed. The report structure reflects this: LLM
assessment comes before deterministic scan in the Anti-Patterns
Verdict.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Clarify detector accepts markup files, not CSS-only
87067ca 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Stronger guardrail: detector must run after LLM review
a243cbf 
Claude was running the detector in parallel with the LLM review
despite the section ordering. Added explicit instruction: "Do not
run the detector before or in parallel with your LLM review."

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Improve critique skill: sub-agents, scripts_path, browser overlays
4f18dda 
- Add {{scripts_path}} build placeholder that resolves per-provider
  (${CLAUDE_PLUGIN_ROOT}/scripts for Claude Code, relative paths for others)
- Restructure critique into sub-agent architecture: LLM review and
  detector run independently to avoid bias, results synthesized at end
- Browser overlay is now a visual aid for the user only -- agent reads
  findings from console via [impeccable] prefix instead of scrolling
- Add scroll-to-top instruction before overlay injection
- Add allowed-tools frontmatter for detector bash commands
- Fix YAML parser to handle simple string arrays (not just - name: objects)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Bump version to 2.0.0, add changelog entry
9583837 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Mar 20, 2026 •
edited
Loading

Deploying impeccable with  Cloudflare Pages  Cloudflare Pages

Latest commit: ce98272
Status: ✅  Deploy successful!
Preview URL: https://1b957918.impeccable-2rv.pages.dev
Branch Preview URL: https://v2-0.impeccable-2rv.pages.dev

View logs

pbakaus and others added 6 commits March 20, 2026 09:20
@pbakaus
Merge remote-tracking branch 'origin/main' into v2.0
ce64404 
# Conflicts:
#	.claude/skills/critique/SKILL.md
@pbakaus @claude
Fix CLI docs and browser detector bugs
122dddb 
- Fix README CLI examples to use `bun bin/impeccable.mjs` instead of `npx impeccable`
- Fix classList.match() crash in Node/jsdom by converting DOMTokenList to string
- Fix overlapping page-level banners by merging all findings into a single banner

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Remove small-target detection (too aggressive for regular links)
1260c23 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add test fixture for short text in wide containers, document test runner
2201d86 
- Add short-text-in-wide-container examples to quality-should-pass fixture
- Add Testing section to CLAUDE.md
- Revert unnecessary line-length estimatedLines guard (textLen > 80 already sufficient)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix CI: use bun run test to split unit/fixture tests correctly
3d0400c 
CI was running `bun test` which ran jsdom fixture tests in bun, causing
timeouts. Now uses `bun run test` which runs unit tests in bun and fixture
tests in node.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Add .impeccable.md to .gitignore
61426fa 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
codeCraft-Ritik
codeCraft-Ritik reviewed Mar 25, 2026
View reviewed changes
Copy link
Copy Markdown

@codeCraft-Ritik codeCraft-Ritik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good handling of asynchronous logic in this implementation.

pbakaus and others added 7 commits March 27, 2026 22:20
@pbakaus @claude
Merge main into v2.0: consolidate critique skill with scoring, person…
efcfd5d 
…as, and detection

Merges 54 commits from main including factory-based build system, Trae support,
improved skill descriptions, and security hardening. Consolidates the critique
skill to combine v2.0's sub-agent architecture and automated anti-pattern
detection with main's Nielsen heuristics scoring, cognitive load assessment,
persona-based testing, and structured follow-up workflow. Fixes browser detector
build to create target directory after skill sync.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Isolate browser tabs for critique sub-agents to prevent interference
3f86b72 
Each assessment now creates its own tab and labels it ([LLM] or [Human])
so parallel sub-agents don't fight over the same page state.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Hide overlays for non-rendered elements using IntersectionObserver
9ffa802 
Overlays are now created hidden and revealed by an IntersectionObserver
(rootMargin: 99999px), so they automatically show/hide when their target
becomes visible or invisible -- handles closed <details>, display:none,
hidden modals, overflow:hidden clipping, etc. without polling.

Adds overlay-positioning.html test fixture with 9 scenario groups
covering transforms, closed details, sticky, overflow, position offsets,
flex/grid, containing-block creators, and combinations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Fix overlay positioning for fixed elements and improve test fixture
05c9776 
Overlays for elements inside position:fixed contexts now use
position:fixed with viewport-relative coords, so they stay pinned
on scroll. Extracted shared positionOverlay() helper for consistent
coordinate handling across highlight, reposition, and IO callbacks.

Updated fixture with a real fixed footer scenario.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Reposition overlays after ancestor CSS transitions (reveal animations)
3818073 
Use a document-level transitionend listener instead of per-element
listeners, so overlays reposition when a parent's transform transition
ends (e.g. reveal animations with translateY on an ancestor container).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Merge layout findings into existing overlays instead of stacking
fda447e 
When an element already has an overlay from per-element checks (e.g.
side-tab), layout findings (e.g. nested-cards) now merge into the
same overlay label instead of creating a duplicate stacked on top.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pbakaus @claude
Polish browser overlay UI: label slide, banner scroll, toggle, passth…
ce98272 
…rough

- Replace hover outline-offset with outline-color transition (no flicker)
- Label shows type name by default; on hover, detail slides up to replace
  it ticker-style with a dark background for visual distinction
- Banner: horizontal scroll with scroll-snap for findings, fixed controls
- Add toggle button to show/hide all overlays
- Overlays use pointer-events:none so page interactions (text selection,
  clicks, links) pass through; hover driven via target mouseenter/leave

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@codeCraft-Ritik codeCraft-Ritik codeCraft-Ritik left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pbakaus @codeCraft-Ritik