I Hate UI

i-hate-ui — Web UI Replicator & Rebrand Architect

i-hate-ui is an advanced Antigravity skill designed for developers who want world-class UI/UX without starting from scratch. It captures the DOM structure, computed layout matrices (CSS Grid, Flexbox, Padding, Shadows), keyframe animations, typography, and section-by-section cropped screenshots from any reference URL, breaks them down into modular components, and guides the user through an intelligent rebranding and customization process.

Standard Operating Procedure (SOP)

When this skill is invoked with a target URL, execute the following 5-phase workflow:

[Phase 1: Deep Extraction & Visual Screenshot Cropping]
                         ↓
[Phase 2: Multimodal Section Discovery & Matrix Analysis]
                         ↓
[Phase 3: Interactive Section Selection & Scope Alignment]
                         ↓
[Phase 4: Smart Rebranding & Algorithmic Theming Interview]
                         ↓
[Phase 5: Production Component Synthesis (shadcn / Next.js / Tailwind)]

Phase 1: Deep Extraction & Visual Screenshot Cropping

1. Run the Scraping Utility: Execute the automated Playwright extractor:

   node .agents/skills/i-hate-ui/scripts/scrape_ui.mjs "<TARGET_URL>" --output "./extracted_ui"
   

2. Inspect Scraped Assets:
   • Review extracted_ui/sections.json for computed layout matrices (gridTemplateColumns, gap, boxShadow, backdropFilter).
   • Inspect extracted_ui/sections/ for high-res cropped PNGs (section_01.png, section_02.png) to visually cross-reference UI details with multimodal vision.
   • Review extracted_ui/tokens.json for CSS variables, fonts, and keyframes.

Phase 2: Section Discovery & Breakdown

Present a structured breakdown of detected landmark sections to the user:

• Navbar / Header (Logo, navigation links, CTA button, mobile drawer)
• Hero Section (Headline, subheadline, CTA group, hero media/mockup, social proof badges)
• Bento Grid / Features (Multi-column feature cards, icon badges, interactive tabs)
• Showcase / Interactive Demos (Product mockups, comparison sliders, video frames)
• Social Proof / Testimonials (Review cards, client logo ticker, star ratings)
• Pricing Table (Monthly/Annual billing toggle, tier cards, feature checkmarks, highlight badge)
• FAQ Accordion (Expandable accordion items, search/filter)
• Call-to-Action (CTA) Banner (High-contrast conversion banner)
• Footer (Multi-column links, newsletter subscription, copyright, social icons)

Phase 3: Interactive Section Selection

Ask the user to select their desired scope:

1. Full Page Rebrand: Re-architect the entire reference page end-to-end.
2. Modular Section Selection: Pick only specific components (e.g., Hero + Bento Grid + Pricing Table).
3. Design System & Tokens Only: Extract color palette, typography scale, cards, and button styles.

Phase 4: Smart Rebranding & Algorithmic Theming

Guide the user through a structured rebrand consultation:

1. Brand Identity & Positioning:

   • Product / Brand Name & Core Slogan.
   • Industry context (e.g., AI/SaaS, FinTech, E-Commerce, DevTools, Agency) to generate high-converting, context-specific copy (no generic lorem ipsum).

2. Smart Color Palette & Theme:

   • Primary Brand Color (e.g., #6366F1 or #10B981).
   • Run the color engine if needed:

     node .agents/skills/i-hate-ui/scripts/color_engine.mjs "<HEX_COLOR>"
     

   • Theme Mode: Sleek Dark Mode (Slate-950 + Glow accents), Minimal Light Mode, or Dynamic Dark/Light Toggle.

3. Typography & Iconography:

   • Modern Google Font pairing (Plus Jakarta Sans + Inter, Outfit + Inter, Space Grotesk + Geist).
   • Map scraped SVG icons to clean Lucide React or Heroicons standard vectors.

4. Target Framework & Architecture:

   • Next.js 15 (App Router) + Tailwind CSS + Framer Motion + Lucide
   • shadcn/ui Compatible Components (Button, Card, Accordion, Badge)
   • React (Vite) + Tailwind CSS
   • Vue 3 / Nuxt 3
   • Single-File HTML + Tailwind CDN (for instant browser preview)

Phase 5: Production Component Synthesis & Verification

1. Generate Clean, Production-Ready Code:
   • Translate computed grid/flex matrices into clean Tailwind classes (e.g., grid grid-cols-1 md:grid-cols-3 gap-8).
   • Apply micro-interactions (hover:-translate-y-1 hover:shadow-2xl transition-all duration-300).
   • Implement accessibility standards (semantic HTML5, ARIA labels, minimum 4.5:1 contrast).
2. Deliver and Verify:
   • Output the file(s) into the user's project workspace.
   • Provide instant preview and customization instructions.

Reference Documentation

• Rebranding & Design Token Checklist