FRONTEND
DESIGN

name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: SoloDev
---
 
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
 
## Design Thinking
 
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, editorial/magazine, brutalist/raw, etc. 
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE?
 
CRITICAL: Choose a clear conceptual direction and execute it with precision. 
 
## Frontend Aesthetics Guidelines
 
Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Dominant colors with sharp accents.
- Motion: Use animations for effects and micro-interactions.
- Spatial Composition: Unexpected layouts. Asymmetry. Grid-breaking elements.
- Backgrounds & Visual Details: Create atmosphere (gradient meshes, noise textures).
 
NEVER use generic AI-generated aesthetics (Inter, Roboto, cliched purple gradients).
 
IMPORTANT: Match implementation complexity to the aesthetic vision. Elegance comes from executing the vision well.