Files
pbakaus_impeccable/site/content/reference/detector.md
T
Paul BakausandGitHub 51d01e3a5f [codex] Add design-aware detector rules (#252)
* Add design-aware detector rules

* Fix design-aware detector noise

* Unify CLI and hook detector ignores

* Fix remaining design-system review findings

* Add detector ignore CLI

* Fix design detector review findings

* Fix design color source false positives

* Fix core test suite registration

* Add design-aware detector docs

* Fix font priority design-system parsing

* Fix color ignore value matching
2026-06-15 21:06:17 -07:00

4.2 KiB

title, tagline, description, section, order
title tagline description section order
Detector CLI Run Impeccable's deterministic design checks without an AI harness. Use npx impeccable detect on files, directories, stdin, and URLs; understand findings, exit codes, ignores, and design-system-aware checks. automation 1

npx impeccable detect runs Impeccable's deterministic design checks directly from the terminal. Use it when you want a fast signal without asking an AI command to review the work.

Fast path

Scan the source folder:

npx impeccable detect src/

Scan one file:

npx impeccable detect src/components/Card.tsx

Scan a rendered page:

npx impeccable detect https://example.com

Use JSON when another script or CI job needs to read the result:

npx impeccable detect --json src/

What it checks

The detector looks for design and implementation patterns that are usually visible to users: contrast problems, typography drift, layout overflow, generic AI-design tells, brittle motion, and design-system violations when DESIGN.md exists.

Directories are walked for design-relevant files. HTML files include linked local CSS. Framework files such as JSX, TSX, Vue, Svelte, Astro, and CSS modules get source-text checks. URL targets use a browser and inspect the rendered page.

How to read results

Plain output groups findings by file and prints the rule id, snippet, and explanation. Exit codes are:

Code Meaning
0 No findings.
2 Findings were detected.
1 The command failed.

That makes CI usage straightforward: fail the job on 2, then decide whether to fix the issue or add a narrow ignore.

DESIGN.md awareness

When a local DESIGN.md exists, detect loads it by default and enables design-system checks for fonts, literal colors, and border radii. The generated .impeccable/design.json sidecar gives those checks richer token and ramp data.

If the design file is stale, refresh it:

/impeccable document

If you need one scan without design-system checks:

npx impeccable detect --no-design-system src/

Managing intentional findings

Detector ignores are shared with the design hook:

npx impeccable ignores list
npx impeccable ignores add-value overused-font Inter --reason "Brand font"
npx impeccable ignores add-file "src/legacy/**"

Use Config and ignores for the full ignore workflow.

Details when the default path is not enough

Scan stdin

If you pipe text into the command with no target, it scans stdin:

cat component.css | npx impeccable detect
Project config and raw scans

By default, detect reads .impeccable/config.json and .impeccable/config.local.json.

It respects detector.ignoreRules, detector.ignoreFiles, detector.ignoreValues, and detector.designSystem.enabled.

It does not respect hook.enabled; manual scans still run when the automatic hook is disabled.

Use --no-config only when you want a raw detector run with no project config, no detector ignores, and no DESIGN.md context.

Provider-specific checks

Some rules are provider-specific and opt in:

npx impeccable detect --gpt src/
npx impeccable detect --gemini src/

Leave them off for normal project quality checks. Turn them on when you specifically want to catch model-family fingerprints.

Where the detector fits

The same detector also powers the design hook, /impeccable audit, the public slop catalog, the browser extension, and the local detector lab.

Use Design hooks when you want findings inside the agent flow. Use detect when you want a direct terminal signal.