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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
- 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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
- 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>
The typeset skill universally recommended fluid sizing via clamp(),
but no major app design system (Material, Polaris, Primer, Carbon)
uses fluid type in product UI. Now recommends fixed rem scales for
app UIs and reserves fluid type for marketing/content page headings.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The divider uses a fixed CSS angle (skewX(-10deg)) but the clip-path
mask used a fixed percentage offset (skewOffset=8), which only matches
at one specific aspect ratio. Now computes skewOffset dynamically from
the container's actual dimensions via ResizeObserver.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Install section tip now mentions re-running the same command to update
- New FAQ entry: "How do I update to the latest version?" covering
npx skills, Claude Code plugin marketplace, and manual ZIP
- Notes that .impeccable.md is preserved across updates
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New in v1.5.0:
- 3 new skills: /typeset, /arrange, /overdrive (beta)
- Shared Context Gathering Protocol with .impeccable.md
- teach-impeccable writes provider-agnostic context
- Deep linking to commands (#cmd-overdrive etc.)
- JS-powered demo infrastructure with live laser signature
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Starts the response with a distinctive speed-line banner
to set the tone for the skill.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new mandatory sections in the skill:
1. Propose Before Building — must present 2-3 directions with
trade-offs and get user confirmation before writing code. This
skill has the highest misfire potential.
2. Iterate with Browser Automation — must use browser tools to
visually verify effects and iterate. Complex effects never work
on the first try.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Skill changes:
- Remove real-time collaboration section (product decision, not UI)
- Remove service workers / offline-first (product decision)
- Remove SharedArrayBuffer (too niche)
- Replace "application architecture" section with "performance-critical
UI" — focused on making existing features feel fast
- Add explicit note: this skill enhances how UI FEELS, not what a
product DOES
Beta label:
- Add betaCommands list to data.js
- Show BETA badge on /overdrive in command palette
- Show β symbol on periodic table element
- Show BETA badge on cheatsheet page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Typeset: make the before worse (all text same size/color = no
hierarchy) and the after more dramatic (bigger heading, more size
contrast). The transformation should be instantly visible on hover.
Arrange: fix heading split (eyebrow+heading was a typeset change,
not arrange) — keep it as a single heading to stay on-brand.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Demo:
- Laser-etched "Paul Bakaus" signature drawn in real-time on dark
surface, adapted from pbakaus/shaders laser-precision
- Two-canvas architecture: persistent burn canvas + cleared-per-frame
spark overlay to prevent pixel accumulation
- Smooth quadraticCurveTo rendering for fluid signature strokes
- Sparks with motion trails, multi-layer tip glow
Infrastructure:
- Add init() support for command demos — JS can now execute after
demo HTML is inserted into the DOM
- Fix split-compare retriggerAnimations to not destroy canvas elements
(clone-and-replace for CSS-only demos, individual retrigger when
canvas is present)
- Add deep linking to commands (#cmd-overdrive etc.) with hash
tracking and initial load support
- Remove auto-#hero hash — hero is the default state
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The demo must be purely visual (hover slider reveals after state,
no clicking). New demo shows standard rectangular card vs organic
blob-shaped composition — the visual difference is instant and
communicates "beyond normal CSS" without animation or interaction.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The original was an effects-only skill biased toward creative
portfolios and visual spectacle. The rewrite addresses:
1. Scope: now covers ALL forms of technical ambition — performance
(virtual scrolling, WASM, Web Workers), interaction patterns
(View Transitions on dialogs, spring physics), real-time collab
(WebSockets, SharedArrayBuffer), and data visualization — not
just shaders and particles.
2. Browser support: removed Houdini Paint API (Chromium-only),
removed navigator.vibrate() (Safari never shipped, Firefox
dropped), added support notes for each technology tier.
3. Bias corrections: removed creative-portfolio-only framing,
removed "pick ONE hero moment" dogma, added examples for
functional UI (tables, forms, dialogs) and app architecture.
4. Structure: organized toolkit by what you're trying to achieve
(make transitions cinematic, push performance boundaries) not
by technology name.
5. Demo: replaced purple gradient AI slop with a structural
before/after showing view-transition-name on project cards.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New skill that pushes interfaces past conventional limits with
bleeding-edge browser APIs: WebGPU shaders, scroll-driven animations,
View Transitions, generative art, spring physics, and more.
Key design decisions:
- Strong "when to use / when not to" guardrails
- Progressive enhancement is non-negotiable
- "Pick ONE hero moment" philosophy — restraint in choosing where
- The extraordinary/gimmicky line defined explicitly
- prefers-reduced-motion respect required
Also updates all counts to 20 commands across website, docs, and
plugin metadata.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace prescriptive 4pt px grid with flexible guidance (framework
scales, rem tokens, custom systems — consistency matters, not values)
- Add Flex vs Grid guidance — don't default to Grid when Flex is simpler
- Soften hierarchy advice: fewest dimensions needed, not "combine all"
- Remove margin-left optical trick (confusing, too niche)
- Remove touch target advice (belongs in /adapt and /audit)
- Add qualifier to icon centering (only adjust if confident)
- Fix position hierarchy to be about reading flow awareness, not rules
- Change hero metric from NEVER to nuanced DON'T (legitimate for real
data, problematic as default template)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add to data.js (process steps, categories, relationships)
- Add to framework-viz.js (periodic table symbols and numbers)
- Create before/after demos for both commands
- Update command count 17→19 across all locations:
index.html, cheatsheet.html, README, NOTICE, AGENTS,
plugin.json, marketplace.json
- Add critique→typeset/arrange in relationship flow
- Add "Adding New Skills" checklist to CLAUDE.md so future
skill additions don't miss any locations
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new skills that expose frontend-design's typography and spatial
design references as actionable, diagnostic workflows:
- /typeset: assess and improve font choices, hierarchy, sizing, weight
consistency, and readability (closes#26)
- /arrange: assess and improve layout, spacing, visual rhythm, and
grid structure
Both follow the established skill pattern (assess → plan → execute →
verify) with MANDATORY PREPARATION and context gathering.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The AI was inferring context from the codebase instead of running
teach-impeccable on cold start. Two changes:
1. Protocol in frontend-design now explicitly says "you cannot infer
context by reading the codebase" and marks teach-impeccable as
REQUIRED, not just suggested
2. Every skill's MANDATORY PREPARATION now reinforces: "if no design
context exists yet, you MUST run teach-impeccable first"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Normalize already has its own "Discover the design system" step in
its Plan section that handles this. No need to duplicate it in the
preparation block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
"What's essential vs nice-to-have" is product prioritization, not
design context. The protocol already covers audience and use cases.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
