---
name: frontend-dev
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics.
---

# Frontend Development

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

**For technical constraints (animation, typography, accessibility), see `ui-rules` skill.**

## When This Skill Activates

- Building web components or pages
- Creating dashboards or applications
- Styling or beautifying web UI
- React, Vue, HTML/CSS development
- Landing pages or marketing sites

## 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 a direction: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: What makes this memorable?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

## Creative Philosophy

### Typography
Choose fonts that fit the aesthetic. Pair display fonts with body fonts thoughtfully. Consider the project's existing typography system first.

### Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Strong primary colors with intentional accents create memorable interfaces.

### Motion
Use animation purposefully - for feedback, transitions, and delight. Focus on high-impact moments over scattered micro-interactions.

### Spatial Composition
Consider unexpected layouts, asymmetry, overlap, grid-breaking elements. Balance negative space with density based on the design direction.

### Visual Texture
Create atmosphere through background treatment, shadows, borders, and layering. Avoid flat, sterile defaults.

## Anti-Patterns

NEVER create generic AI-generated aesthetics:
- Predictable layouts without character
- Cookie-cutter components that could be from any project
- Designs that converge on the same "safe" choices

Interpret creatively. Make unexpected choices. No two interfaces should look the same.

## Implementation

Match implementation complexity to the aesthetic vision:
- Maximalist designs need elaborate detail
- Minimalist designs need restraint and precision

Commit fully to the chosen direction.