frontend-design

Overview

Frontend design skill for building beautiful, consistent UIs. Covers design systems, Tailwind CSS, component patterns, spacing, typography, color theory, and responsive design.

Capabilities

• Build design systems with reusable component patterns
• Master Tailwind CSS utilities and custom configurations
• Apply visual hierarchy, spacing, and typography principles
• Create responsive layouts with mobile-first approach
• Implement dark mode and theme switching

When to Use

Trigger phrases:

• "frontend design"

• "Design system patterns — component architecture, Tailwind mastery, visual hierar"

• Starting a new frontend project and need design system

• Existing UI looks inconsistent or unprofessional

• Need to implement responsive design across devices

• Building component library for team reuse

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The frontend-design workflow follows a standard pipeline pattern.

Core flow:

# frontend-design primary flow
input = prepare(raw_data)
result = process(input, config={architecture, component, design, frontend, hierarchy})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# frontend-design primary flow
input = prepare(raw_data)
result = process(input, config={architecture, component, design, frontend, hierarchy})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Design Token System

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
        neutral: { 50: '#fafafa', 500: '#737373', 900: '#171717' }
      },
      spacing: { '18': '4.5rem', '88': '22rem' },
      fontSize: { 'display': ['3rem', { lineHeight: '1.2', fontWeight: '700' }] }
    }
  }
}