Give Your Coding Agent a Design Vocabulary With Impeccable

Skip design guidance and every AI-built landing page shows the same tells: Inter for everything, a purple-to-blue gradient, cards nested inside cards, gray text on a colored background, the rounded-square icon tile above every heading. Impeccable is a 92k-star skill by Paul Bakaus that gives your coding agent a shared design vocabulary — 24 named commands plus 62 deterministic detector rules — so design feedback becomes something the agent can act on, not a mood you describe.

Why This Skill Matters

The README is blunt about the cause: every model trained on the same SaaS templates, so skipping design guidance reproduces the same tells on every project. That is why a vague nudge like "make it pop" gives the model nothing to steer with.

Impeccable ships one skill, 24 commands, live browser iteration, and 62 detector rules. The commands (polish, audit, critique, bolder, quieter, distill, and more) give you and the agent a common vocabulary, while the detector CLI and browser extension run the rules with no LLM and no API key. It started from Anthropic's frontend-design skill, the first widely-used design skill for Claude.

Installation

From your project root:

npx impeccable install

The installer shows the harness folders or installed CLIs it detected (for example ~/.claude, ~/.codex, or a project-local .cursor), lets you keep or customize the set, and asks whether to install into the current project or globally. It also installs a provider-native hook manifest on Claude Code, GitHub Copilot, Codex, Cursor, and Grok Build, so design findings surface after your edits (on Stop for Grok Build). Then run /impeccable init inside your AI coding tool. To refresh an existing install, run npx impeccable update.

Claude Code users can install it as a plugin instead:

/plugin marketplace add pbakaus/impeccable

Then open /plugin and install Impeccable from the list. The README documents more paths — a git submodule for vendored installs, a VS Code extension for GitHub Copilot, manual copies for many harnesses — and notes that the manual-copy commands are fallback/debug instructions, with npx impeccable install as the normal path.

Codex users should open /hooks after install or update and approve the project hook when prompted. On Claude Code, installed hooks run independently of model-tool approval; the README advises reviewing installed hooks before unattended runs.

Real Workflow: Polish a Dashboard Before Shipping

1. Run /impeccable init. It inspects the project, asks only for material gaps in durable product truth, and writes PRODUCT.md — so later commands know the audience, purpose, operating context, constraints, voice, and evidence.
2. Run /impeccable document to generate a root DESIGN.md from the existing code, so the incumbent visual system is recorded separately from product facts.
3. Fix a concrete surface. Say /impeccable polish settings for a final design-system pass, or /impeccable critique landing for a UX review of hierarchy, clarity, and emotional resonance. Most commands accept a target: /impeccable audit the header.
4. Check the result mechanically. npx impeccable detect src/ scans a directory with the 62 deterministic rules and no model involved. Exit code 0 means no primary findings; 2 means findings; 1 means a target could not be scanned. --json gives CI-friendly output and --github emits GitHub Actions annotations.

The README documents 18 supported tools, including Cursor, Claude Code, Codex CLI, Gemini CLI, Devin, OpenCode, and Google Antigravity.

One disclosure: the README's manual-copy commands reference a dist/ directory that is gitignored in the repository, so a fresh clone does not contain it (as of 2026-10-29). That is consistent with the README's own framing of manual copies as fallback/debug instructions.

Tips

• Use /impeccable pin audit to create a standalone /audit shortcut if you run one command often.
• Read the anti-patterns list the skill ships: no overused fonts (Arial, Inter, system defaults), no gray text on colored backgrounds, no pure black or gray (always tint), no wrapping everything in cards or nesting cards inside cards, no bounce/elastic easing.
• The detector is evidence, not proof. The README states a clean run does not replace inspecting the rendered experience across relevant viewports.
• Telemetry is on by default for the visual-world roll API, sending only anonymous roll records — never your files or code. Turn it off with npx impeccable telemetry off, DO_NOT_TRACK=1, or IMPECCABLE_NO_TELEMETRY=1.
• Live mode edits a local checkout through a dev server or local static HTML only. A deployed site can only be inspected — with npx impeccable detect https://example.com or the browser extension — with no live editing and no write-back to your source.

When Not to Use This

Impeccable steers frontend design; it does not design your product. init records product truth, but the audience, constraints, and voice still come from you. Live mode is local-only by design — the README says not to weaken production CSP to force it onto a deployed site. And if you have no AI harness at all, the README documents the standalone detector CLI for exactly that case — the 24 commands, by contrast, run through the /impeccable skill.

See the leaderboard for more skills.