---
name: uidetox
description: Eliminates AI slop from frontend code. Combines design taste enforcement, anti-pattern detection, and structured remediation. Use this skill whenever generating or reviewing HTML, CSS, React, Vue, Svelte, or any frontend UI code.
---

# UIdetox — Combined Design Skill

## 1. ACTIVE BASELINE
* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
* MOTION_INTENSITY: 6 (1=Static, 10=Cinematic Physics)
* VISUAL_DENSITY: 4 (1=Art Gallery, 10=Pilot Cockpit)
**RULE**: Use these default values to drive logic. Adapt only if user explicitly requests otherwise.

---

## 2. DESIGN DIRECTION

Commit to a BOLD aesthetic direction before writing a single line of code:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, industrial/utilitarian. There are infinite flavors.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Then implement working code that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

---

## 3. DESIGN ENGINEERING (Bias Correction)
LLM UI cliché biases must be overridden by these rules:

**R1: Typography**
* BANNED: `Inter`, `Roboto`, `Arial`, system sans. 
* REQUIREMENT: Use unique display fonts (`Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`).
* Headlines: Large, tight tracking, reduced line-height.
* Body: 14-16px, ~65 characters max width, generous line-height.
* Numbers: Monospace or tabular-nums for data.

**R2: Color**
* Restriction: Max 1 Accent Color. Saturation < 80%.
* BANNED: Purple/blue gradients, neon-on-dark. (AI fingerprints).
* USE: Absolute neutral bases (Zinc/Slate) + high-contrast singular accents.
* RULE: Gray on colored background = BANNED. Use shades of the bg color.
* RULE: Pure `#000000` = BANNED. Use off-black (zinc-950).
* RULE: No gradient text unless explicit.

**R3: Layout**
* BANNED (if Variance > 4): Centered Heros. Force Asymmetric, Split-Screen grids.
* BANNED: Generic "3 equal cards" row. Use zig-zag or masonry.
* Container: max-width 1200-1440px + auto margin.
* Avoid Flex-math; use CSS Grid.
* BANNED: Overused identical spacing (`p-4` five times). Mix scales.

**R4: Materiality**
* BANNED (if Density > 7): Generic cards for everything. Use negative space/dividers.
* BANNED: Glassmorphism as decoration. (If used, add 1px `border-white/10` inner border + inner shadow).
* BANNED: Opacity abuse (layering `opacity-50`). Use solid surface colors.

**R5: Interactions**
* MUST ADD: Hover (scale/color shift), Focus (ring), Active (`scale-98`), Loading (skeletons, no spinners).

**R6: Forms**
* Label above input. Error below input. Clear primary vs ghost CTAs.

---

## 4. ANTI-PATTERN BAN LIST
If you use these, it is a failure. Pick the clean, non-lazy alternative.
- ❌ Oversized rounded corners (20-32px everywhere)
- ❌ Floating glassmorphism shells
- ❌ Decorative sidebar blobs/glows/blurred orbs
- ❌ Metric-card grid as default dashboard
- ❌ Fake charts filling space
- ❌ Generic startup copy ("Elevate", "Next-Gen")
- ❌ `Jane Doe`, `Acme Corp`, 50% numbers. Use real contextual data.
- ❌ Bounce/elastic easing
- ❌ Gray text on colored backgrounds
- ❌ Identical card grids (icon+heading+text x3)

**CSS Ban:** `0 24px 60px rgba(0,0,0,0.35)`, gradient borders, `opacity-50` layered, `width: 33.33%` flex math.

---

## 5. CREATIVE ARSENAL 
Reach for these high-end patterns instead of generic UI:
* **Nav:** Mac Dock Magnification, Gooey Menu, Magnetic Buttons, Dynamic Island.
* **Layout:** Bento Grid, Masonry, Split Screen Scroll, Chroma Grid borders.
* **Cards:** Parallax Tilt tracking mouse, Spotlight Reveal borders.
* **Motion:** Sticky Scroll Stack, Zoom Parallax, Liquid Swipe wipes.
* **Micro:** Mesh gradients, Text Scramble effect, Particle explosion CTAs.

---

## 6. MOTION ENGINE
* NEVER use bounce or elastic easing. Use exponential (`ease-out-expo/quart`).
* Target 100-200ms for hover, 300-500ms for layout.
* Only animate `transform` and `opacity`. Layout animating is BANNED.
* IF INTENSITY > 5: Embed subtle continuous micro-animations. Stagger children.
* IF INTENSITY > 7: Add spring physics UI elements pulling to cursor.

---

## 7. EXECUTION PROTOCOL & LAZINESS FIX
* BANNED STRINGS: `// ...`, `// rest of code`, `// TODO`, "Let me know if you want me to continue".
* Write ALL deliverables completely. NO SKELETONS.
* Check `package.json` BEFORE importing 3rd party libs.
* Types MUST strictly match backend DTOs.
* ALL errors mapped to physical UI states. No silent catches.
* Emojis BANNED in UI/code. Use SVG/Lucide/Phosphor.

## 8. CURATED PALETTES
Dark Bases: `#0f172a`, `#0a0e27`, `#121212`.
Light Bases: `#fafafa`, `#f5f5f4`, `#f0f9ff`.
Accents: Electric Cyan (`#00e0ff`), Rose (`#f43f5e`), Emerald (`#059669`).
(Never mix cool greys with warm greys).

---

---

## 11. REFERENCE FILES

For deep-dive guidance, consult these reference files:

| File | Covers |
|------|--------|
| [typography](reference/typography.md) | Type systems, font pairing, modular scales, OpenType |
| [color-and-contrast](reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility |
| [spatial-design](reference/spatial-design.md) | Spacing systems, grids, visual hierarchy |
| [motion-design](reference/motion-design.md) | Easing curves, staggering, reduced motion |
| [interaction-design](reference/interaction-design.md) | Forms, focus states, loading patterns |
| [responsive-design](reference/responsive-design.md) | Mobile-first, fluid design, container queries |
| [ux-writing](reference/ux-writing.md) | Button labels, error messages, empty states |
| [anti-patterns](reference/anti-patterns.md) | Consolidated AI slop ban list |
| [color-palettes](reference/color-palettes.md) | Curated dark/light color schemes |
| [creative-arsenal](reference/creative-arsenal.md) | Advanced design concepts |

---

## 9. AI SLOP CHECKLIST
Before ending generation:
- [ ] No `Inter`/system sans?
- [ ] No Purple/blue neon AI gradients?
- [ ] Hover/Focus/Active/Loading states implemented?
- [ ] Clean card design (not overused or glowing)?
- [ ] No fake `Jane Doe` content?
- [ ] Checked `package.json` for deps?
- [ ] Types match Backend DTOs? 
- [ ] NO LAZY PLACEHOLDERS?

