Impeccable
23k

Impeccable

Design fluency for AI harnesses

Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 23 commands to steer the result.

Impeccable teaches your AI real design and gives you 23 commands to steer the result.

What's included
Impeccable agent skill with 23 design commands · Optional CLI + Chrome extension
Get Started
Works with
Cursor Claude Code Gemini CLI Codex CLI VS Code Copilot Antigravity Kiro OpenCode Pi

v3.0.6: live mode preserves identity, departure mode derives from brand voice

Before
Welcome to Our Platform
The best solution for your needs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.

Inter font Purple gradient Generic copy Cards on cards
After

Introducing

Thoughtful Design

Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.

Generic AI Output
With Design Skills
01

The Foundation

Before commands, before detection, Impeccable teaches your AI real design. Deep reference knowledge across 7 dimensions, loaded every time your AI writes code.

Run /impeccable teach once to set your project's design context. Every command benefits.

02

The Language

23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision. Pick any to see it in action, or browse the full reference →

03

The Case

Picture it. Build it. Ship the page.

Neo Mirai started as generated reference images: a brand toolkit and a hi-fi conference mock. /impeccable craft turned them into a real responsive website, then iterated in the browser until the live page matched the direction.

01 · Visualize Auto-generated hi-fi landing-page mock in editorial warm-paper style.
02 · Shape Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference.
03 · Live build Finished Neo Mirai website hero and agenda, implemented from the generated conference mock.

A generated reference became shipped HTML, CSS, assets, responsive fixes, and interaction polish. · Read the case → · Open the live build →

04

Live Mode ALPHA

Pick any element in the browser. Drop a comment or a stroke. Hit Go. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.

localhost:3000
Newsletter

Subscribe for updates

Monthly-ish design notes.

No. 04

Letters, occasionally.

A postcard from the editor, about once a month. No tracking pixels, no "just checking in."

☞
Dispatch

Design notes,
every other
Thursday.

☆☆☆
Field Notes

A monthly letter, for people who still read email for pleasure.

Generating variants…
1 / 3
Variant 3 written to source
/
Start /impeccable live to open, then stop live mode when you're done. That's the whole invocation.
Your agent, your code The same AI you've been working with, reading your real project context. Variants are generated as actual edits, not mocks.
Accept = write An accepted variant lands in your source file. Canvas-like iteration, production output.
Skill-native No external tools or IDE extensions. Works across Claude Code, Cursor, Codex, Gemini, and every harness the skill targets.
05

Get Started

1Install the skill

One agent skill that teaches your AI to design, with 23 commands bundled inside. Works in every major AI coding harness.

$ npx skills add pbakaus/impeccable
Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.
Other install methods
Claude Code plugin
$ /plugin marketplace add pbakaus/impeccable
Then open /plugin in Claude Code
Manual download all 12 providers

2Use it

Impeccable gives you a shared design vocabulary with your AI. 23 commands (polish, audit, critique, typeset, and more) that each encode a specific design discipline, so you can steer with precision.

/impeccable redo this hero
Let the skill pick the approach. No names to memorize.
/impeccable audit checkout
Reach for a command by name. Type /impeccable alone to see all 23.
/impeccable pin audit
Pin your favorites. /audit becomes a standalone shortcut.
Full walkthrough Browse the vocabulary

3Add the Chrome extension Optional

Click the toolbar icon on any page and every anti-pattern lights up right where it lives. Catches gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules. Works on localhost, staging, production, or anyone else's site.

Screenshot of the Impeccable Chrome extension highlighting anti-patterns on a webpage Live detection on any webpage Install from Chrome Web Store →

4Install the CLI Optional

Run anti-pattern scans outside the skill: in CI, in a PR check, or against a whole directory. 25 deterministic rules, no LLM required, JSON output ready for build gates.

$ npm i -g impeccable
Then impeccable detect src/ to scan a project, or npx impeccable detect without installing. View on npm →

5Stay updated

Keep skills current and follow along with new commands, anti-patterns, and the design thinking behind Impeccable.

$ npx impeccable skills update
Run periodically to pull the latest skill definitions.
Follow on X @impeccable_ai
06

What's New

