Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Supporting Files

File	Purpose
FORMS.md	Component creation workflows, 8-step checklist, decision forms
reference.md	Design tokens, typography, colors, spacing, accessibility
examples.md	Production-ready code examples (React, CSS, Tailwind)
scripts/	Utility tools: validate-design.js, generate-tokens.js, contrast-checker.js

---

Design Thinking Framework

Before coding, understand the context and commit to a BOLD aesthetic direction:

1. Context Analysis

• Purpose: What problem does this interface solve? Who uses it?
• Audience: Demographics, technical proficiency, cultural context
• Brand: Existing brand guidelines, tone of voice, values
• Constraints: Technical requirements (framework, performance, accessibility)

2. Aesthetic Direction Selection

Choose ONE direction and commit fully. The key is intentionality, not intensity.

Direction	Characteristics	Best For
Brutally Minimal	Extreme restraint, single color, maximum whitespace	High-end luxury, art galleries
Maximalist Chaos	Dense layers, multiple fonts, controlled chaos	Creative agencies, entertainment
Retro-Futuristic	Vintage meets tech, nostalgic colors, CRT effects	Gaming, creative tools
Organic/Natural	Soft curves, earthy tones, warm textures	Wellness, sustainability, food
Luxury/Refined	Subtle details, premium feel, restrained elegance	Fashion, high-end products
Playful/Toy-like	Rounded shapes, bright colors, bouncy animations	Consumer apps, children's products
Editorial/Magazine	Typography-focused, sophisticated grid, pull quotes	Content-heavy sites, blogs
Brutalist/Raw	Hard shadows, thick borders, exposed structure	Tech startups, bold statements
Art Deco/Geometric	Bold geometry, gold accents, symmetry with flair	Events, premium services
Soft/Pastel	Gentle gradients, muted tones, dreamy atmosphere	Lifestyle, wellness brands
Industrial/Utilitarian	Exposed grid, monospace type, functional aesthetic	Developer tools, data products
Glassmorphism	backdrop-filter blur, transparency, soft shadows	Modern dashboards, overlays
Neubrutalism	Hard shadows, thick borders, bold contrasting colors	Tech startups, creative tools
Dark Mode Premium	Deep blacks, subtle gradients, accent colors	Developer tools, media apps
Bento Grid	Modular cards, varied sizes, clean borders	Dashboards, portfolios

3. Differentiation Question

What makes this UNFORGETTABLE? What's the one thing someone will remember?

---

Typography Excellence

AVOID these overused fonts: Inter, Roboto, Arial, Helvetica, system-ui, Open Sans

Display Fonts (Headers):

Category	Fonts	Best For
Geometric Sans	Clash Display, Satoshi, Cabinet Grotesk, Outfit	Tech, modern brands
Humanist Sans	General Sans, Switzer, Mona Sans	Friendly, approachable
Expressive	Syne, Fraunces, Gambarino	Creative, editorial
Monospace	Geist Mono, JetBrains Mono, Fira Code	Developer tools
Serif	Fraunces, Gambarino, Playfair Display	Luxury, editorial

Body Fonts: Plus Jakarta Sans, General Sans, Switzer, Instrument Sans, Geist, Mona Sans

Font Pairing Recipes:

/* Tech/SaaS */
--font-display: 'Satoshi', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;

/* Editorial/Magazine */
--font-display: 'Fraunces', serif;
--font-body: 'Instrument Sans', sans-serif;

/* Creative Agency */
--font-display: 'Syne', sans-serif;
--font-body: 'Switzer', sans-serif;

/* Developer Tools */
--font-display: 'Geist', sans-serif;
--font-mono: 'Geist Mono', monospace;

/* Luxury/Premium */
--font-display: 'Cormorant Garamond', serif;
--font-body: 'General Sans', sans-serif;

Fluid Typography (always use clamp):

--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

---

Color & Theme

AVOID: Purple-pink gradients on white, generic blue-white schemes

Distinctive Palette Categories:

Category	Primary	Secondary	Accent	Use Case
Warm Tech	Burnt Orange	Slate Blue	Warm Yellow	SaaS, productivity
Forest Digital	Deep Teal	Amber	Gold	Sustainability
Midnight Coral	Deep Navy	Coral	Muted Cyan	Premium, media
Earth Modern	Terracotta	Sand	Sage	Lifestyle, wellness
Electric Minimal	Electric Violet	Near White	Yellow	Creative, bold
Monochrome Depth	Charcoal	Light Gray	Accent of choice	Minimal, luxury

