---
name: clean-ui-engineering
description: Enforce human-grade, clean, production-ready frontend UI and strictly avoid AI slop aesthetics.
---

# Clean UI Engineering & Anti-Slop Guidelines

Whenever generating frontend UI (HTML/Tailwind/CSS/Blade/React):

### 1. STRICT NEGATIVE CONSTRAINTS (NO AI SLOP)
- **NO Generic AI Gradients:** Do NOT use purple-to-pink/cyan gradients, glowing text, or neon backgrounds unless explicitly requested.
- **NO Decorative Noise:** Avoid useless floating badges, random sparkling icons (✨), and empty decorative cards.
- **NO Oversized Padding:** Don't create huge cards with tiny content. Aim for realistic, professional data density.
- **NO Browser Default Typography:** Avoid serif system fonts or unconfigured font pairings.

### 2. DESIGN PRINCIPLES
- **Palette:** Rely on neutral palettes (Slate, Zinc, Gray) with high contrast. Use a single intentional accent color for Primary actions.
- **Borders & Elevation:** Prefer subtle 1px border lines (`border border-neutral-200 dark:border-neutral-800`) over heavy drop shadows.
- **Typography Hierarchy:** Clean font sizing, `tracking-tight` on headings, muted subtle colors (`text-neutral-500`) for secondary metadata.
- **Component Inspiration:** Design should feel like Linear.app, Vercel dashboard, Stripe, or GitHub — clean, purposeful, developer-focused, and fast.