Frontend Design

Create distinctive, production-grade frontend interfaces with intentional aesthetics.

Purpose

This skill guides creation of frontend interfaces that feel genuinely designed—not auto-generated. It covers design thinking, interaction patterns, motion, forms, layout, accessibility, and performance.

When to Activate

Use this skill when:

• Building UI components or pages
• Making design decisions for frontend work
• Reviewing UI implementation quality
• Planning interaction patterns

1. Design Thinking

Before writing any code, establish your design intent:

Purpose & Context

What problem are we solving? Who uses this? Think about the user's emotional state, their goals, and what success looks like.

Aesthetic Direction

Choose a clear visual direction:

Key insight: Bold maximalism and refined minimalism both work—the magic is in commitment, not intensity.

The Memorable Detail

Ask yourself: What's the one thing someone will remember about this interface? Maybe it's a delightful hover state, an unexpected color choice, or how perfectly the typography flows.

2. Design System Integration

Color Philosophy

/* Use semantic tokens, not arbitrary colors */
--bg-primary      /* Main background */
--bg-secondary    /* Elevated surfaces */
--fg-primary      /* Primary text */
--fg-secondary    /* Secondary text */
--border-primary  /* Interactive borders */
--border-secondary /* Container borders */
--brand-primary   /* Accent/CTA color */

Typography Hierarchy

Border Philosophy

Borders should support, not dominate:

// Default: nearly invisible
className="border border-border-secondary"

// Hover: slightly more visible
className="hover:border-border-primary"

// Focus: full visibility
className="focus:border-border-primary"

3. Interaction Patterns

Hit Targets & Touch

// Expand hit target beyond visual bounds
<button className="p-2 -m-2">
  <Icon className="w-6 h-6" /> {/* Visual is 24px, hit area is 40px */}
</button>

Focus Management

• Use :focus-visible over :focus to avoid focus rings on click
• Use :focus-within for grouped controls (e.g., input with icon)
• Every focusable element requires a visible focus state
• Implement focus traps in modals/drawers per WAI-ARIA patterns

Loading States

// Don't: Show spinner immediately
{isLoading && <Spinner />}

// Do: Delay spinner appearance
const showSpinner = isLoading && loadingDuration > 200;

Optimistic Updates

Update the UI immediately when success is likely:

1. Show change instantly
2. Send request to server
3. On success: confirm (subtle)
4. On failure: rollback + show error + offer retry

Destructive Actions

4. Motion & Animation

When to Animate

Animate only when it serves a purpose:

• Clarify cause/effect: Show where something came from or went
• Maintain context: Help users track changes during transitions
• Deliberate delight: Reward interactions meaningfully

Don't animate for decoration or to fill silence.

Easing Selection

Performance Rules

GPU-accelerated (prefer these):

transform: translate(), scale(), rotate();
opacity;
filter;

Layout-triggering (avoid animating):

width, height, padding, margin;
top, left, right, bottom;
font-size, line-height;

Anti-patterns:

/* Never: Animates everything including layout */
transition: all 0.3s;

/* Do: Explicit properties only */
transition: transform 0.3s, opacity 0.3s;

Accessibility (prefers-reduced-motion)

Always honor the user's motion preference:

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

5. Form Design

Submission Behavior

Validation Patterns

Rules:

• Show errors adjacent to the field, not in a summary
• On submit error, focus the first invalid field
• Don't pre-disable submit—let users discover issues

Mobile Considerations

• Input font ≥16px prevents iOS auto-zoom
• Use correct type and inputmode for better keyboards:

6. Layout Principles

Optical Alignment

Geometry lies. Adjust ±1–2px when perception beats math:

• Circles and triangles appear smaller than squares at same dimensions
• Text with descenders needs more bottom padding
• Icons may need nudging to appear centered

Nested Border Radius

Child radius must be ≤ parent radius, and curves should be concentric:

Outer radius: 16px
Gap (padding): 8px
Inner radius: 16px - 8px = 8px

Layered Shadows

Use ≥2 shadow layers to mimic real light (ambient + direct):

box-shadow:
  0 1px 2px rgba(0,0,0,0.06),    /* Tight, direct light */
  0 4px 12px rgba(0,0,0,0.08);   /* Soft, ambient light */

7. Accessibility

Contrast Standards

• Prefer APCA over WCAG 2 for more accurate perceptual contrast
• Interactive states must have more contrast than rest state

Color Independence

Never rely on color alone for meaning:

• Error states: color + icon + text
• Status indicators: color + label
• Charts: color + pattern or label

Screen Reader Support

• Icon-only buttons require aria-label
• Decorative elements get aria-hidden="true"
• Use native elements (button, a, label) before ARIA
• Maintain logical heading hierarchy (h1 → h2 → h3)

8. Performance

Response Time Targets

Rendering Optimization

• Virtualize