Files
pbakaus_impeccable/README.npm.md
T
444e4acad3 Detector: add italic-serif display headline + hero eyebrow chip rules (#127) (#129)
* feat(detector): flag italic-serif display heroes and uppercase eyebrow chips (#127)

Two new rules covering the structural tells of late-2025/early-2026
AI-generated marketing pages.

- italic-serif-display: oversized italic serif (Fraunces, Recoleta,
  Newsreader, Playfair, Cormorant, Tiempos, ...) as the primary hero
  headline. Anchored on h1 (or h2 at >= 48px) with font-style: italic
  and a serif primary face.
- hero-eyebrow-chip: uppercase letter-spaced label sitting as the
  previousElementSibling of a hero h1 (font-size >= 48px). Bounded
  text length 2-30 chars, letter-spacing >= 1.6px, font-size <= 14px.
  The pill-chip variant (background + border-radius: 999px) falls out
  of the same gates for free.

Both follow the existing icon-tile-stack pattern: pure check function +
browser DOM adapter + jsdom adapter, wired into both element loops.
Two-column fixtures (4 flag / 6 pass each) drive the jsdom tests.

Skill copy in source/skills/impeccable/reference/typography.md and
critique.md calls out the patterns by name. The italic-serif rule's
description acknowledges that editorial/magazine register may legitimately
want the pattern -- judge by context.

Closes #127

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* Add sandbox gotchas for Codex

* Trim verbose detector skill copy

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Paul Bakaus <paulbakaus@pauls-mbp-3.lan>
2026-05-02 12:01:43 -07:00

77 lines
2.3 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 27 specific patterns 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
# Update skills to the latest version
npx impeccable skills update
# 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/
# Regex-only mode (faster, no jsdom)
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
25 detections in total. See the full list at [impeccable.style](https://impeccable.style).
## 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 18+
- `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 22 steering commands for Claude, Cursor, Gemini, Codex, and more.
## License
[Apache 2.0](https://github.com/pbakaus/impeccable/blob/main/LICENSE)