---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality
version: 1.0.0
author: Anthropic (adapted)
platforms: [claude-code, cursor, windsurf]
license: Apache-2.0
source: https://github.com/anthropics/skills
---

# Frontend Design Excellence

Create distinctive, production-grade frontend interfaces. Before writing a single line of code, commit to a bold aesthetic direction.

## Design Principles

### Never use:
- Inter, Roboto, or Arial as the primary font
- Purple gradients on white backgrounds
- Default shadcn/ui component styling without customization
- Centered "hero + features + CTA" layouts

### Always do:
- Choose an extreme aesthetic: brutalist, maximalist, art deco, retro-futuristic, Swiss grid, editorial, kinetic
- Use CSS custom properties for all design tokens
- Apply atmospheric backgrounds: noise textures, gradient meshes, grain overlays
- Vary between light and dark themes each generation

## Implementation Stack
- React 18 + TypeScript for complex components
- Tailwind CSS for utility-first styling
- Motion (Framer Motion) for animations
- CSS Grid and Flexbox for unexpected layouts

## Process
1. **Choose aesthetic** — name your design movement (e.g. "neo-brutalism with editorial typography")
2. **Define tokens** — colors, spacing, typography as CSS variables
3. **Build layout** — structure before decoration
4. **Add depth** — shadows, borders, textures, micro-animations
5. **Polish** — hover states, transitions, responsive behavior

## Quality Bar
Rate your output 1-10 on:
- Distinctiveness (would a designer screenshot this?)
- Consistency (do all elements feel from the same system?)
- Craft (are interactions delightful?)

Aim for 8+ before presenting to user.