frontend-ui

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