vibe-check

vibe-check

Detect AI-generated slop in web projects -- Scans CSS, Tailwind, and JSX for 18 signals of AI-generated design patterns

vibe-check is a static analysis tool that detects AI-generated "slop" in web projects. It analyzes your CSS, Tailwind classes, JSX/TSX files, project structure, and dependency graph to identify 18 telltale signals of AI-generated design patterns -- from gradient overload and emoji infestation to scaffold bloat and dead dependencies.

---

Quick Start

Get up and running in under 2 minutes:

1. Install as Claude Code Plugin

/plugin marketplace add https://github.com/edwingao28/vibe-check.git
/plugin install vibe-check

2. Run Your First Scan

In Claude Code:

# Smart scope scan (auto-detects src/, client/src/, frontend/, etc.)
/slop-check

# Scan a specific directory
/slop-check apps/marketing

# Full project scan with verbose output
/slop-check --full --verbose

As standalone CLI:

slop-scan
slop-scan apps/marketing
slop-scan --full --verbose

3. Review Results

Terminal Output: Structured JSON with scores, signals, and evidence Markdown Report: slop-report.md generated automatically with fix suggestions

---

What It Detects

18 AI Slop Signals organized into 4 categories:

Typography & Color (Tier 1, weight 1.0)

• Purple Plague -- Overuse of purple/violet gradients (AI's favorite color)
• Font Crime -- Ultra-thin fonts (font-weight <= 200)

Spacing & Effects (Tier 1, weight 1.0)

• Gradient Overload -- Excessive gradient backgrounds (grouped by proximity)
• Whitespace Wasteland -- Low entropy in spacing values
• Shadow Realm -- Overuse of box-shadow effects
• Border Radius Maximum -- Everything is rounded (border-radius > 20px)

Content (Tier 2, weight 0.8)

• Buzzword Bingo -- AI marketing jargon ("revolutionary", "cutting-edge", "seamless")
• Hero Syndrome -- Generic hero sections with buzzword headings
• Placeholder Content -- NEW Fake names, lorem ipsum, placeholder metrics ($99.99/mo, 10,000+)
• Emoji Infestation -- Decorative emojis everywhere
• Testimonial Factory -- Generic fake testimonials with attribution patterns
• Card Carnival -- Repeated heading+paragraph card patterns
• Stock Photo Syndrome -- Unsplash/Pexels/placeholder image URLs

Structure (Tier 2, weight 0.8)

• Cookie Cutter Layout -- Identical page structures (UI library files excluded)
• CTA Mania -- Excessive call-to-action buttons (app buttons filtered, marketing vs app thresholds)
• Scaffold Bloat -- NEW Excessive UI library components vs custom code (e.g., 47 shadcn components vs 4 custom)
• AI Scaffold Signature -- NEW Detects Replit, Bolt, v0, Lovable, Cursor artifacts
• Dead Dependency -- NEW Heavy packages installed but never imported (framer-motion, three.js, recharts, etc.)

---

Usage

Basic Commands

In Claude Code:

# Smart scope detection (checks src/, client/src/, apps/web/, etc.)
/slop-check

# Scan specific directory or file
/slop-check src/components
/slop-check apps/marketing/landing.tsx

# Full project scan (ignores smart scope)
/slop-check --full

# Verbose output with all evidence and file:line references
/slop-check --verbose

# Raw JSON output only (no markdown report)
/slop-check --json

Standalone CLI:

slop-scan [same options as above]

CLI Flags

Flag	Description
--verbose	Full signal details, all evidence, file:line references
--json	Raw JSON output (schema v1)
--full	Scan entire project (ignore smart scope detection)
--deep	(No-op in v1) Enable LLM-assisted Tier 2 deep scan
--no-cache	(No-op in v1) Disable cache for this run
--help	Show help message

Scope Resolution Priority

vibe-check auto-detects your frontend source directory:

1. User-specified path -- uses it directly
2. --full flag -- scans entire project root
3. Smart UI scope -- checks in priority order:
   • Standard layouts: src/, client/src/, frontend/src/, web/src/
   • Monorepo patterns: apps/web/src/, apps/frontend/src/, packages/ui/src/
   • Fallback: Scans app/, components/, pages/, public/, styles/ at root

---

Understanding Scores

Overall Slop Score (0-100)