Research-Driven Enhancement Workflow

Research - Use ui-research skill first (5-10 examples minimum)
Assess - Identify current gaps against research findings
Plan - Define direction based on inspiration analysis
Foundation - Set up colors, spacing, animations in theme
Apply - Implement with human polish (not defaults)
Anti-AI Check - Verify no generic AI patterns
Refine - Test responsiveness, verify accessibility
Review - Check hierarchy, consistency, performance

Color Palette Selection

Palette	Use Case
Corporate Blue	Business apps, SaaS
Vibrant Purple	Creative tools, portfolios
Minimalist Gray	Clean, sophisticated
Warm Sunset	Consumer apps, e-commerce
Ocean Fresh	Health, finance apps
Dark Mode	Developer tools, dashboards

Each palette needs: Primary, Secondary, Accent, Background, Foreground, Muted, Success, Warning, Error

Component Patterns

Buttons

Variants: primary, secondary, outline, ghost, danger
Sizes: sm, md, lg
States: loading, disabled

Cards

Variants: default, bordered, elevated, interactive
Subcomponents: Header, Title, Description, Content, Footer

Forms

Clear focus states
Validation feedback
Helper text
Required indicators

Animation Guidelines

GPU-Accelerated Only:

/* ✅ DO animate */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ AVOID */
margin-top: -4px;
height: 100px;

Duration Guidelines:

Micro-interactions: 100-200ms
Transitions: 200-300ms
Complex animations: 300-500ms

Accessibility:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Responsive Strategy

Breakpoint	Min Width	Target
base	0	Mobile
sm	640px	Large phones
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Desktops

Accessibility Checklist

Layout Patterns

Hero Section

Centered, split, or minimal variants
Primary + secondary CTAs
Optional background gradients

Feature Grid

2, 3, or 4 columns
Icon + title + description
Staggered animations
Hover effects

Performance

Bundle size awareness
Lazy load heavy components
Optimize images (WebP, responsive)
60fps animations

cn Utility Setup

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Before/After Pattern

When enhancing, document changes:

Before: Plain gray button, no hover state
After: Gradient primary button with hover lift effect

Avoiding the AI Look

Red Flags to Check

Before finalizing, ensure you DON'T have:

Default blue/purple gradients
Perfectly symmetrical layouts
Generic blob/wave decorations
Undraw-style stock illustrations
"Hero with laptop mockup" cliché
Unchanged default color schemes
Cookie-cutter card grids
Overused glassmorphism/blur

Human Touch Checklist

Ensure you DO have:

Quality Comparison

Aspect	Generic AI	Human-Polished
Color	Default blue	Custom brand palette
Layout	Perfect grid	Intentional variation
Images	Stock/generic	Curated/custom
Copy	Lorem ipsum	Real, personality-rich
Motion	Basic fades	Purposeful, branded
Details	None	Hover states, feedback

frontend-enhancer

Frontend Enhancer

PREREQUISITE: Research First

When to Use