Highlights since v3.0 April 10 – 30, 2026

  • Live mode preserves identity by default. Variants stay on-brand for the existing surface and explore different expression axes within that identity. Departure from the current aesthetic only triggers when PRODUCT.md anti-references explicitly reject the current surface, or the user asks for it. Departure directions derive from brand voice, not a fixed catalog.
  • Detector flags the new monoculture. The overused-font rule now catches Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, and Instrument Sans. Contrast checks run on styled <a> and <button> elements. Brand exceptions for Vercel, Next.js, and GitHub on their own domains.
  • Live mode works everywhere. Strict-CSP apps, modal hosts (Radix, Headless UI, vaul), React/TSX projects, and repeated identical-class siblings all handle cleanly through the wrap, preview, accept, and carbonize loop.
  • PRODUCT.md + DESIGN.md as shared context. A strategic file (who, what, why) and a visual file (colors, typography, components in the Google Stitch format) that every command reads before generating. Created via /impeccable teach and /impeccable document.
  • 18 skills became 1 skill with 23 commands. One /impeccable entry in the menu, shared design vocabulary, and /impeccable pin to promote favorites back as standalone shortcuts.
Full version history
v3.0.6 April 30, 2026
  • Live mode preserves identity by default. Variants now stay on-brand for the existing surface (same palette, same type pairing, same visual rhetoric) and explore different expression axes within that identity. Departure from the existing aesthetic only triggers when PRODUCT.md anti-references explicitly call out the current surface, or the user asks for it.
  • Departure mode derives from brand voice, not a fixed catalog. The old lane list (Swiss-grid, Terminal, Industrial-signage, etc.) caused the model to converge on the same three directions every time. Replaced with a brand-voice derivation process: read personality words, imagine physical experiences, derive visual directions. Each run produces directions specific to the brand.
  • Parameters ship consistently on large surfaces. Planning params is now part of variant planning, not a separate step. The freeform bias aligns with the budget table: 2-3 knobs per variant for heroes and sections, with 0-param heroes flagged as mistakes rather than judgment calls.
  • Reflex-reject aesthetic lanes. Parallel to the font reflex-reject list in brand.md. Editorial-typographic is the first entry, catching the second-order training reflex where every departure from SaaS-cream defaults to magazine-cover aesthetics.
  • Two-altitude category-reflex check. The shared design laws now catch both first-order reflexes (theme + palette from category alone) and second-order reflexes (aesthetic family from category + anti-references).
Extension v1.0.3 April 29, 2026
  • Contrast checks now run on styled buttons. A styled <a> or <button> with its own opaque background was silently skipped by the contrast rule, so a "Get started" pill with charcoal text on a near-black background read as fine to the detector. Buttons with their own background and direct text now flow through the same contrast and palette checks as every other text element. Inline links inside paragraphs continue to skip, as before.
Extension v1.0.2 April 29, 2026
  • Popup scan no longer hangs after a page reload. The toolbar-icon flow worked the first time but got stuck on "Scanning…" on subsequent clicks if the page had been reloaded in between. The service worker only cleared its content-script-injected flag when DevTools was open, so the popup-only path saw a stale flag and silently sent its scan request to a tab whose content script had already been wiped. Reset is now unconditional; auto-rescan stays gated to DevTools.
  • Detector flags the new monoculture. The overused-font rule now catches Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, and Instrument Sans alongside Inter and the older defaults. Brand exceptions for Vercel, Next.js, and GitHub on their own domains.
CLI v2.1.8 April 28, 2026
  • Detector runs on Windows. CLI path resolution used new URL(...).pathname, which prepends a slash to drive letters (/C:/...) and breaks fs on Windows. Switched to fileURLToPath across the board. Reported in #95, contributed by @voidborne-d.
  • Border-radius detection no longer flickers under jsdom. The pill-button rule was missing real cases when jsdom returned a percent radius without an explicit width, and over-reporting when CSS shorthand left individual corners unset. The reader now preserves the percent signal and resolves shorthand consistently across the browser and jsdom paths, so CLI scans match what the live overlay sees.
