Frontend Enhancer

Transform web applications into visually polished, human-designed experiences.

PREREQUISITE: Research First

Before using this skill, ALWAYS complete:

Skill(ui-research)

Research is mandatory to avoid generic AI-generated looks. See UI Inspiration Sources for source list.

When to Use

Use for:

• Improving styling and visual design
• Creating responsive layouts
• Adding animations and transitions
• Selecting color schemes
• Building modern UI patterns
• Enhancing aesthetics

Don't use when:

• Need inspiration first → use ui-research (MANDATORY)
• UX flow design → use generic-ux-designer
• Code architecture → use generic-feature-developer
• Code review → use generic-code-reviewer

Foundational References:

• UI Inspiration Sources - Research sources
• Design Patterns - Visual tokens

Research-Driven Enhancement Workflow

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

Color Palette Selection

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

Accessibility Checklist

• Color contrast >= 4.5:1 (WCAG AA)
• Keyboard accessible
• Visible focus indicators
• Semantic HTML
• Alt text on images
• Form labels
• Respects prefers-reduced-motion
• Touch targets >= 44x44px

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:

• Custom color palette (not defaults)
• Intentional layout asymmetry
• Unique typography pairing
• Real/custom imagery
• Micro-interactions with personality
• Brand-specific details
• Thoughtful empty/loading states
• Copy with character

Quality Comparison

See Also

• UI Inspiration Sources - Research sources (USE FIRST)
• Design Patterns - Visual design reference
• UX Principles - User experience
• ui-research - Mandatory prerequisite skill
• Project CLAUDE.md - Design constraints