Frontend Aesthetics Skill

When to Use

ALWAYS use this skill when:

• Creating landing pages or marketing sites
• Designing dashboards or admin interfaces
• Building branded UI components
• Reviewing designs for distinctiveness
• Implementing visual polish and animations

DO NOT use when:

• Working on backend/API code
• Writing tests
• Quick prototypes that won't ship

The Problem: Distributional Convergence

Claude defaults to generic designs because safe, universally-acceptable choices dominate training data. This creates the "AI slop aesthetic":

• Inter/Roboto fonts everywhere
• Purple/blue gradients
• Minimal animations
• Flat, lifeless backgrounds
• Evenly-distributed color palettes

This skill provides specific alternatives to break free from defaults.

Core Principles

• True dark themes (not gray - actual dark tones)
• Single accent color - pick one and use it consistently
• Professional, actionable UI - data-dense, not decorative
• Subtle depth - layered backgrounds, not flat

Four Design Vectors

1. Typography

Avoid: Inter, Roboto, Arial as PRIMARY fonts (they're fine as fallbacks)

Distinctive Alternatives:

/* Headings: Bold, distinctive */
--font-heading: 'Plus Jakarta Sans', 'Bricolage Grotesque', sans-serif;

/* Body: Clean, readable */
--font-body: 'Inter Variable', system-ui;

/* Code/Data: Monospace with character */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

/* Other distinctive options */
/* Modern/Tech: Space Grotesk, Outfit, Manrope */
/* Premium: Playfair Display, Cormorant */
/* Friendly: Nunito, Quicksand, Poppins */

Weight Contrasts:

// DO: Extreme weight variation
<h1 className="text-4xl font-black">Dashboard</h1>  // 900
<p className="text-base font-light">Subtitle</p>    // 300

// DON'T: Minimal variation
<h1 className="text-2xl font-semibold">Dashboard</h1>  // 600
<p className="text-base font-medium">Subtitle</p>      // 500

Size Hierarchy:

// DO: Clear visual hierarchy
<h1 className="text-5xl">Main Heading</h1>   // 48px
<h2 className="text-2xl">Section</h2>        // 24px
<p className="text-sm">Body text</p>         // 14px

// DON'T: Unclear hierarchy
<h1 className="text-xl">Main Heading</h1>    // Too small
<h2 className="text-lg">Section</h2>         // Too similar

2. Color System

Principles:

• True dark base - Use near-black, not gray (avoid gray-900, slate-900)
• Single accent color - Pick ONE brand color for primary actions
• Semantic colors - Green=success, Amber=warning, Red=error
• Text hierarchy - Primary (bright), secondary (muted), disabled (dim)

Color Application:

// DO: Dominant background + single accent
<div className="bg-neutral-950">
  <Button className="bg-brand-500 hover:bg-brand-400">
    Primary Action
  </Button>
</div>

// DON'T: Evenly distributed colors (rainbow soup)
<div className="bg-gray-900">
  <Button className="bg-blue-500">Action 1</Button>
  <Button className="bg-green-500">Action 2</Button>
  <Button className="bg-purple-500">Action 3</Button>
</div>

// DO: Define CSS variables for your brand
:root {
  --bg-base: /* your true dark */;
  --bg-surface: /* slightly lighter */;
  --accent: /* your brand color */;
  --accent-hover: /* lighter variant */;
}

3. Motion & Animation

Principles:

• Use CSS for simple transitions
• Use Framer Motion for orchestrated animations
• Focus on high-impact moments (page load, state changes)
• Stagger reveals for lists

CSS-Only Patterns:

// DO: Smooth, purposeful transitions
<Button className="transition-all duration-200 ease-out hover:scale-105 hover:shadow-lg hover:shadow-brand-500/20">
  Hover Me
</Button>

// DO: Staggered list reveals
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
  Item 1
</div>
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
  Item 2
</div>

Framer Motion Patterns:

import { motion } from 'framer-motion'

// DO: Orchestrated page load
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.div variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.div key={i} variants={item}>{i}</motion.div>
  ))}
</motion.div>

// DON'T: Static, lifeless pages
<div>{items.map(i => <div key={i}>{i}</div>)}</div>

4. Backgrounds & Depth

Avoid: Solid colors, flat backgrounds

Patterns:

