---
name: ao-frontend-design
description: "Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic 'AI slop' aesthetics. Use when building web components, pages, or applications."
category: extended
invokes: [ao-theme-factory]
invoked_by: [ao-implementation]
state_files:
  read: [constitution.md, focus.json]
  write: [focus.json]
source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
---

# Frontend Design Skill

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

## When to Use

- Building web components, pages, or applications
- Creating websites, landing pages, dashboards
- Styling/beautifying any web UI
- React components, HTML/CSS layouts
- Any request for visually striking web interfaces

## 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 — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- **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 it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

### Typography

Choose fonts that are beautiful, unique, and interesting. **Avoid generic fonts like Arial, Inter, and Roboto.** Opt for distinctive choices that elevate the design — unexpected, characterful font choices.

Pair a distinctive display font with a refined body font.

### Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency:
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes
- One color dominates (60-70%), supporting tones (20-30%), sharp accent (10%)
- Consider invoking `ao-theme-factory` for curated palettes

### Motion

Use animations for effects and micro-interactions:
- Prioritize CSS-only solutions for HTML
- Use Motion library for React when available
- Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions
- Use scroll-triggering and hover states that surprise

### Spatial Composition

- Unexpected layouts. Asymmetry. Overlap. Diagonal flow.
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details

Create atmosphere and depth rather than defaulting to solid colors:
- Gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows
- Decorative borders, custom cursors, grain overlays

## Anti-Patterns (NEVER Do These)

- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
- ❌ Cliched color schemes (particularly purple gradients on white backgrounds)
- ❌ Predictable layouts and component patterns
- ❌ Cookie-cutter design lacking context-specific character
- ❌ Converging on common choices (Space Grotesk) across generations

## Implementation Guidance

**Match implementation complexity to the aesthetic vision:**
- Maximalist designs need elaborate code with extensive animations and effects
- Minimalist/refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
- Elegance comes from executing the vision well

**IMPORTANT**: Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics.

## Output

Deliver:
1. Working code (HTML/CSS/JS, React component, etc.)
2. Brief design rationale (tone chosen, key aesthetic decisions)

Update `.agent/ops/focus.json`:
```markdown
## Just did
- Frontend design: {component/page name}
  - Aesthetic: {tone chosen}
  - Tech: {HTML/React/Vue/etc.}
  - Key choices: {font, palette, motif}
```
