# Frontend Fix > Systematic frontend refactoring, UI bug repair, and de-slopping engine. Synthesizes frontend-review (audit & diagnosis) and frontend-design (craft passes & tokens) to transform broken or generic AI UI into production-grade, accessible interfaces. Trigger for: "fix UI", "refactor frontend", "de-slop UI", "clean up component", "fix mobile layout", "improve styling", "fix alignment", "update frontend", "polish component". - Skill: `tanveer-rajpurohit/frontend-fix` (Agent Skill) - Install (CLI): `npx skillmds@latest add tanveer-rajpurohit/frontend-fix` - Raw SKILL.md: https://api.skillmd.com/api/skills/tanveer-rajpurohit/frontend-fix/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: Tanveer-rajpurohit (https://skillmd.com/u/tanveer-rajpurohit) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/tanveer-rajpurohit/frontend-fix --- # 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 ```text ┌────────────────────────────────────────────────────────────────────────┐ │ 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 ```tsx // ❌ BROKEN: Fixed width forces horizontal scrollbar on mobile
// ✅ FIXED: Responsive container with min-w-0 for text truncation
``` ### Pattern B: Button Tactile State vs Cheap Opacity Fade ```tsx // ❌ AI SLOP: Sluggish opacity fade // ✅ CRAFTED: Tactile press, high-contrast hover, focus ring ``` ### Pattern C: Modal & Custom Select Dropdown Clipping ```tsx // ❌ BROKEN: overflow-hidden clips absolute dropdowns; nested scrollbars
// ✅ FIXED: overflow-y-auto on modal body, overflow-visible on container
``` ### Pattern D: Untouched Shadcn Card $\rightarrow$ Branded Production Card ```tsx // ❌ AI SLOP: Generic card with colored left border and Lucide icon overkill

Fast Execution

Experience seamless workflows.

// ✅ CRAFTED: Subdued border, tight typography, tabular data, crisp hierarchy

Execution Latency

< 14ms

Direct socket connection bypassing HTTP roundtrip overhead.

``` --- ## 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`).