Design detector#

Deterministic linter for AI-generated front-end design tells (gray-on-color, low contrast, side-stripe borders, bounce/elastic easing, gradient text, overused fonts, ghost-card shadows, over-rounding, …) plus design-system drift against our DESIGN.md.

Vendored from Impeccable by Paul Bakaus, Apache-2.0 (SPDX headers preserved in source). This is the detector engine only — the upstream skill/command workflow is not vendored. Our adapted design guidance lives in the frontend-design skill (.polytoken/skills/frontend-design/) and Confluence (space PM, Front-end design guidance).

Usage#

# Static scan of our CSS (plain Node, no browser)
node tools/design-detector/detect.mjs --json assets/styling/

# Scan a rendered route (drives a real browser; needs `just serve` running)
node tools/design-detector/detect.mjs --json http://localhost:8080

Exit code 0 = clean, 2 = findings. JSON entries carry antipattern, severity (advisory/warning), file, line, snippet.

Coverage notes#

• Scans CSS and rendered HTML — it does not parse .rs RSX. Treat a clean CSS scan plus a rendered-route scan as the coverage; rely on the frontend-design skill checklist for RSX-level structure.
• design-system-* findings (radius/color outside our scale) are powered by the token frontmatter in repo-root DESIGN.md. Keep DESIGN.md in sync with assets/styling/theme.css for those checks to stay meaningful.
• Scratch/config (.impeccable/) is gitignored.

Updating#

Re-vendor from upstream by copying skill/scripts/detector/, skill/scripts/lib/, skill/scripts/context.mjs, and skill/scripts/detect.mjs (the detector's transitive closure) over this directory. Don't hand-edit the engine.