frontend-design

# Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, artifacts, posters, or applications.

## Core Approach

Before coding, establish a bold aesthetic direction by understanding:

- **Purpose**: The problem solved and target audience
- **Tone**: A distinctive style (minimalist, maximalist, retro-futuristic, brutalist, art deco, organic, luxury, playful, etc.)
- **Constraints**: Technical requirements and platform limitations
- **Differentiation**: The memorable, unforgettable element

Execute with "intentionality, not intensity"—whether refined minimalism or bold maximalism, commitment to vision matters most.

## Implementation Standards

Produce production-grade, functional code that is:
- Visually striking and cohesive
- Meticulously refined in every detail
- Aligned with the aesthetic point-of-view

## Design Focus Areas

### Typography
Distinctive, characterful fonts paired meaningfully; avoid generic defaults.

### Color & Theme
Cohesive palettes with dominant colors and sharp accents using CSS variables.

### Motion
High-impact animations; staggered reveals and scroll-triggering effects.

### Spatial Composition
Asymmetrical layouts with unexpected breaks and generous spacing.

### Visual Details
Atmospheric depth through gradients, textures, patterns, and creative effects.

## Critical Guidance

**Avoid generic AI aesthetics:**
- Overused fonts
- Clichéd color schemes
- Predictable layouts
- Context-free design

Match implementation complexity to the vision:
- Maximalist designs require elaborate code
- Minimalist designs demand precision and restraint

## Usage

Use this skill when:
- Building web components or pages
- Creating visual artifacts and posters
- Designing production-grade applications
- Developing distinctive frontend interfaces