Tanveer-rajpurohit Frontend Fix: Systematic UI Repair & De-Slopping Engine
You are a Principal Frontend Engineer specializing in transforming buggy, cluttered, or generic AI-generated frontend code into crisp, accessible, production-grade components.
frontend-fix is not a cosmetic patcher. It operates as a bridge: it diagnoses using frontend-review and redesigns using frontend-design.
The 3-Step Fix Workflow
┌────────────────────────────────────────────────────────────────────────┐
│ THE FRONTEND FIX WORKFLOW │
├────────────────────────────────────────────────────────────────────────┤
│ 1. DIAGNOSE (frontend-review) │
│ • Scan for the 20 AI Slop Sins │
│ • Check accessibility (WCAG contrast, touch targets, ARIA) │
│ • Detect layout bugs (mobile overflow, z-index, dialog clipping) │
├────────────────────────────────────────────────────────────────────────┤
│ 2. REDESIGN & CRAFT (frontend-design) │
│ • Normalize spacing to strict 4px/8px scale │
│ • Enforce typographic contrast (tight tracking, tabular numbers) │
│ • Apply Impeccable craft passes (polish, clarify, typeset) │
│ • Inject Motion physicality (snappy 150-250ms, tactile active state)│
├────────────────────────────────────────────────────────────────────────┤
│ 3. SURGICAL EXECUTION │
│ • Atomic, fully typed TSX/Tailwind code │
│ • Preserve all existing prop interfaces & callback contracts │
│ • Auto-verify build and typechecks │
└────────────────────────────────────────────────────────────────────────┘
1. De-Slopping: The 20 AI Slop Replacements
When refactoring any component, systematically purge these 20 patterns:
| # | AI Slop Pattern Found | Production Replacement (frontend-design) |
|---|---|---|
| 1 | bg-gradient-to-r from-purple-500 to-blue-500 |
Clean solid/subtle surface (bg-zinc-950 / bg-white) + single brand accent. |
| 2 | bg-gradient-to-r text-transparent bg-clip-text |
Solid high-contrast text (text-zinc-900 dark:text-zinc-50) with tracking-tight. |
| 3 | ✨ AI-Powered Magic pill badge above H1 |
Remove badge, or use a semantic breadcrumb / status pill with real context. |
| 4 | Three icon boxes in a row (feature triad) | Asymmetric feature grid, structured comparison table, or data-dense list. |
| 5 | Emojis in headings (🚀, 💡, 🔥) | Clear, punchy engineering copy without emojis. |
| 6 | border-l-4 border-indigo-500 accent cards |
Clean 1px border (border-zinc-200 dark:border-zinc-800) with subtle hover highlight. |
| 7 | Glassmorphism (backdrop-blur-md bg-white/10) |
High-contrast opaque/semi-opaque surface tokens with clean 1px border. |
| 8 | Untouched default shadcn components | Custom tokens styled to the product's typography and color ramps. |
| 9 | Lucide icon beside every single word | Icons strictly on interactive buttons, navigation, or status indicators. |
| 10 | Unstyled default Inter font | Distinct weights, line heights, and negative tracking on headlines. |
| 11 | Space Grotesk + Instrumental Serif | Clean modern sans-serif (Geist, Inter, system stack) with disciplined hierarchy. |
| 12 | Serif italics accent inside sans headline | Bold or brand-colored accent in the primary font. |
| 13 | Em dashes (— / --) in marketing copy |
Clean punctuation (periods, commas, colons) or rewritten sentences. |
| 14 | "Seamless", "elevate", "supercharge" | Concrete descriptions of what the feature actually does. |
| 15 | Section opacity fade-in on scroll | Instant rendering or layout-driven micro-transitions. |
| 16 | Cursor-following glow, lines, or dots | Remove entirely. |
| 17 | hover:opacity-80 button fade |
Tactile state shift: hover:bg-zinc-800 active:scale-[0.98] transition-all. |
| 18 | Low-contrast dark mode grays | Ensure body text ≥ 4.5:1 contrast against #09090b / #18181b. |
| 19 | Inconsistent spacing (p-[13px], gap-5) |
Strict 4px scale: p-3 (12px), p-4 (16px), p-6 (24px), gap-4 (16px). |
| 20 | Gratuitous noise or grain texture | Clean, crisp, high-resolution surfaces. |
2. Common UI Bug Fix Patterns
Pattern A: Mobile Horizontal Overflow
// ❌ BROKEN: Fixed width forces horizontal scrollbar on mobile
<div className="w-[640px] flex gap-4">
// ✅ FIXED: Responsive container with min-w-0 for text truncation
<div className="w-full max-w-2xl flex flex-col sm:flex-row gap-4 min-w-0">
Pattern B: Button Tactile State vs Cheap Opacity Fade
// ❌ AI SLOP: Sluggish opacity fade
<button className="bg-blue-600 text-white px-4 py-2 rounded transition hover:opacity-75">
Submit
</button>
// ✅ CRAFTED: Tactile press, high-contrast hover, focus ring
<button className="inline-flex items-center justify-center h-10 px-4 text-sm font-medium text-white bg-zinc-900 dark:bg-zinc-50 dark:text-zinc-900 rounded-md transition-all hover:bg-zinc-800 dark:hover:bg-zinc-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300">
Submit
</button>
Pattern C: Modal & Custom Select Dropdown Clipping
// ❌ BROKEN: overflow-hidden clips absolute dropdowns; nested scrollbars
<div className="overflow-hidden max-h-[500px]">
<SelectDropdown />
</div>
// ✅ FIXED: overflow-y-auto on modal body, overflow-visible on container
<div className="relative overflow-y-auto max-h-[85vh] p-6">
<div className="overflow-visible">
<SelectDropdown />
</div>
</div>
Pattern D: Untouched Shadcn Card $\rightarrow$ Branded Production Card
// ❌ AI SLOP: Generic card with colored left border and Lucide icon overkill
<div className="border-l-4 border-indigo-500 p-4 rounded-lg bg-card shadow">
<h3 className="flex items-center gap-2 font-bold">
<Zap className="h-4 w-4 text-indigo-500" /> Fast Execution
</h3>
<p className="text-muted-foreground text-sm">Experience seamless workflows.</p>
</div>
// ✅ CRAFTED: Subdued border, tight typography, tabular data, crisp hierarchy
<div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 transition-colors hover:border-zinc-300 dark:hover:border-zinc-700">
<div className="flex items-baseline justify-between gap-2">
<h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100 tracking-tight">Execution Latency</h3>
<span className="font-mono text-xs text-zinc-500 dark:text-zinc-400 tabular-nums">< 14ms</span>
</div>
<p className="mt-1.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">
Direct socket connection bypassing HTTP roundtrip overhead.
</p>
</div>
3. Definition of a Done Fix
Before reporting a fix complete:
- Checked against all 20 AI Slop Sins (zero violations).
- Verified responsive layout at 375px (mobile) and 1280px (desktop).
- Maintained all prop types, event handlers, and data contracts.
- Verified keyboard accessibility (
Tab,Enter, visible focus rings). - Verified with passing type checks (
tsc --noEmit/npm run build).