frontend-aesthetics

What this skill does

## Overview

This skill provides specific design principles and patterns for creating distinctive, polished frontend interfaces that avoid "AI slop" - the generic, obviously-generated aesthetic that results from default AI model choices. Based on official research from ["Improving frontend design through Skills"](https://claude.com/blog/improving-frontend-design-through-skills) by Anthropic.

**Skills Methodology**: This follows Anthropic's skills approach - reusable markdown documents that provide altitude-appropriate design guidance without permanent context overhead. Skills make effective design prompts contextual and reusable across projects.

**Core Problem: Distributional Convergence**: Language models naturally sample from the high-probability center of their training data distribution. This causes them to default to statistically common "safe choices" (Inter fonts, purple gradients, minimal animations, standard grid layouts) because these patterns dominate web design datasets. The result is bland, forgettable interfaces that lack intentional design decisions.

**Altitude-Appropriate Guidance**: This skill avoids both extremes:
- **Too Specific**: Prescribing exact hex codes or pixel values limits creativity
- **Too Vague**: Assuming models know design principles leads to generic defaults

Instead, it provides **contextual principles** with concrete examples that guide toward distinctive choices while preserving flexibility.

## The "AI Slop" Problem

### What Models Default To (Avoid These)

**Generic Fonts**:
- Inter, Roboto, Open Sans, Lato
- Default system fonts without customization
- Single font family for everything

**Generic Colors**:
- Purple-to-white gradients (#a855f7 → #ffffff)
- Plain white backgrounds
- Pastel color schemes without contrast
- Rainbow gradients

**Minimal Visual Interest**:
- No animations or micro-interactions
- Flat, single-layer backgrounds
- Standard grid layouts only
- No depth or texture

**Result**: Interface that looks "obviously AI-generated" - bland, safe, forgettable

### How to Recognize "AI Slop"

Calculate AI Slop Score (0-100, lower is better):
- +30 points: Using Inter/Roboto/Open Sans fonts
- +25 points: Purple gradient color scheme
- +20 points: Plain white background with no depth
- +15 points: No animations whatsoever
- +10 points: Standard grid layout only

**Score 60+**: High AI slop - needs significant design enhancement
**Score 30-59**: Moderate - some generic patterns present
**Score 0-29**: Distinctive - thoughtful design choices evident

## Typography Principles

### Avoid Generic Font Families

**Never Use (Without Strong Justification)**:
- Inter
- Roboto
- Open Sans
- Lato
- Helvetica Neue (as primary)
- Default system fonts

### Distinctive Font Recommendations

**Code/Technical Aesthetic**:
```
Primary: JetBrains Mono (headings, code blocks)
Secondary: Space Grotesk (body, UI)
Character: Modern, technical, developer-focused
```

**Editorial/Content**:
```
Primary: Playfair Display (headings, hero)
Secondary: Source Sans 3 (body)
Character: Classic, sophisticated, content-heavy
```

**Technical/Data**:
```
Primary: IBM Plex Sans (all text)
Secondary: IBM Plex Mono (code, data)
Character: Professional, systematic, dashboard-friendly
```

**Friendly/Playful**:
```
Primary: Fredoka (headings)
Secondary: Manrope (body)
Character: Approachable, consumer-facing, warm
```

**Elegant/Premium**:
```
Primary: Crimson Pro (headings)
Secondary: Karla (body)
Character: Sophisticated, refined, premium feel
```

### Font Pairing Principles

**High-Contrast Pairings** (Recommended):
Pair fonts from different categories for maximum distinctiveness:
- **Display + Monospace**: Playfair Display + JetBrains Mono
- **Serif + Geometric Sans**: Crimson Pro + Space Grotesk
- **Heavy Display + Light Sans**: Fredoka (700) + Manrope (300)

**Serif + Sans Pairing**:
- Use serif for headings (authority, elegance)
- Use sans-serif for body (readability)
- Ensure sufficient contrast in style (not both humanist)
- Example: Playfair Display + Source Sans 3

**Geometric + Humanist**:
- Geometric sans for headings (modern, structured)
- Humanist sans for body (friendly, readable)
- Example: Space Grotesk + Source Sans 3 (avoid Inter)

**Monospace + Sans**:
- Monospace for code, technical data, or distinctive headings
- Geometric/humanist sans for regular text
- Unified family approach when available (IBM Plex, JetBrains)
- Example: JetBrains Mono + Space Grotesk

**Extreme Weight Variations**:
Create hierarchy through dramatic weight differences:
- **Headings**: Use 100-200 (ultra-thin) OR 800-900 (extra-bold)
- **Body**: Use 300-400 (light to regular)
- **Avoid**: Medium weights (500-600) for headings - not distinctive enough
- **Example**: Manrope 200 for hero headings, Manrope 400 for body

**Size Jumps** (3x+ Ratio):
Create clear hierarchy with large size differences:
- **Hero**: 4rem (64px)
- **H1**: 2.5rem (40px) - not quite 3x but close
- **Body**: 1rem (16px) - 4x from hero
- **Avoid**: Incremental 1.5x jumps (too subtle)

**Variable Fonts** (Modern Approach):
- Single font file with multiple weights/styles
- Reduces HTTP requests
- Enables smooth weight transitions in animations
- Example: Manrope Variable, Inter Variable (if used thoughtfully)

### Typography Implementation

```css
/* Fluid Typography with clamp() */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

/* Type Scale with Clear Hierarchy */
.heading-1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading-2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.2;
}

.body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
}
```

## Color Theory & Schemes

### Avoid Generic Color Schemes

**Never Use (Without Intentional Justification)**:
- Purple-on-white gradients (AI default)
- Plain #FFFFFF backgrounds
- Pastel rainbow without cohesion
- Generic Material Design colors verbatim

### Intentional Color Palette Design

**Principle**: Choose colors that create a **mood** and **brand identity**

**Ocean/Tech Professional**:
```
Primary: #0ea5e9 (sky blue)
Accent: #f59e0b (amber)
Background: #0f172a → #1e293b (dark slate gradient)
Text: #f8fafc / #cbd5e1 / #64748b
Mood: Professional, trustworthy, technical
```

**Sunset/Energetic**:
```
Primary: #f97316 (orange)
Accent: #ec4899 (pink)
Background: #fff7ed (light warm) with subtle gradients
Text: #1c1917 / #57534e / #78716c
Mood: Energetic, warm, inviting
```

**Forest/Calm**:
```
Primary: #059669 (emerald)
Accent: #facc15 (yellow)
Background: #f0fdf4 (light green) with layered depth
Text: #14532d / #166534 / #4ade80
Mood: Calm, natural, wellness
```

**Cyberpunk/Bold**:
```
Primary: #06b6d4 (cyan)
Accent: #f0abfc (fuchsia)
Background: #18181b (very dark) with neon glows
Text: #fafafa / #a1a1aa / #52525b
Mood: Modern, bold, tech-forward
```

### Color Application Principles

**Dominance Hierarchy**:
- Background: 60% of visual space
- Primary: 30% of elements
- Accent: 10% for highlights

**Contrast Requirements**:
- Text on background: Minimum 4.5:1 (WCAG AA)
- Large text: Minimum 3:1 (WCAG AA)
- Interactive elements: Clear hover/focus states
- Use tools: WebAIM Contrast Checker

**Semantic Color Usage**:
```
Success: Greens (#10b981, #22c55e)
Warning: Yellows/Oranges (#f59e0b, #eab308)
Error: Reds (#ef4444, #dc2626)
Info: Blues (#3b82f6, #0891b2)
```

**Implementation**:
```css
:root {
  --colo