// DO: Layered gradients with atmospheric depth
<div className="relative bg-neutral-950">
  {/* Gradient orb using brand color */}
  <div className="absolute top-0 right-0 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl" />

  {/* Secondary subtle orb */}
  <div className="absolute bottom-0 left-0 w-64 h-64 bg-brand-500/5 rounded-full blur-2xl" />

  {/* Content */}
  <div className="relative z-10">
    {children}
  </div>
</div>

// DO: Subtle grid patterns
<div className="bg-neutral-950 bg-[linear-gradient(to_right,rgb(255_255_255/5%)_1px,transparent_1px),linear-gradient(to_bottom,rgb(255_255_255/5%)_1px,transparent_1px)] bg-[size:64px_64px]">
  {children}
</div>

// DO: Card elevation with glow
<Card className="bg-neutral-900 border border-white/5 shadow-xl shadow-black/50 hover:shadow-brand-500/10 transition-shadow">
  {content}
</Card>

Anti-Patterns (The "Slop" List)

NEVER do these:

| Anti-Pattern | Why It's Bad | What To Do Instead | |--------------|--------------|-------------------| | Inter font everywhere | Generic, immediately recognizable as AI | Use distinctive fonts (Plus Jakarta Sans, etc.) | | bg-gray-900 | Gray, not true dark | Use bg-neutral-950 or custom true dark | | Purple/blue gradients | Overused AI aesthetic | Use single brand accent, solid colors | | Equal color distribution | No visual hierarchy | Dominant color + one accent | | No animations | Lifeless, static | Add purposeful micro-interactions | | Rounded-full everywhere | Childish, unprofessional | Mix rounded-lg with sharp corners | | White cards on dark bg | Too much contrast | Use subtle elevation with soft borders | | Generic icons | No brand identity | Use Lucide with consistent stroke width |

Component Styling Examples

Dashboard Card

// Professional dashboard style (use your brand color for accent)
<Card className="bg-neutral-900 border border-white/5 rounded-xl p-6 hover:border-brand-500/20 transition-colors">
  <CardHeader className="pb-2">
    <CardTitle className="text-lg font-semibold text-white flex items-center gap-2">
      <Activity className="w-5 h-5 text-brand-400" />
      System Status
    </CardTitle>
  </CardHeader>
  <CardContent>
    <div className="text-3xl font-bold text-white">98.7%</div>
    <p className="text-sm text-zinc-400">Uptime this month</p>
  </CardContent>
</Card>

Button Hierarchy

// Primary - brand color, prominent
<Button className="bg-brand-500 hover:bg-brand-400 text-white font-medium">
  Create Project
</Button>

// Secondary - ghost with border
<Button variant="outline" className="border-white/10 hover:bg-white/5 text-zinc-300">
  Cancel
</Button>

// Destructive - red, serious (semantic color)
<Button variant="destructive" className="bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20">
  Delete
</Button>

Data Table

// Professional data display
<Table className="bg-neutral-900 rounded-xl border border-white/5">
  <TableHeader>
    <TableRow className="border-white/5 hover:bg-white/5">
      <TableHead className="text-zinc-400 font-medium">Project</TableHead>
      <TableHead className="text-zinc-400 font-medium">Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="border-white/5 hover:bg-white/5">
      <TableCell className="text-white font-medium">My Project</TableCell>
      <TableCell>
        <Badge className="bg-green-500/10 text-green-400 border-green-500/20">
          Active
        </Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Validation Checklist

Before completing any UI work, verify:

• [ ] Typography: Not using Inter/Roboto as primary font
• [ ] Colors: Using true dark, not gray (gray-900, slate-900)
• [ ] Accents: Single brand color used consistently for actions
• [ ] Motion: Page has at least one meaningful animation
• [ ] Depth: Background has gradients or patterns, not flat
• [ ] Hierarchy: Clear visual weight differences (text, buttons)
• [ ] Consistency: All components follow established design system

Supporting Files

• typography-guide.md - Complete font pairing reference
• motion-patterns.md - Framer Motion recipes and CSS animations
• anti-patterns.md - Expanded examples of what to avoid

Design Token Standard

This skill aligns with DTCG 2025.10 (Design Tokens Community Group) format:

• File extension: .tokens.json
• Properties prefixed with $ ($value, $type, $description)
• Three-tier architecture: Core → Semantic → Component

See W3C DTCG Specification

Resources

• W3C Design Tokens Spec - Industry standard (2025.10)
• Style Dictionary - Token build system
• ShadCN UI Components
• Framer Motion
• Tailwind CSS
• Google Fonts - For distinctive typography