Impeccable: A Tailor's Tape for Off-the-Rack AI Design – Catching Slop With 62 Rules

Last week we used SkillSpector to inspect agent skills before installing them. This week's skill cares about manners, not safety. Ask an agent for a landing page and you know what comes back: Inter, a purple-to-blue gradient, cards inside cards, a rounded icon tile above every heading. Change the model, change the project, and the outfit stays the same. It is off-the-rack clothing: well stitched, fits fine, and three other people on the street are wearing it.

This week's radar entry is Impeccable, which brings a tailor's tape measure to that rack. It stood at 100.8k stars on 3 November, and its 11,754 stars that week was the highest figure I saw on GitHub's weekly Trending list. A tape measure finds a bad seam. It cannot tell you whether the suit suits you. That gap is what this post is about, along with what an exit code of 0 can hide.

What is Impeccable?#

Impeccable is an Apache-2.0 skill and CLI package that gives coding agents a shared design vocabulary (23 commands such as polish, bolder, critique and audit) and a 62-rule "AI slop" detector that runs without a model. It supports 19 tools, including Claude Code, Codex CLI, Cursor, GitHub Copilot, Gemini CLI, OpenCode and Google Antigravity.

There are two halves. The commands are how you talk to the tailor: /impeccable bolder the pricing cards loads instructions written for that one move, where "make it pop" leaves the agent guessing. The detector is the tape measure: no LLM, no API key, just deterministic rules.

Install and first scan#

# Skill plus hook, from the project root; asks about tools and scope
npx impeccable install
# Then inside your agent: /impeccable init ($impeccable init on Codex)
​
# Detector only, no agent
npx impeccable detect --list-rules
npx impeccable detect http://localhost:5173
npx impeccable detect --json --viewport 390x844 https://staging.example.com/
npx impeccable detect --github src/

Full disclosure: I did not run it. The permission layer of my working environment refused to execute the external package. Everything below comes from reading the source just after 4.8.0 (commit 9fadc41), the README and the official docs. URL scans need Chrome or Edge on the machine.

The 62 measurements#

I counted the rule registry: 31 "slop", 31 "quality". Sixteen are advisory, so they show up in the report without changing the exit code. A few examples:

• overused-font: Inter and Roboto, but also Arial and Helvetica, plus the newer wave of Geist, Fraunces and Space Grotesk.
• side-tab: a thick colored stripe down one side of a card. The rule text calls it the most recognizable tell of an AI-generated interface.
• aphoristic-cadence: a copy rule. It fires when three or more sections land on a short contrarian one-liner.
• low-contrast, tiny-text, skipped-heading: the quality side. The boring half, and the most useful one.

Hard truth: slop rules are, by definition, a fashion list. Inter is not flagged for being a bad typeface, it is flagged for being everywhere. If it is your brand font, do not fight the rule. Record the exception with a reason:

npx impeccable ignores add-value overused-font Inter --reason "Brand font"

What does exit code 0 tell you?#

The codes are clear: 0 means no primary findings, 2 means primary findings, 1 means at least one target could not be scanned. The trap is a cousin of the empty table in the Moli post. Source files such as JSX, TSX, Vue, Svelte and Astro only get the regex rules; low-contrast, tiny-text and other rules that need a parsed page do not run on them. In text mode the tool admits it: "findings are an undercount, not a clean bill of health".

Technical detail: that note only prints in text mode. In the code it is skipped under --json, --quiet and --github. So when detect --github src/ goes green in CI, contrast may never have been checked, and nothing tells you.

PHP has a second hole. The default extension list includes .blade.php but not .php, .volt or .twig. On a framework-free PHP or Volt project, detect src/ walks straight past your templates. The docs give this setting for server-side templates:

{
  "detector": {
    "extensions": [
      { "ext": ".volt", "engine": "html" },
      { "ext": ".twig", "engine": "html" }
    ]
  }
}

I have not tested how Volt's curly braces fare in that engine. For server-rendered pages the clean route is a URL scan anyway, because the browser sees the real HTML and the real styles.

Gate on URLs, not source#

I wanted a gate that accepts URLs only, scans at desktop and phone width, keeps "could not scan" apart from "found something", and counts advisories without stopping. Plain, framework-free PHP:

<?php
​
declare(strict_types=1);
​
/**
 * Runs pages through Impeccable at two widths.
 * Usage: php design-gate.php https://staging.example.com/ https://staging.example.com/pricing/
 * Exit: 0 pass, 1 findings, 2 scan failed.
 */
