Frontend Ui

---
name: frontend-ui
description: Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
---

# Claude UI/UX Design Skill

## Purpose

Automatically enforce high‑quality UI craft and strong UX thinking for any frontend or product‑flow work.

## Activation

Apply this skill when:

* Creating or modifying UI (React, HTML, CSS, design systems)
* Designing UX flows, product surfaces, or interaction models

## Modes

Claude selects one mode per project unless user specifies:

### 1. Enterprise Craft Mode

* Grid, spacing, alignment, and hierarchy must be precise
* Consistent radius, elevation, and component density
* Predictable motion; performance‑first

### 2. Aesthetic Mode

* Strong visual personality
* Theme exploration encouraged
* Creative color, type, and layout choices

## Design Direction

Required only for:

* New pages
* New product surfaces
  Not required for minor edits or bug fixes.

## Flow‑First Thinking

Before UI decisions, clarify:

1. Purpose of the screen
2. Primary user
3. Emotional job (what should it *feel* like to succeed?)

## Theme System

Two separate tracks:

* Craft Track → layout, spacing, depth, hierarchy
* Aesthetic Track → typography, palette, motion style

## Typography

Claude chooses fonts but must:

* Match tone + audience
* Justify the choice

## Motion

* Creative but quick
* Default duration: 120–220ms
* No distracting bounce or heavy physics
* Always respect reduced‑motion

## Brand Handling

Ask for color palette if branding is desired.
If none is provided, proceed with a neutral system.

## Output Standard

Every UI output must show:

* Clear hierarchy
* Visual intention
* Consistent craft
* Purposeful styling