frontend-enhancer

# Frontend Enhancer

## Overview

The Frontend Enhancer skill transforms Next.js applications into visually stunning, modern web experiences. It provides production-ready components, comprehensive design guidelines, curated color palettes, smooth animations, and flexible layout templates optimized for responsiveness and accessibility.

## When to Use This Skill

Invoke this skill when:
- Improving the visual appearance of an existing application
- Creating new UI components with modern styling
- Selecting color schemes and design themes
- Adding animations and transitions
- Building responsive layouts for different screen sizes
- Implementing hero sections, feature grids, or landing pages
- Enhancing user experience with better visual hierarchy
- Applying consistent design patterns across an application

## Core Capabilities

### 1. Component Library

Use pre-built, production-ready React components with multiple variants and states:

**Button Component** (`assets/button-variants.tsx`):
- Variants: primary, secondary, outline, ghost, danger
- Sizes: sm, md, lg
- Loading states with animated spinner
- Full TypeScript support
- Accessibility features built-in

**Card Component** (`assets/card-variants.tsx`):
- Variants: default, bordered, elevated, interactive
- Subcomponents: CardHeader, CardTitle, CardDescription, CardContent, CardFooter
- Hover effects and transitions
- Flexible padding options

**Input Components** (`assets/input-variants.tsx`):
- Text inputs with validation states
- Textarea component
- Left/right icon support
- Error and helper text display
- Label integration
- Full accessibility support

**Implementation workflow:**
1. Copy the desired component file from `assets/` to your project's components directory
2. Ensure the `cn` utility function exists (see `assets/utils-cn.ts`)
3. Customize colors, spacing, or variants to match your brand
4. Import and use the component in your pages

### 2. Layout Templates

Use pre-designed, responsive layout patterns for common page sections:

**Hero Section** (`assets/layout-hero-section.tsx`):
- Three variants: centered, split, minimal
- Support for CTAs (primary and secondary)
- Optional background gradients
- Image/illustration support
- Built-in animations

**Feature Grid** (`assets/layout-feature-grid.tsx`):
- Configurable columns (2, 3, or 4)
- Icon integration
- Staggered animations
- Hover effects
- Fully responsive

**Implementation workflow:**
1. Copy the layout component from `assets/` to your components directory
2. Customize the props and content to match your needs
3. Integrate with your existing pages
4. Adjust styling as needed for your brand

### 3. Design System Guidelines

Reference comprehensive design principles for consistent, professional interfaces:

**Design Principles** (`references/design_principles.md`):
- Visual hierarchy best practices
- Spacing and rhythm guidelines
- Typography recommendations
- Color theory and usage
- Consistency standards
- Responsiveness strategies
- Accessibility guidelines (WCAG AA/AAA)
- Common layout patterns

**When to reference:**
- Starting a new design
- Making decisions about visual hierarchy
- Ensuring accessibility compliance
- Establishing consistency across the app
- Reviewing design quality

**How to use:**
Read `references/design_principles.md` to understand best practices, then apply them to your specific design challenges. The document covers both theory and practical implementation.

### 4. Color Palettes

Access professionally curated color schemes optimized for modern web applications:

**Available Palettes** (`references/color_palettes.md`):
1. **Corporate Blue** - Professional, trustworthy (business apps, SaaS)
2. **Vibrant Purple** - Creative, modern (creative tools, portfolios)
3. **Minimalist Gray** - Clean, sophisticated (minimalist designs)
4. **Warm Sunset** - Energetic, friendly (consumer apps, e-commerce)
5. **Ocean Fresh** - Calm, professional (health, finance apps)
6. **Dark Mode** - Modern, eye-friendly (developer tools, dashboards)

Each palette includes:
- Primary and secondary colors
- Accent colors
- Background and surface colors
- Text colors (primary and secondary)
- Semantic colors (success, warning, error)
- Border colors

**Implementation options:**
1. **Tailwind CSS**: Add colors to `tailwind.config.js` (examples provided)
2. **CSS Variables**: Use custom properties in global CSS (examples provided)
3. **Inline styles**: Reference hex codes directly in components

**Selection workflow:**
1. Review `references/color_palettes.md` to see all available palettes
2. Consider your application's purpose and brand identity
3. Choose a palette that matches your goals
4. Implement using Tailwind config or CSS variables
5. Adjust specific colors if needed to match your brand

### 5. Animations and Transitions

Add smooth, professional animations using pre-built CSS classes and keyframes:

**Animation Library** (`assets/animations.css`):
- Fade animations (fadeIn, fadeOut, fadeInUp, fadeInDown)
- Slide animations (slideInLeft, slideInRight)
- Scale animations (scaleIn, scaleOut)
- Utility animations (bounce, pulse, spin)
- Skeleton loading (shimmer effect)
- Hover effects (lift, glow, scale)
- Stagger delays for list animations

**Accessibility:**
All animations respect `prefers-reduced-motion` for accessibility compliance.

**Implementation workflow:**
1. Copy `assets/animations.css` to your global CSS file (or create a separate animations file)
2. Apply utility classes like `animate-fade-in-up`, `hover-lift`, etc.
3. Use stagger classes for sequential animations in lists
4. Customize duration and easing if needed

**Best practices:**
- Keep animations subtle (200-300ms for micro-interactions)
- Use animations to guide user attention
- Avoid excessive motion that distracts
- Always test with `prefers-reduced-motion` enabled

## Enhancement Workflow

Follow this systematic approach when enhancing a frontend application:

### Step 1: Assess Current Sta