Metadata-Version: 2.4
Name: css-slop-detector
Version: 0.2.0
Summary: Score CSS/HTML for AI-generated design cliches — and auto-fix them with --fix
Author-email: hao li <haoli5933@gmail.com>
License: MIT
Project-URL: Homepage, https://github.com/hahahahahahahahah6/css-slop-detector
Project-URL: Repository, https://github.com/hahahahahahahahah6/css-slop-detector
Keywords: css,ai-slop,design,linter,html
Classifier: Development Status :: 4 - Beta
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python :: 3
Classifier: Topic :: Internet :: WWW/HTTP
Classifier: Topic :: Software Development :: Quality Assurance
Requires-Python: >=3.9
Description-Content-Type: text/markdown
License-File: LICENSE
Dynamic: license-file

# css-slop-detector

Score your CSS/HTML for **AI-generated design cliches** — the "AI slop" look:
oversized border radii, glassmorphism on everything, purple gradients, neon
glows, pure-black dark mode with no light toggle, and giant centered hero
titles.

If AI built your site, this tells you in one number how obvious it is.
**v2 adds `--fix`: a one-click detect-and-fix loop that rewrites the slop
for you** (with backups and dry-run diff previews).

Zero dependencies. Python standard library only.

## Install

```bash
pip install css-slop-detector
```

Or run the single file straight from the repo:

```bash
git clone https://github.com/hahahahahahahahah6/css-slop-detector
cd css-slop-detector
python3 css_slop.py scan style.css
```

Requires Python 3.9+.

## Usage

### Scan

```bash
$ css-slop styles.css
styles.css: score 68/100 (slop)
  L12 [big-radius] oversized border-radius (32px) on '.card'
  L12 [glass] backdrop-filter blur on '.card' (glassmorphism)
  L15 [purple-gradient] purple/violet gradient on '.hero'
  L22 [hero-center] giant centered title (font-size: 72px) on '.hero h1'
  L1 [no-light-mode] dark-only design: near-black backgrounds with no
     light-mode toggle or prefers-color-scheme: light found
```

Works on `.css` files and `.html` files (scans `<style>` blocks and inline
`style="..."` attributes). Machine-readable output with `--json`; fail CI
with `--fail-over 50` (exit 1 when any file scores 50 or higher).

### Fix (v2)

Preview what the fixer would change — writes nothing:

```bash
$ css-slop --dry-run styles.css
styles.css: 7 fixes (big-radius x1, glass x1, glow-shadow x1, hero-center x1,
  no-light-mode x1, pure-black x1, purple-gradient x2) — score 100 -> 0 [dry-run, nothing written]
--- a/styles.css
+++ b/styles.css
...
```

Apply the fixes. The original is backed up to `styles.css.bak` first:

```bash
$ css-slop --fix styles.css
styles.css: 7 fixes (...) — score 100 -> 0 [applied, backup: styles.css.bak]

$ css-slop --restore styles.css   # undo: restore the backup
```

What `--fix` rewrites (only patterns the scanner flags — it de-slops, it
doesn't redesign):

| rule | automatic rewrite |
|---|---|
| `big-radius` | clamp `border-radius` ≥ 20px to `12px` |
| `glass` | remove `backdrop-filter: blur(...)` |
| `purple-gradient` | swap purple/violet stops for neutral slate |
| `glow-shadow` | replace neon glow with a soft `0 4px 6px rgba(0,0,0,0.1)` shadow |
| `pure-black` | lift `#000` surfaces to soft `#1e1e1e` |
| `hero-center` | shrink giant centered titles to `32px`, left-align |
| `no-light-mode` | append a `prefers-color-scheme: light` hook block |

## Rules

| rule | what it flags |
|---|---|
| `big-radius` | `border-radius` ≥ 20px |
| `glass` | `backdrop-filter: blur` |
| `purple-gradient` | purple/violet/indigo/fuchsia gradients |
| `glow-shadow` | colored `box-shadow` with blur ≥ 24px |
| `pure-black` | `#000`-style backgrounds |
| `hero-center` | `text-align: center` + `font-size` ≥ 40px in one rule |
| `no-light-mode` | dark-only design, no light-mode toggle found |

Scores: 0–20 clean, 21–50 mild slop, 51–80 slop, 81–100 peak slop.

## Differentiation

**Generation side vs. detection+fix side.** Tools like
[pbakaus/impeccable](https://github.com/pbakaus/impeccable) (and design-skill
collections like ui-skills or hallmark) teach AI to *generate* better design —
they improve the prompt. This does the opposite: it scores the *finished
product's* AI fingerprints, then **closes the loop with one command** —
`--fix` rewrites the flagged patterns for you, with a diff preview, automatic
backups, and `--restore` to undo. Detect + fix, not just detect.

One file, no dependencies, runs in CI.

## License

MIT