v3.0.5 April 28, 2026
  • Live mode lands valid TSX through the wrap → preview → accept → carbonize loop on Vite/Next React/TSX projects. The wrapper now keeps a single JSX-slot child instead of three adjacent siblings, so it round-trips cleanly inside return (...), array .map(...), and asChild parents like Radix's <DialogPrimitive.Title>. Carbonize stopped double-wrapping CSS in nested template literals on TSX targets, accept and discard restore the picked element at its original indent (with relative depth between lines preserved), and the screenshot overlay no longer flashes solid black on default-background pages. Closes #114, with thanks again to @dergachoff for the detailed bug report.
  • Wrap correctly disambiguates repeated identical-class siblings. A list of <Card className="card"> rendered three times with the same classes used to land on the first one regardless of which the user picked. live-wrap.mjs now accepts --text TEXT (the picked element's textContent) and narrows candidates accordingly, falling back to first-match when the text is too short or doesn't appear literally in source (data-driven children like {title}), and erroring with element_ambiguous when multiple branches still match equally.
  • live-inject CSP-meta unwrap now byte-for-byte preserves self-closing tag whitespace. The patch+revert cycle on a <meta http-equiv="Content-Security-Policy" ... /> tag was eating the space before /> via a double-space artifact in the marker insertion path; common Vite shapes that ship a CSP meta now round-trip cleanly.
  • live.md spec gained explicit guidance for three real authoring traps. Variant CSS must use a descendant combinator (:scope > .card, not bare :scope) or it lands on the wrapper instead of the picked element. JSX <style> bodies need {`...`} template-literal wrapping. Aborting an in-flight session uses live-poll --reply EVENT_ID error "msg", not live-accept --discard; the latter only mutates source while the bar stays stuck on GENERATING dots forever.
v3.0.4 April 28, 2026
  • /impeccable craft now treats approved mocks as visual contracts. The craft flow requires a mock fidelity inventory before build, maps major visible ingredients to code or assets, and flags missing hero objects, imagery, section structure, nav/CTA treatment, and distinctive motifs as blocking defects unless the user accepted the deviation.
  • Image-led brand surfaces can no longer degrade into abstract panels. Travel, editorial, portfolio, venue, product showcase, entertainment, and education work now requires credible imagery, generated plates, illustrations, maps, renders, or destination scenes when the approved mock or subject matter calls for them.
  • /impeccable craft and /impeccable shape hardened against autonomous agents. Codex-class harnesses had started writing files before the user confirmed a design brief, treating their own summary as the brief. Setup now ships a preflight checklist (context, product, command reference, shape, image gate, mutation), and craft enforces an explicit build gate: shape=pass only counts when the user separately approves the brief or supplies a pre-confirmed one. Self-authored briefs and "the implementation will be semantic anyway" no longer skip the visual probe.
  • Live picker plays nice with modal hosts. Inside Radix Dialog, Headless UI, vaul, and other portals that lock body { pointer-events: none } or attach outside-click dismissers, the picker chrome had become unclickable, and any click that did land would dismiss the host dialog. The bar, picker, params panel, annotation overlay, and design panel now defang outside-handlers at the chrome boundary and force pointer-events: auto on themselves. Theme detection also stopped misreading a transparent body as black. Closes #113, with thanks to @dergachoff for the thoughtful bug report.
v3.0.2 April 27, 2026
  • Claude Code plugin install shrunk by 380×. The marketplace now ships only the runtime payload (~770 KB) instead of the entire monorepo (291 MB). Plugin source moved from ./ to ./plugin, so the cache no longer copies node_modules, build scripts, tests, or the other harness directories. Reported in #107.
  • Slash commands now register reliably on Claude Code. The skills field in plugin.json was missing the trailing slash that the documented schema expects ("./skills/", not "./skills"), which caused Claude Code's plugin loader to skip command registration on some setups. Reported by three users in #86.
v3.0.1 April 24, 2026
  • Live mode runs in strict-CSP apps. When your HTML carries a Content-Security-Policy meta tag, /impeccable live now silently appends the live-server origin to script-src and connect-src (and blob: to img-src for the screenshot overlay) on session start, and reverts the patch verbatim on stop. Header-based CSP setups still get the existing detect-and-suggest path.
  • Live mode survives conditional-render content. Picking an element inside a closed modal, an inactive tab, or a collapsible panel used to wedge live mode when Vite Fast Refresh remounted the parent and reset state. Now: a brief upfront heads-up at pick time, plus a contextual toast after Go ("retrace the path that revealed it") so variants land the moment the element is back in the DOM. No more force-reload that masked the issue.
  • Live mode no longer breaks JSX projects. Three round-trip bugs in /impeccable live's accept path are fixed: the carbonize stash now uses JSX-syntax style attributes and template-literal CSS, and the post-accept rewrite no longer leaks template-literal punctuation into the file. SvelteKit and other frameworks that hydrate after HTML parse now also resume cleanly post-reload.
  • /impeccable polish now a true superset of the retired /normalize. Aligning to the design system is non-optional, drift is named by root cause (missing token, one-off implementation, or conceptual misalignment), and a new Information Architecture & Flow dimension covers progressive disclosure, established user-flow shapes, and naming consistency. Cosmetic-vs-functional triage helps order work when polish time is short.
v3.0 April 10, 2026
  • Live Mode (Alpha). Run /impeccable live and iterate on your UI in the browser: pick any element, drop a comment or stroke, hit Go, get three production-quality variants swapped in via your framework's HMR, accept the one you want and it writes back to source. Works on Vite, Next.js (including monorepos), SvelteKit, Astro, Nuxt. Detects your project's Content Security Policy and offers a one-time, dev-only patch so it runs in strict-CSP apps too.
  • Visualize, then build. Image gen crossed the reference-quality threshold with GPT Image 2, Nano Banana Pro, and Imagen 4 Ultra. /impeccable shape drafts a brand toolkit (color, typography, mood board) as real images; /impeccable craft pre-renders the hi-fi mock to code toward. Strongest in Codex with GPT 5.5.
  • PRODUCT.md, shared design memory for your AI. A single file at your project root that names the audience, brand personality, anti-references, and register (brand vs product). Every command reads it before generating, so output stops drifting into generic "modern SaaS" territory and starts sounding like your product. Created in one step via /impeccable teach.
  • DESIGN.md generation, spec-compliant and interoperable. /impeccable document scans your tokens, components, and rendered output and writes a DESIGN.md that follows the Google Stitch DESIGN.md format. Colors, typography, elevation, components, do's and don'ts, in the exact six sections other DESIGN.md-aware tools expect. Your visual system travels with you.
  • Brand and product registers. Design work splits cleanly into two worlds: brand (marketing sites, landing pages, portfolios, where design IS the product) and product (app UI, dashboards, tools, where design SERVES the product). Register-aware commands (typeset, animate, bolder, quieter, colorize, layout, delight) each adjust their vocabulary to match, so brand work isn't critiqued for breaking product-UI conventions and vice versa.
  • 18 skills became 1 skill with 23 commands. Every command now lives under /impeccable: /impeccable audit, /impeccable polish, /impeccable critique, and the rest. One entry in your / menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type /impeccable.
  • Pin your favorites back as shortcuts. Run /impeccable pin audit and /audit becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to /impeccable audit, so updates to the parent skill flow through automatically. /impeccable unpin audit removes it.
View older releases
v2.1 April 9, 2026
  • Streamlined from 21 to 18 commands. Removed overlap and confusion: /arrange renamed to /layout, /normalize merged into /polish (design system alignment is now part of the final pass), /onboard merged into /harden (empty states and first-run experiences are part of production readiness), and /extract became /impeccable extract (a sub-mode alongside craft and teach). Every remaining command has a clearly distinct job.
  • Automatic cleanup of deprecated skills. On first load after updating, the skill detects and removes leftover files from renamed or merged commands. No manual cleanup needed.
v2.0 April 8, 2026
  • Renamed frontend-design to impeccable. The core skill now shares its name with the project, and the teach subcommand moved from /teach-impeccable to /impeccable teach. One skill, one namespace.
  • Data-driven skill rewrite. The core skill was rebuilt against an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture. The result: dramatically more font and color diversity, sharper overall design quality, and much stronger Codex support. The biggest unlock was an anti-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking. Validated on gpt-5.4 and Qwen 3.6 Plus across 15 niches.
  • Anti-pattern detection engine. 25 deterministic rules across typography, color, layout, motion, and quality. Handles oklch, oklab, lch, and lab color formats, CSS variables inside border shorthands, gradient-backed text, and emoji-only nodes.
  • CLI: npx impeccable detect. Scans HTML, CSS, JSX/TSX, Vue, Svelte, and CSS-in-JS. Framework detection, multi-file import tracking, Puppeteer-backed live URL scanning, CI-ready JSON output, and a --fast regex mode for huge codebases.
  • Chrome DevTools extension. One-click detection on any page: yours, staging, production, or someone else's. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page. In Chrome Web Store review.
  • /critique got teeth. Persona sub-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place.
  • New ways to create with Impeccable. /shape runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written. /impeccable craft chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid.
  • New docs site. Top-level Docs, Anti-Patterns, and Visual Mode sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two tutorials, and 38 rule cards with inline visual examples.
  • New harness: Rovo Dev. 11 supported AI tools total.
v1.6.0 March 18, 2026
  • New provider: Trae (China + International)
  • /critique now scores against Nielsen's 10 heuristics, tests with persona archetypes, and assesses cognitive load
  • /audit now scores 5 dimensions with P0-P3 severity ratings and structured action plans
  • Improved skill descriptions for better agent auto-discovery
  • Fixed invalid YAML frontmatter that broke GitHub preview and Codex loading (#67)
  • Codex CLI now uses correct $ prefix for command references
v1.5.1 March 17, 2026
  • /typeset now recommends fixed type scales for app UIs, reserving fluid typography for marketing/content pages
v1.5.0 March 16, 2026
  • 3 new skills: /typeset (fix typography), /arrange (fix layout & spacing), /overdrive (technically extraordinary effects, beta)
  • Skills now auto-gather design context via .impeccable.md. Run /teach-impeccable once, all skills benefit
  • Deep linking to commands (#cmd-overdrive, etc.)
v1.3.0 March 12, 2026
  • Added OpenCode provider support
  • Added Pi provider support
  • Recategorized /onboard as an enhancement command
v1.2.0 March 5, 2026
  • Added Kiro support (.kiro/skills/)
  • Restored prefix toggle: download i- prefixed bundles to avoid naming conflicts
  • Audit and critique skills only suggest real, installed commands
v1.1.0 March 4, 2026
  • Unified skills architecture: commands are now skills with user-invocable: true
  • Added VS Code Copilot and Google Antigravity support
  • New install flow: npx skills add as primary, universal ZIP as fallback
  • Added universal ZIP containing all 5 provider directories
  • Renamed /simplify to /distill to avoid Claude Code conflict
v1.0.0 February 28, 2026
  • Initial release with enhanced frontend-design skill
  • 17 design commands: /polish, /audit, /distill, /bolder, and more
  • Support for Cursor, Claude Code, Gemini CLI, and Codex CLI
  • Interactive command cheatsheet
07

Frequently Asked Questions

Where do I put the downloaded files?

The easiest way is npx skills add pbakaus/impeccable, which auto-detects your AI harness and places files correctly.

If you downloaded the universal ZIP, extract it to your project root (same level as your package.json or src/ folder). It creates hidden folders for each supported tool: .cursor/, .claude/, .gemini/, .codex/, .agents/, and .github/.

Project-level installation takes precedence and lets you version control your skills.

How do I update to the latest version?

Run npx impeccable skills update from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use.

  • Alternative: npx skills add pbakaus/impeccable re-installs from scratch.
  • Claude Code plugin: Open /plugin, go to the Discover tab.
  • Manual ZIP: Download from above and extract to the project root.

Your PRODUCT.md and DESIGN.md context files are never overwritten.

I used to type /critique directly. How do I get that back?

Pinning is built in. Run /impeccable pin critique and /critique becomes a standalone shortcut again, without reversing the consolidation.

Under the hood it writes a lightweight redirect skill that delegates to /impeccable critique, so updates to the parent skill flow through automatically. It works for every command.

Examples:

  • /impeccable pin polish → /polish works again
  • /impeccable pin audit → /audit works again
  • /impeccable pin live → /live works again

To remove: /impeccable unpin critique. To see your current pins, check your harness skills directory (.claude/skills/, .cursor/skills/, etc.) for directories prefixed with i-.

Commands or skills aren't appearing. What do I do?

For commands: Type /impeccable in your AI harness and look for commands like /impeccable audit, /impeccable polish, etc. If they don't appear, double-check the files are in the correct location.

For skills: Skills are applied automatically when relevant. To verify, explicitly mention "use the impeccable skill" in your prompt. This forces the AI to acknowledge and apply it.

Tool-specific setup:

  • Cursor: Requires Nightly channel + Agent Skills enabled in Settings → Rules
  • Gemini CLI: Requires @google/gemini-cli@preview + Skills enabled via /settings
  • Codex: Skills do not appear in the normal / command picker. Open /skills or type $. Repo installs live in .agents/skills/, user installs live in ~/.agents/skills/. Restart Codex if a new skill does not show up.
I'm new to AI harnesses. Where do I start?

Skills and commands are intermediate features. If you're just getting started, learn the basics first:

Once you're comfortable with basic prompting and code generation, come back and give Impeccable a try.

Is Impeccable free?

Yes. Everything is Apache 2.0: skills, commands, CLI, and the detection engine. Fully open source, free for everyone.

Work with me

Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

Get in touch