frontend-aesthetics - SKILL.md Agent Skill

name: frontend-aesthetics description: Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics. Use when building UI components, designing layouts, selecting colors/fonts, or implementing animations.

Frontend Aesthetics

Create distinctive designs that avoid generic AI-generated aesthetics.

When to Use

Designing UI components, layouts, landing pages, dashboards
Selecting typography, colors, animations
Reviewing designs for generic patterns

Design Principles

Typography

AVOID (overused): Inter, Roboto, Arial, system fonts

Recommended:

Code/Technical: JetBrains Mono, Fira Code, Victor Mono
Editorial: Playfair Display, Crimson Pro, Spectral, Lora
Modern: DM Sans, Outfit, Plus Jakarta Sans (vary across projects)

Colors & Theme

AVOID: Purple gradients on white (clichéd AI aesthetic), generic blue/gray

Principles:

Dominant colors with sharp accents > evenly-distributed palettes
Draw from IDE themes (Dracula, Nord, Tokyo Night, Monokai)
Use CSS variables for theming
1-2 dominant + 1-2 accent colors

Animation

Priorities:

High-impact: Orchestrated page loads with staggered reveals
Micro-interactions: Button hovers, state changes
Contextual: Scroll-triggered, parallax

Implementation: CSS-only for HTML/Vanilla JS, Motion (Framer) for React

.stagger-item {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}
.stagger-item:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-item:nth-child(2) {
  animation-delay: 0.2s;
}

Backgrounds

AVOID: Solid white/gray, flat surfaces

Use: Layered gradients, geometric patterns, subtle noise, contextual glow/blur

Anti-Pattern Checklist

Not using Inter, Roboto, Arial, system fonts
No purple gradients on white
Color hierarchy clear (dominant + accent)
Animations orchestrated and purposeful
Backgrounds have depth
Typography matches brand personality
Design varies from previous projects

Output Format

{
  "typography": { "primary": "Font + reasoning", "secondary": "Font", "code": "Mono font" },
  "colors": { "dominant": ["#hex"], "accent": ["#hex"], "theme_inspiration": "Reference" },
  "animations": {
    "approach": "CSS-only|Framer",
    "focus": "Page load|micro-interactions",
    "key_moments": []
  },
  "backgrounds": { "technique": "Gradients|patterns", "atmosphere": "Description" },
  "anti_pattern_validation": { "passed": true, "warnings": [] }
}

Example

Input: Technical documentation, code-focused, for developers

Output:

Typography: DM Sans (primary), Crimson Pro (editorial), JetBrains Mono (code)
Colors: #0f172a, #1e293b (dominant), #38bdf8, #f97316 (accent) - Tokyo Night inspired
Animations: CSS-only, staggered section reveals
Background: Dark gradient with subtle grid overlay

Notes

Variation is critical - avoid converging on same choices across projects
Context matters - match brand identity and purpose
Performance: CSS-only preferred, Framer Motion for complex React animations
Ensure WCAG compliance despite distinctive aesthetics