Files
pbakaus_impeccable/README.npm.md
T
Paul BakausandClaude Fable 5 cfdb7d4c81 detector: catch pseudo-element side stripes; add pulsing-dot rule
Two gaps surfaced by human eval review of real artifacts:

1. side-tab missed the pseudo-element variant. The accent stripe drawn as
   an absolutely-positioned ::before/::after (left/right: 0, top+bottom: 0
   or height: 100%, narrow width, colored background) uses no border
   property at all, so neither the element-level border checks (pseudo
   elements never enter the static cascade or DOM walk) nor the
   border-left/right regexes could see it. New scanCssTextForPseudoStripe
   scans stylesheet text for that shape, mirroring the border rule's
   gates: >= 3px thick (<= 12px), chromatic fill (var()-resolved, neutral
   dividers skipped), full height against a side edge, with the
   blockquote/prose exemptions preserved.

2. New pulsing-dot rule (slop): small circular "live" indicator dots
   (<= 16px, border-radius >= 40% or pill values) bound to an infinite
   animation whose keyframes vary opacity, scale, or box-shadow — or
   pulse/blink/ping names when the keyframes aren't in the scanned text —
   plus the Tailwind animate-ping/pulse + rounded-full + tiny-size utility
   combo. Rotation-only keyframes (spinners) never flag, including when
   they hide behind a pulse-like name.

Both scanners live in checkHtmlPatterns, so the static-html engine and
the browser bundle share the same detection path. Browser/extension
bundles regenerated; docs rule count bumped to 47.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 19:06:41 -07:00

89 lines
2.7 KiB
Markdown

# Impeccable CLI
Detect UI anti-patterns and design quality issues from the command line. Scans HTML, CSS, JSX, TSX, Vue, and Svelte files for 47 deterministic rules, including AI-generated UI tells, accessibility violations, and general design quality problems.
## Quick Start
```bash
# Install skills into your AI harness (Claude, Cursor, Gemini, etc.)
npx impeccable skills install
# Non-interactive install for a specific scope
npx impeccable skills install -y --providers=claude,codex --scope=project
# First command to run inside your AI harness
/impeccable init
# Update skills to the latest version
npx impeccable skills update
# Install or update skills without hook manifests
npx impeccable skills install --no-hooks
# Link skills from a Git submodule checkout
npx impeccable skills link --source=.impeccable --providers=claude,cursor
# List all available commands
npx impeccable skills help
# Scan files or directories for anti-patterns
npx impeccable detect src/
# Scan a live URL (requires Puppeteer)
npx impeccable detect https://example.com
# JSON output for CI/tooling
npx impeccable detect --json src/
# Deprecated compatibility flag; full scan still runs
npx impeccable detect --fast src/
```
## What It Detects
**AI Slop Tells**: patterns that scream "AI generated this":
- Side-tab accent borders, gradient text on headings
- Purple/violet gradients and cyan-on-dark palettes
- Dark mode with glowing accents, border + border-radius clashes
**Typography Issues**: overused fonts (Inter, Roboto), flat type hierarchy, single font families
**Color & Contrast**: WCAG AA violations, gray text on colored backgrounds, pure black/white
**Layout & Composition**: nested cards, monotonous spacing, everything-centered layouts
**Motion**: bounce/elastic easing, layout property transitions
**Quality**: tiny body text, cramped padding, long line lengths, small touch targets
47 deterministic detector rules in total. See the full catalog at [impeccable.style/slop](https://impeccable.style/slop).
## Exit Codes
- `0`: no issues found
- `2`: anti-patterns detected
## Options
```
impeccable detect [options] [file-or-dir-or-url...]
--fast Regex-only mode (skip jsdom, faster but less accurate)
--json Output findings as JSON
--help Show help
```
## Requirements
- Node.js 22.12+
- `jsdom` (included as dependency, used for HTML scanning)
- `puppeteer` (optional, only needed for URL scanning)
## Part of Impeccable
This CLI is part of [Impeccable](https://impeccable.style), a cross-provider design skill pack for AI-powered development tools. The full suite includes 23 commands for Claude, Cursor, GitHub Copilot, Gemini, Codex, and more.
## License
[Apache 2.0](https://github.com/pbakaus/impeccable/blob/main/LICENSE)