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

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 · Configuration and ignores.

In your browser. The Chrome extension overlays the same findings on any live page, yours or anyone else's. Review with a visual overlay.

Installation

npx impeccable install

The installer detects your coding tools, asks whether to install for this project or globally, and offers the design hook where your tool supports one. Accept the hook. Reload your tool afterward. npx impeccable update refreshes an existing install. For scripts, pass --providers=claude,codex,cursor and --scope=project|global.

Three tools need one more step before the hook runs. In Codex, open /hooks and approve the project hook (again after an update that changes it). In Grok Build, run /hooks-trust or launch with --trust. In Hermes Agent, the hook is a plugin: run hermes plugins enable impeccable-design-hook once. Allow the hook in your harness.

Node is only needed for npx. The skill itself runs a self-contained engine binary that ships next to it or downloads once into ~/.impeccable/bin/.

git submodule add https://github.com/pbakaus/impeccable vendor/impeccable
npx impeccable link --source=vendor/impeccable --providers=claude,cursor

Project files and git

Impeccable writes its working files under .impeccable/. A few are shared project artifacts and belong in the repo: config.json, live/config.json, design.json, surfaces/*.md, and critique/*.md. Keep PRODUCT.md and DESIGN.md in the repo too. The rest is screenshots, caches, and runtime state.

# impeccable-ignore-start
# Ephemeral output, runtime state, and per-dev overrides.
# The **/ prefix covers .impeccable at the repo root or in a nested workspace.
# Shared artifacts stay tracked: config.json, live/config.json,
# design.json, surfaces/*.md, critique/*.md.
**/.impeccable/config.local.json
**/.impeccable/hook.cache.json
**/.impeccable/hook.pending.json
**/.impeccable/*.png
**/.impeccable/review/
**/.impeccable/questions/
**/.impeccable/live/server.json
**/.impeccable/live/sessions/
**/.impeccable/live/previews/
**/.impeccable/live/annotations/
**/.impeccable/live/cache/
**/.impeccable/live/manual-edit-apply-transaction.json
**/.impeccable/live/manual-edit-events.jsonl
**/.impeccable/live/manual-edit-evidence/
**/.impeccable/live/pending-manual-edits.json
**/.impeccable/live/deferred-svelte-component-accepts.json
**/.impeccable/live/*.png
# impeccable-ignore-end

The folders that hold decision-round state (.impeccable/questions/, .impeccable/mocks/worlds/) also ignore themselves. A .gitignore can't untrack a file git already tracks; if you committed one earlier, run git rm --cached <path>.

Good to know

Build path. For new landing pages and showcase surfaces, Impeccable can generate a full-fidelity comp first and build to match it (bolder, slower), or build straight in code (leaner, faster). App screens and documents are always built in code. init asks once and saves the answer as buildPath in .impeccable/config.json; the decision page lets you override it for one session. The choice only appears when your harness can generate images. Image generation · Configuration.

Native apps. Set ## Platform in PRODUCT.md to ios, android, or adaptive (one Flutter or React Native codebase that follows each OS), and the design commands work from Apple's HIG or Material 3 instead of web conventions. init asks when it can't tell. audit and adapt switch to native versions, and the native audit reads SwiftUI, Compose, React Native, or Flutter source directly. The detector, live mode with its generate shortcut, and the edit hook stay web-only, because they work on HTML and CSS in a browser.

Hooks run outside model approval. In Claude Code, installed command hooks run even when you deny the model's own commands, so the first edit can download the engine. Review installed hooks before unattended runs, or pass --settings '{"disableAllHooks": true}' to turn them off for a run. The installer leaves hook entries it didn't add alone.

Something broken? /impeccable doctor finds stale context files, unused settings, and broken hooks. Fix setup problems.

Telemetry. When a new design starts, the skill fetches a set of visual directions from the impeccable.style catalog. Turning telemetry off doesn't stop that request; it stops the anonymous record of which directions were shown and which one you picked, which is how the catalog learns what works. Your project name, files, code, and PRODUCT.md are never sent. Disable telemetry with npx impeccable telemetry off, DO_NOT_TRACK=1, or "telemetry": false in .impeccable/config.json for the whole project. The full list of what is sent is on the privacy page.

Community

• Issues for bugs, questions, and ideas. Outside contributions start with an issue; see DEVELOP.md.
• Changelog for what shipped.
• Follow @pbakaus for release notes and new rules.

Sponsors

Thanks to Namespace for sponsoring Impeccable's CI with fast Linux and Windows runners.

License

Apache 2.0. See LICENSE. Impeccable started from Anthropic's frontend-design skill.

Created by Paul Bakaus