Frontend Design

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? Who uses it?
- **Tone**: Pick an extreme aesthetic approach (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.)
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: "What makes this UNFORGETTABLE? What's the one thing someone will remember?"

**CRITICAL**: Choose a clear conceptual direction and execute with precision. Bold maximalism and refined minimalism both work—intentionality matters most.

## Frontend Aesthetics Guidelines

Focus on:

- **Typography**: Choose distinctive, characterful fonts. Avoid generic options; pair compelling display fonts with refined body fonts. If project is in Russian, use Cyrillic fonts
- **Color & Theme**: Commit to cohesive aesthetics. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid palettes
- **Motion**: Use animations for effects and micro-interactions. CSS-only for HTML; Motion library for React. Orchestrate page load reveals with staggered animations
- **Spatial Composition**: Employ unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements, and generous negative space
- **Backgrounds & Visual Details**: Create atmosphere through gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows

## What to Avoid

Never default to generic AI aesthetics: overused font families (Inter, Roboto, Arial), clichéd color schemes (purple gradients), predictable layouts, or cookie-cutter designs lacking context-specific character.

Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box.