frontend-aestheticslisted

Guides distinctive frontend and web artifact design with intentional typography, color, animation, backgrounds, and layout choices. Use when creating or revising HTML, React, web apps, UI prototypes, landing pages, dashboards, or other browser-based visual experiences that should avoid generic AI-generated aesthetics.
Emlembow/skills · ★ 2 · Web & Frontend · score 73

Install: claude install-skill Emlembow/skills

# Frontend Aesthetics Skill ## Purpose This skill ensures websites and web applications are built with distinctive, creative aesthetics that avoid generic "AI slop" design patterns. Use this skill when creating any HTML, React, or web-based artifacts. ## Core Principle **Avoid convergence toward generic outputs.** Every design should feel intentionally crafted for its specific context, not like it came from a template. --- ## Typography Excellence ### Font Selection Strategy - **Never default to**: Inter, Roboto, Arial, Helvetica, system-ui, or other overused system fonts - **Explore distinctive choices**: - Serif fonts for editorial/sophisticated contexts (Crimson Pro, Libre Baskerville, Spectral, Lora, Merriweather) - Display fonts for personality (DM Serif Display, Playfair Display, Abril Fatface, Righteous) - Geometric sans for modern/tech (Outfit, Sora, Plus Jakarta Sans, Lexend, Manrope) - Humanist sans for approachable (Figtree, Nunito, Quicksand, Karla) - Monospace with character (JetBrains Mono, Fira Code, Space Mono, IBM Plex Mono) ### Typography Best Practices - Pair contrasting font families (serif + sans, display + body) - Use font-weight variations strategically (100-900 range) - Implement responsive typography with clamp() for fluid scaling - Create hierarchy through size, weight, spacing, and family changes ### Implementation ```css /* Import from Google Fonts or other CDN */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wg