Always use CSS variables:

:root {
  --color-primary: hsl(25, 95%, 53%);
  --color-secondary: hsl(200, 18%, 26%);
  --color-accent: hsl(45, 93%, 58%);
  --color-background: hsl(0, 0%, 100%);
  --color-text-primary: hsl(0, 0%, 10%);
}

---

Motion Design

Timing Guidelines:

Type	Duration	Use Case
Micro-interactions	100-200ms	Button hover, toggle
Standard transitions	200-300ms	Menu open, tab switch
Emphasis/entrance	300-500ms	Modal appear, card reveal
Page transitions	300-500ms	Route change

Easing Functions:

--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Always respect reduced motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

Anti-AI Aesthetics (CRITICAL)

What to AVOID

1. Generic Font Choices: Inter, Roboto, Arial, Helvetica
2. Cliched Color Schemes: Purple-pink gradients on white
3. Predictable Layouts: Centered hero, 3-column features, testimonials, CTA
4. Cookie-Cutter Components: Default shadcn/ui without customization
5. Convergent Choices: Same fonts/colors across different projects

How to Differentiate

1. Commit to an Aesthetic: Choose ONE direction and execute fully
2. Unexpected Typography: Pair fonts that create tension or harmony
3. Bold Color Choices: Dominant colors with sharp accents
4. Layout Innovation: Asymmetry, overlap, diagonal flow, grid-breaking
5. Memorable Moments: One well-orchestrated animation > scattered micro-interactions

---

Accessibility Requirements (WCAG 2.2 AA)

Element	Minimum Ratio
Normal text	4.5:1
Large text (18px+ bold or 24px+)	3:1
UI components	3:1

• Touch targets: Minimum 44x44px
• Focus indicators: Visible :focus-visible on all interactive elements
• Keyboard navigation: Full keyboard support

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

---

Performance Guidelines

Core Web Vitals Targets (2025)

Metric	Target
LCP	≤ 2.5s
INP	≤ 200ms
CLS	≤ 0.1

Animation Performance

/* GPU-accelerated (safe to animate) */
transform: translateX(), translateY(), scale(), rotate();
opacity: 0 to 1;

/* Avoid animating (triggers reflow) */
width, height, top, left, margin, padding;

---

Implementation Checklist

Before finalizing any component:

Typography

• NOT using banned fonts (Inter, Roboto, Arial)
• HAS distinctive typography choices
• HAS fluid typography using clamp()

Color & Theme

• NOT using purple-pink gradient on white
• HAS CSS variables for all design tokens
• PASSES contrast requirements (4.5:1)

Accessibility

• HAS :focus-visible styles
• HAS prefers-reduced-motion support
• HAS minimum 44x44px touch targets

Interactivity

• HAS all interactive states (hover, active, disabled, focus)
• HAS appropriate animation timing

Quality

• IS visually striking and memorable
• IS cohesive with a clear aesthetic point-of-view
• IS responsive across breakpoints

---

Decision Framework

When to Choose Each Aesthetic

What's the primary audience?
- Developers/Technical -> Industrial, Brutalist, Dark Mode Premium
- Creative/Design -> Maximalist, Editorial, Art Deco
- Consumer/General -> Playful, Soft/Pastel, Organic
- Enterprise/B2B -> Minimal, Luxury, Glassmorphism

What's the content type?
- Data-heavy -> Industrial, Bento Grid, Dark Mode Premium
- Content-heavy -> Editorial, Minimal
- Visual-heavy -> Maximalist, Glassmorphism
- Action-heavy -> Brutalist, Neubrutalism

What emotion should it evoke?
- Trust/Stability -> Minimal, Luxury
- Energy/Excitement -> Maximalist, Neubrutalism
- Calm/Wellness -> Organic, Soft/Pastel
- Innovation/Tech -> Retro-Futuristic, Glassmorphism
- Sophistication -> Art Deco, Editorial

---

Final Reminder

You are capable of extraordinary creative work. Don't hold back.

No design should be the same. Each interface deserves its own identity, its own character, its own memorable moments. Create frontends that surprise, delight, and leave a lasting impression.

The key is intentionality: Bold maximalism and refined minimalism both work. What matters is committing to a direction and executing it with precision.