# Impeccable

> A design skill for AI coding agents: 24 /impeccable commands, live browser iteration and a 62-rule detector for AI-generated frontend tells

- Category: Agents & Automation / Agent Skills & Plugins
- Language: Rust
- Licence: Apache-2.0
- Repository: https://github.com/pbakaus/impeccable
- Website: https://impeccable.style
- Canonical page: https://ai-tldr.dev/tools/impeccable/

## In short

Impeccable is an open-source design skill for AI coding agents, created by Paul Bakaus and released under the Apache 2.0 license. Its README describes it as design guidance for agents: one skill, 24 commands, live browser iteration and 62 deterministic detector rules for AI-generated frontend design. It sits in the Agent Skills & Plugins category of the Agents & Automation tools and is open-source, written in Rust and licensed Apache-2.0.

## Overview

Impeccable is an open-source design skill for AI coding agents, created by Paul Bakaus and released under the Apache 2.0 license. Its README describes it as design guidance for agents: one skill, 24 commands, live browser iteration and 62 deterministic detector rules for AI-generated frontend design. It started from Anthropic's frontend-design skill and targets the tells that appear when every model learns from the same SaaS templates — Inter for everything, purple-to-blue gradients, cards nested inside cards, gray text on colored backgrounds.

Everything runs through a single `/impeccable` skill. `/impeccable init` inspects the project and writes `PRODUCT.md` with durable facts about audience, purpose, constraints and voice; `/impeccable document` records the visual system in `DESIGN.md`. The commands then give the agent a shared design vocabulary: `shape` and `craft` plan and build new surfaces, `critique` and `audit` review UX and technical quality, `polish`, `typeset`, `layout`, `distill`, `bolder` and `quieter` adjust existing work, and `live` and `generate` iterate on elements in a running local app. Any command can be pinned as its own shortcut, such as `/audit`.

The detector is the part that needs no model. It ships as a self-contained engine binary that the skill's launcher runs, and it checks 62 rules spanning AI slop (side-tab borders, purple gradients, bounce easing, dark glows) and general design quality (line length, cramped padding, small touch targets, skipped headings). The same engine powers `npx impeccable detect` for directories, HTML files and live URLs — with JSON and GitHub Actions output for CI — a browser extension, and design hooks that `npx impeccable install` adds to Claude Code, GitHub Copilot, Codex, Cursor and Grok Build so findings reach the agent after each UI edit. The skill installs into some 18 agents, from Cursor and Gemini CLI to Hermes Agent, OpenCode, Pi, Kiro and Google Antigravity.

## What it does

- One `/impeccable` skill with 24 commands: craft, init, document, extract, shape, critique, audit, polish, bolder, quieter, distill, harden, onboard, animate, colorize, typeset, layout, delight, overdrive, clarify, adapt, optimize, live and generate
- `PRODUCT.md` and `DESIGN.md` context files, so later commands know the audience, constraints and existing design system
- 62 deterministic detector rules for AI-slop patterns and design quality, run with no LLM and no API key
- `npx impeccable detect` CLI for folders, HTML files and URLs, with `--json` and `--github` output and per-rule, per-file and per-value ignores
- Design hooks for Claude Code, GitHub Copilot, Codex, Cursor and Grok Build that surface detector findings back to the agent
- Live mode that edits a local checkout through the dev server, generating element variants in the browser

## Getting started

Commands come from the project's README. The skill needs no runtime of its own; Node is only used by the npx installer.

1. Install the skill

   Run the installer from your project root. It detects your agents (for example `~/.claude`, `~/.codex` or a project `.cursor` folder), asks whether to install per project or globally, and on supported tools also installs the design hook. In Claude Code you can instead run `/plugin marketplace add pbakaus/impeccable`.

```bash
npx impeccable install
```

2. Record your product context

   Reload your coding tool and run `init` once. It writes `PRODUCT.md`, which every later command reads.

```text
/impeccable init
```

3. Review and refine a surface

   Most commands take an optional target describing the area to work on. Type `/impeccable` alone to see the full list.

```text
/impeccable audit blog
/impeccable critique landing
/impeccable polish settings
/impeccable harden checkout
```

4. Scan without an agent

   The detector also runs on its own, which suits CI. Exit code 2 means the scan found primary findings; `--list-rules` prints the rule catalog.

```bash
npx impeccable detect src/
npx impeccable detect https://example.com
npx impeccable detect --github src/
```

5. Keep it updated

   Refresh the skill and hooks in place. Codex users approve the project hook again under `/hooks` when it changes.

```bash
npx impeccable update
```

## When to use it

- Reach for it when your agent's frontends all look the same — default fonts, purple gradients, nested cards
- Reach for it to give an agent design commands it can follow, like critique, audit, polish or typeset, instead of vague prompts
- Reach for it to fail a pull request on design anti-patterns with `npx impeccable detect --github` in CI
- Reach for it to keep new screens consistent with an existing design system recorded in `DESIGN.md`