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>
Restructure the Install section into a "Get Started" two-step flow:
1. Install the skills (npx as primary, alternatives collapsible)
2. Stay up to date (embedded Substack subscribe form)
- Elevate npx command as the sole primary install method
- Collapse Claude Code marketplace and manual ZIP into expandable alternatives
- Replace hidden prefix toggle with prominent radio card selector
- Download button dynamically updates label based on prefix choice
- Add Substack newsletter embed (impeccablestyle.substack.com)
- Add newsletter link to footer alongside blog link
- Normalize button styles for consistency (square corners for actions)
- Add newsletter icon assets (SVG + PNG) for Substack branding
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add floating bottom section nav (appears after hero, hides at footer)
- Fix hero split comparison to default 50/50 instead of 70/30
- Remove duplicate "Works with" badges from Install section
- Periodic table: restore compact elements, add inline hover tooltips
- Truncate command descriptions in Commands section for scannability
- Collapse older changelog entries behind "View older releases"
- Add GitHub star count (13.3k) next to repo link
- Fix meta theme-color to match light mode
- Reduce hero top padding, update section 03 subtitle
- Clean up footer: remove redundant tagline and anchor links
- Fix divider line accumulation in changelog and FAQ sections
- Center glass terminal vertically in viewport
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Simplified to substantive changes only (no whitespace reformatting):
- Add escapeHtml() for API-derived text in pattern tab/panel rendering
- Add CSS.escape() + null guard for tab panel selector lookup
- Add clipboard fallback for non-HTTPS / older browsers
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fixes#67: argument-hint values starting with [ were parsed as YAML flow
sequences. Replace structured args arrays in source files with pre-formatted
argument-hint strings, and quote values starting with [ or { in
generateYamlFrontmatter().
Also consolidates 8 nearly-identical transformer files into a single
config-driven createTransformer() factory. Adding a new provider now
requires only a config object in providers.js instead of a full file.
- Replace args source frontmatter with argument-hint strings
- Add YAML quoting for values starting with [ or {
- Add quote stripping to parseFrontmatter() for round-trip support
- Create factory.js + providers.js, delete 8 individual transformers
- Replace 16 explicit build.js calls with a loop over PROVIDERS
- Consolidate 8 test files into 2 (factory + providers)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds the gtag.js snippet (G-TEXGHC7V34) to both HTML pages for
tracking pageviews and usage.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Slash commands do work in Antigravity, so the asterisk and tooltip
warning on the Antigravity badge were incorrect. Removes both.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Previously only .claude/skills/ was synced from dist after build. Now
all 8 provider directories are synced (.claude, .cursor, .gemini, .codex,
.agents, .kiro, .opencode, .pi) so each provider's output can be tested
directly in this repo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Addresses #51 -- Antigravity doesn't support slash commands, only
auto-activated skills. Adds a tooltip on the Antigravity* badge in the
downloads section explaining the limitation and how to invoke skills by
name. Also adds hover tooltips showing provider names on the hero logo
icons.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PR #50 fixed the output SKILL.md files but the source files, build
scripts, tests, docs, and server code still used the wrong spelling.
Claude Code expects `user-invocable` (with c) for slash command
autocomplete to work.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
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>
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>
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>
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>
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>
- 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 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>
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>
- 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>
- Added OpenCode provider support
- Added Pi provider support
- Recategorized /onboard as an enhancement command
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Downloaded all provider logos locally to public/assets/ to eliminate
external dependency on logo.dev API, which was hitting rate limits.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add first-class Pi (pi.dev) provider with transformer, tests, and build integration
- Fix CODEOWNERS username (@paulbakaus → @pbakaus)
- Add missing providers to issue/PR templates (Copilot, Kiro, OpenCode, Pi)
- Add Pi and OpenCode logos to homepage hero and install sections
- Move /onboard from "system" to "enhancement" category
- Update README and DEVELOP.md with all supported providers
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace Vercel serverless functions with Cloudflare Pages static
rewrites and lightweight download functions. Pre-generate all API
JSON data at build time for zero-invocation static serving. Also
fix stale simplify→distill rename in framework-viz periodic table.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
