/frontend-enhancer

name: frontend-enhancer
description: This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.

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`, `h