Impeccable

The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, and catch AI slop before it ships.

From your project root:

npx impeccable install

Reload your coding tool, then run /impeccable init in your agent ($impeccable init on Codex).

Works with Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness, and Veto. Full docs live at impeccable.style/docs.

Without Impeccable	With Impeccable

Same model (Fable 5.1), same brief: a fourteen-room family guesthouse on the Ligurian coast. Without Impeccable, it builds the tasteful default: cream page, thin serif, italic accent, pill buttons. With it, the page is built around one picture: the house at night, seen from the water.

For a full project, see the Neo Mirai case study: a conference site taken from mockup to shipped page.

Why

Inter for everything. Purple-to-blue gradients. Cards nested in cards, gray text on colored backgrounds, a rounded-square icon tile above every heading. Ask an agent for a page with no other guidance and these show up again and again, across models and projects.

• Words for what you want. "Make it pop" leaves your agent to guess. /impeccable bolder the pricing cards loads a playbook written for that one move and points it at one target.
• A reviewer. critique scores the design against usability heuristics and ranks what to fix first. audit checks accessibility, performance, theming, and responsive behavior, with findings ranked P0 (blocking) to P3 (polish).
• A slop detector. 62 deterministic rules flag the tells above, plus quality problems like cramped padding and skipped headings. No LLM, no API key.

Impeccable is strongest on interfaces that already exist: point it at a page or a component and iterate. It builds new pages too; see Build something new for how to get the most out of that harder mode. To start, pick one component:

/impeccable critique the pricing cards

How it works

Run /impeccable init once per project. It reads your code, asks only what it can't infer (who the product is for, what it needs to do, the constraints), and writes PRODUCT.md. Every later command reads it. Run /impeccable document to capture your existing visual system in DESIGN.md, so changes stay on-brand. More on context files.

Then name a command and a target:

/impeccable critique the onboarding flow
/impeccable quieter the landing page
/impeccable polish settings
/impeccable harden checkout

Or just describe what you want: /impeccable redo this hero section. Narrow targets get better results; a single section reviewed closely beats a whole page at a glance. Pin a command you use often with /impeccable pin audit to get /audit as its own shortcut.

24 commands

	Commands
Steer	bolder amplifies safe designs · quieter tones down loud ones · distill removes what the page doesn't need · colorize brings color to a gray interface · typeset fixes fonts, hierarchy, and sizing · layout fixes spacing and rhythm · animate adds transitions and interaction feedback · delight adds personality · overdrive goes for shaders, spring physics, and scroll-driven effects
Review	critique is a scored UX review · audit is a technical quality report
Finish	polish is the final pass before shipping · harden covers errors, i18n, overflow, and edge cases · clarify rewrites unclear copy · adapt handles screen sizes and devices · optimize fixes loading and rendering performance · onboard designs first-run flows and empty states
Iterate live	live lets you pick an element in the browser and cycle through variants · generate produces variants of a named element without manual picking
Plan and set up	shape plans UX before code · init writes PRODUCT.md · document writes DESIGN.md · extract pulls repeated patterns into your design system

The 24th, craft, is a deprecated alias for a plain build request. Type /impeccable alone to see the list in your agent. Each command has its own page: impeccable.style/docs.

On Codex, open /skills or type $impeccable instead of the slash command.

Live mode

/impeccable live opens your running dev server with an overlay. Select an element, pick a direction, and Impeccable hot-swaps variants in place. Accept one and it is written back to your source. It works with Vite, Next, SvelteKit, Astro, Nuxt, and plain HTML. Iterate in the browser.

Live mode edits a local checkout only; don't inject it into a deployed site or weaken a production CSP to make it work. Applying copy edits runs your package.json's optional impeccable:manual-edit-validate script with your permissions, so review it before using live mode in an unfamiliar repo.

Apply sends staged copy edits to your chat agent while a live session is polling. If none has polled in the last minute, it runs the codex CLI from your PATH instead (or claude when codex is missing), with approvals, permission checks, and sandboxing off (--dangerously-bypass-approvals-and-sandbox or --permission-mode bypassPermissions) and your environment inherited. Its prompt carries the staged edits, the edited elements' HTML and nearby text, the page URL, and candidate source paths. Set IMPECCABLE_LIVE_COPY_AGENT=chat in the environment that starts live mode to keep Apply in your chat session, or off to disable Apply. The server reads it once at startup.

Three ways to run the detector

In your agent. The design hook scans every UI file your agent edits and hands the findings back before the agent calls the work done. This is where most slop gets caught: without the hook, the detector only runs when someone remembers to run it. It's available on Claude Code, Cursor, Codex, GitHub Copilot, Grok Build, and Hermes Agent, and the installer sets it up. Say yes. Automatic design checks.

In CI or your terminal. The CLI needs no agent:

npx impeccable detect src/                   # scan a directory
npx impeccable detect https://example.com    # scan a rendered page (uses your installed Chrome or Edge)
npx impeccable detect --json .               # machine-readable output
npx impeccable detect --github src/          # GitHub Actions annotations
npx impeccable detect --list-rules           # every rule with its id and description

Source files like JSX and TSX get the pattern rules only. Rules that need a rendered page, such as low contrast and tiny text, run when you scan a URL, so point the CLI at your dev server too: npx impeccable detect http://localhost:5173.

Exit code 2 means findings, 1 means a target couldn't be scanned. To allow your brand font everywhere, run npx impeccable ignores add-value overused-font Inter --reason "Brand font". To turn a rule off for one file, add a comment: <!-- impeccable-disable overused-font: exported brand doc -->. [Run a detector scan](https://impeccabl