Frontend Design

---
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.
---

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

Announce: "🎨 /supergraph:frontend-design — designing [component/page]..."

## When to Use

- User asks to build a component, page, application, landing page, dashboard, or any web UI
- Styling or beautifying an existing interface
- Creating HTML/CSS/JS, React, Vue, or any frontend artifact

## Steps

### 1. Understand context
Clarify if needed: purpose, target audience, technical constraints (framework, existing design system). Do NOT start coding yet.

### 2. Commit to a bold aesthetic direction

Before coding, decide:
- **Tone** — pick an extreme: brutally minimal, maximalist, retro-futuristic, organic, luxury, editorial, brutalist, art deco, soft/pastel, industrial, etc.
- **Differentiation** — what is the one thing someone will remember about this UI?
- **Constraints** — framework, performance, accessibility requirements

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

### 3. Implement

Produce 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

### 4. Handoff
Deliver the working code. If the user is in a supergraph workflow:
- Static component → no further steps needed
- Interactive feature → `/supergraph:webapp-testing` to verify UI behavior

## Design Reference (condensed)
Purpose/Tone/Constraints/Differentiation — pick one bold direction (minimal/maximalist/retro/luxury/brutalist etc) and execute with precision.

Guidelines: distinctive typography (not Arial/Inter), cohesive CSS variables, CSS-only motion with staggered reveals, asymmetric/spatial composition, atmospheric backgrounds (gradients/noise/mesh/shadows). Avoid generic AI slop (purple gradients, cookie-cutter layouts). Match complexity to vision — maximalist = elaborate, minimal = precise.

## Rules

- NEVER use Inter, Roboto, Arial, or system fonts — choose distinctive typefaces
- NEVER use purple gradients on white as a default color scheme
- NEVER produce cookie-cutter layouts — every output must have a unique aesthetic point-of-view
- ALWAYS commit to one clear aesthetic direction before coding
- ALWAYS deliver working code, not mockups or pseudocode
- Match implementation complexity to vision: maximalist designs need elaborate code, minimalist designs need precision and restraint
- No two designs should converge on the same choices (fonts, colors, layout) across generations