Design guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.
Claude Code
> /plugin marketplace add pbakaus/impeccable> /plugin install impeccable@impeccable
Codex
$ npx skills add pbakaus/impeccable -a codex
Cursor
$ npx skills add pbakaus/impeccable -a cursor
Gemini CLI
$ npx skills add pbakaus/impeccable -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add pbakaus/impeccable$ copilot plugin install impeccable@impeccable
OpenCode
$ npx skills add pbakaus/impeccable -a opencode
Windsurf
$ npx skills add pbakaus/impeccable -a windsurf
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.
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.
/impeccable bolder the pricing cards loads a playbook written for that one move and points it at one target.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).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
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.
| 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.
/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.
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.
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/.
Claude Code, Copilot, and Grok plugins
Claude Code: /plugin marketplace add pbakaus/impeccable, then open /plugin and install Impeccable.
GitHub Copilot in VS Code: install Impeccable from the Visual Studio Marketplace or run code --install-extension renaissance-geek.impeccable. Needs VS Code 1.109.3+, Copilot Chat, and a trusted workspace. It installs the skill without the hook. Details.
Grok Build: grok plugin install pbakaus/impeccable#plugin --trust installs the skill, agents, and hook.
Git submodule (a pinned version for the whole team)
git submodule add https://github.com/pbakaus/impeccable vendor/impeccable
npx impeccable link --source=vendor/impeccable --providers=claude,cursor
Commit .gitmodules, the submodule, and the generated links. Teammates run git submodule update --init --recursive. To upgrade, run git submodule update --remote vendor/impeccable, rerun the link command, and commit. Linking installs skills, not hooks. Existing skill folders stay put unless you pass --force.
Manual copy, no Node required
Download the ZIP for your tool from impeccable.style, or clone this repo: each tool's build is committed at the repo root. Copy skills/impeccable from the folder below into the same place in your project, or into the global folder.
| Tool | Repo folder | Global skills folder |
|---|---|---|
| Claude Code | .claude/ | ~/.claude/skills/ |
| Cursor | .cursor/ | |
| Codex CLI, Replit Agent | .agents/ | ~/.agents/skills/ |
| Devin | .devin/ | ${XDG_CONFIG_HOME:-$HOME/.config}/devin/skills/ |
| GitHub Copilot | .github/ | |
| Gemini CLI | .gemini/ | |
| Google Antigravity | .agent/ | ~/.gemini/config/skills/ |
| OpenCode | .opencode/ | |
| Grok Build | .grok/ | ~/.grok/skills/ |
| Hermes Agent | .hermes/ | ${HERMES_HOME:-$HOME/.hermes}/skills/ |
| DeepSeek Harness | .dsh/ | ${DSH_HOME:-$HOME/.dsh}/skills/ |
| Pi | .pi/ | |
| Qoder | .qoder/ | ~/.qoder/skills/ |
| Rovo Dev | .rovodev/ | ~/.rovodev/skills/ |
| Mistral Vibe | .vibe/ | ~/.vibe/skills/ |
| Trae | .trae/ | ~/.trae/skills/ |
| Trae China | .trae-cn/ | ~/.trae-cn/skills/ |
For example: mkdir -p your-project/.claude/skills && cp -r .claude/skills/impeccable your-project/.claude/skills/.
Notes:
Stars on GitHub
View @pbakaus’s profileResolves review comments on the current pull request. It fetches unanswered comments from review bots or human reviewers, evaluates each one, fixes real issues, dismisses false positives, and replies to every comment.
@pbakausSee 12 impeccable alternatives
A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.
@nextlevelbuilderTurns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.
@nexu-ioCreates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.
@cathrynlaverySkills that help designers and engineers make better UI animation decisions faster, covering when to animate, which properties and curves to use, keeping web motion within the frame budget, and React Native and Expo animation.
@emilkowalskiInstall it with the command on its page. It includes impeccable. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it