Frontend Design

---
name: frontend-design
description: |
  Trigger when building UI, frontend, landing pages, or any visual interface.
  Provides opinionated design guidance to avoid generic AI aesthetics.
  Phrases: "build a page", "design", "UI", "landing page", "frontend".
allowed-tools:
  - Bash(command *)
  - Read
  - Write
  - Edit
  - Glob
---

# Frontend Design

Create distinctive, production-grade frontend interfaces that avoid the
"default AI look." Opinionated guidance on typography, color, spacing,
and interaction design.

## Prerequisites

- A frontend framework (React, Vue, Svelte, etc.)
- CSS framework or utility library (Tailwind recommended)

## Design Principles

1. **No generic aesthetics.** Avoid: default blue links, gray cards with
   rounded corners and drop shadows, centered hero with stock photo.
   Instead: use bold color, asymmetric layouts, distinctive typography.

2. **Typography is 80% of design.** Pick a font pairing with contrast
   (e.g., bold grotesque headings + readable serif body). Set a type scale
   and stick to it.

3. **Whitespace is a feature.** Use generous padding. Let content breathe.
   Dense layouts feel like dashboards, not products.

4. **Interaction > decoration.** Hover states, transitions, scroll animations
   add more personality than gradients or illustrations.

5. **Consistency over novelty.** Pick a border-radius (0, 4px, or full pill)
   and use it everywhere. Same for shadows, spacing units, and color palette.

## Steps

1. Before writing any code, establish:
   - Color palette (2-3 brand colors + neutrals)
   - Type scale (use clamp() for responsive sizing)
   - Spacing system (4px or 8px base unit)
   - Border radius convention
   - Shadow system (if any)

2. Build mobile-first. Start with the smallest breakpoint and layer up.

3. Use semantic HTML. `<section>`, `<article>`, `<nav>`, `<aside>` over
   `<div>` soup.

4. Add motion thoughtfully:
   - Page transitions: fade + slight slide (150-300ms)
   - Hover states: scale(1.02) or color shift (150ms)
   - Scroll reveals: IntersectionObserver + opacity/transform

5. Test contrast ratios. All text must meet WCAG AA (4.5:1 for body, 3:1
   for large text).