​
$command = getenv('IMPECCABLE_COMMAND') ?: 'npx impeccable';
$urls = array_slice($argv, 1);
$viewports = ['1280x800', '390x844'];
​
if ($urls === []) {
    fwrite(STDERR, "Give at least one URL.\n");
    exit(2);
}
​
$findings = [];
$notes = 0;
​
foreach ($urls as $url) {
    // A source folder would quietly loosen the gate: only regex rules run there.
    if (!preg_match('#^https?://#i', $url)) {
        fwrite(STDERR, "URLs only, not source: {$url}\n");
        exit(2);
    }
​
    foreach ($viewports as $viewport) {
        $line = sprintf('%s detect --json --viewport %s %s', $command, $viewport, escapeshellarg($url));
        $process = proc_open($line, [1 => ['pipe', 'w'], 2 => ['pipe', 'w']], $pipes);
​
        if (!is_resource($process)) {
            fwrite(STDERR, "Could not start the process.\n");
            exit(2);
        }
​
        $output = (string) stream_get_contents($pipes[1]);
        $error = (string) stream_get_contents($pipes[2]);
        $code = proc_close($process);
        $list = json_decode($output, true);
​
        // 0 clean (notes possible), 2 findings, 1 or anything else: not scanned.
        if (!in_array($code, [0, 2], true) || !is_array($list)) {
            fwrite(STDERR, "Not scanned ({$code}): {$url} @ {$viewport}\n" . trim($error) . "\n");
            exit(2);
        }
​
        foreach ($list as $finding) {
            if ($finding['advisory'] ?? false) {
                $notes++;
                continue;
            }
​
            $findings[] = sprintf('%s @ %s: %s', $url, $viewport, $finding['antipattern']);
        }
    }
}
​
echo count($findings) . " findings, {$notes} notes\n";
​
foreach (array_unique($findings) as $row) {
    echo "  {$row}\n";
}
​
exit($findings === [] ? 0 : 1);

php -l is clean. I ran the script through seven scenarios against a fake CLI I wrote from the JSON fields in the source: clean page 0, advisory only 0, primary finding 1, scan failure 2, broken JSON 2, folder path 2, no arguments 2. It has not met real Impeccable output.

When it helps and when it doesn't#

It helps on an existing interface with a narrow target. The README says this is where it is strongest, and calls new pages the harder mode. The part that matters most is the hook, because the detector no longer depends on someone remembering to run it. On Claude Code and Codex the immediate rules run after each edit and the full set at the end of the turn; on Cursor and Copilot the full detector runs after every edit. Just do not confuse it with the gatekeeper from chapter 4.2: in the current version this hook never stops an edit, it whispers a reminder to the agent. The gate is a step like the script above.

It doesn't help outside the web: the detector hands iOS and Android to the audit command. If you have an established design system and skip DESIGN.md, the tape measure will argue with you. And no rule answers whether the page solves the user's problem.

Three costs to know before you install:

1. The hook is unsandboxed. It runs with the agent's environment and network access. On Claude Code it fires even when you deny the model's commands, and the first edit can download the engine. The binary is checked against digests committed in the repo.
2. Telemetry is on by default. npx impeccable telemetry off or DO_NOT_TRACK=1 turns it off. Project names and code are not sent, but the catalog request at the start of a new design still goes out with telemetry off.
3. Apply in live mode. If no agent has polled the chat in the last minute, it launches codex, or claude if that is missing, with approvals off (--dangerously-bypass-approvals-and-sandbox, bypassPermissions). I saw this in the code, and the README does not hide it. On a client repo, set IMPECCABLE_LIVE_COPY_AGENT=chat or off first.

Maintenance and credit#

Paul Bakaus built it (GitHub). He created jQuery UI, led developer relations for AMP at Google, and now runs Renaissance Geek, the company behind Impeccable. His own site says it raised a seed round led by a16z. I saw no pricing or paid plan on the site and could not confirm the business model.

Alternatives at a glance#

The short version: a living admin panel goes to Impeccable; a blank page that has to become a showcase goes to Hallmark or Taste Skill. If accessibility is your responsibility, keep axe-core, because as I said in the Open Code Review post, these sit next to each other rather than replacing one another. Even axe-core says it finds an average of 57% of WCAG issues automatically. The rest is human work.

Where it fits in daily work#

On a Bootstrap 5 and Vue admin panel with Volt or plain PHP templates, a source scan tells you little. The right place is staging: when the agent finishes a new screen, design-gate.php runs those URLs at two widths. On day one, do not treat fashion rules like overused-font as errors; record exceptions with reasons. Keep quality rules such as contrast, tiny text, overflow and skipped heading levels at the gate.

A tailor reads the tape, but you choose the cloth. Impeccable catches the agent's off-the-rack habit without billing you for a model. Who the page serves is still your call, and an exit code of 0 does not make that call for you. Stay with technology.