This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates...

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

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

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

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

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

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

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

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

About

SKILL.md

frontend-enhancer

About

SKILL.md

Frontend Enhancer

PREREQUISITE: Research First

When to Use

Research-Driven Enhancement Workflow

Color Palette Selection

Component Patterns

Buttons

Cards

Forms

Animation Guidelines

Responsive Strategy

Accessibility Checklist

Layout Patterns

Hero Section

Feature Grid

Performance

cn Utility Setup

Before/After Pattern

Avoiding the AI Look

Red Flags to Check

Human Touch Checklist

Quality Comparison

See Also

About

SKILL.md

About

SKILL.md

Frontend Enhancer

PREREQUISITE: Research First

When to Use

Research-Driven Enhancement Workflow

Color Palette Selection

Component Patterns

Buttons

Cards

Forms

Animation Guidelines

Responsive Strategy

Accessibility Checklist

Layout Patterns

Hero Section

Feature Grid

Performance

cn Utility Setup

Before/After Pattern

Avoiding the AI Look

Red Flags to Check

Human Touch Checklist

Quality Comparison

See Also