---

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.

Frontend Design

Overview

Craft visually striking frontend interfaces by committing to bold, intentional aesthetic directions rather than defaulting to common patterns.

Design Strategy

Before coding, analyze:

• Purpose and intended audience
• Tone and emotional impact
• Technical constraints
• What will make the interface memorable through a specific conceptual lens

Aesthetic Focus Areas

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter.

Color & Theme

Establish cohesive palettes using CSS variables with:

• Dominant colors
• Sharp accents
• Considered contrast ratios

Motion

Prioritize high-impact animations:

• Page-load sequences
• Scroll-triggered effects
• Micro-interactions

Spatial Composition

• Asymmetry
• Overlap
• Diagonal flow
• Grid-breaking elements

Visual Details

Create atmosphere through:

• Gradients
• Textures
• Patterns
• Contextual effects

Critical Avoidance

Do NOT create "generic AI-generated aesthetics":

• Overused typefaces
• Predictable layouts
• Cookie-cutter design lacking context-specific character
• Excessive centered layouts
• Default purple gradients
• Uniform rounded corners

Implementation Approach

Match code complexity to the vision:

• Maximalist designs require elaborate animations
• Minimalist designs demand restraint and precision in spacing and typography

Output

Production-ready code using:

• React components
• Tailwind CSS
• Modern CSS features
• Accessibility best practices