🎨 Design Mastery Skill

---

name: design-mastery description: Advanced UI/UX design patterns, premium aesthetics, and modern design system implementation

🎯 Purpose

Master advanced design patterns to create stunning, premium-quality user interfaces that wow users at first glance.

📋 When to Use

• Creating premium UI components
• Designing landing pages
• Building design systems
• Reviewing UI for improvements
• Implementing micro-interactions

🔧 Design Principles

1. Visual Hierarchy

/* Typography Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */

2. Color Systems

/* Premium Color Palette */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;

/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;

3. Spacing System

/* 4px Base Grid */
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */

✨ Premium Design Patterns

Glassmorphism

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Neumorphism

.neu-button {
  background: #e0e5ec;
  box-shadow: 
    5px 5px 10px #a3b1c6,
    -5px -5px 10px #ffffff;
  border-radius: 12px;
}

Gradient Backgrounds

.gradient-bg {
  background: linear-gradient(
    135deg, 
    #667eea 0%, 
    #764ba2 100%
  );
}

🎬 Micro-Interactions

Hover Effects

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

Loading States

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton {
  animation: pulse 2s infinite;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
}

📐 Layout Patterns

Pattern	Use Case
Bento Grid	Dashboard, Portfolio
Split Screen	Landing pages
Card Grid	E-commerce, Blog
Masonry	Gallery, Pinterest-style
Sticky Sidebar	Documentation

🎯 Design Checklist

• Consistent spacing (8px grid)
• Clear visual hierarchy
• Proper contrast ratios (WCAG AA)
• Hover/focus states for all interactive elements
• Loading and empty states
• Error states with helpful messages
• Responsive breakpoints
• Dark mode support

🔗 Related Skills

• accessibility-audit

  - Ensure designs are accessible

• vision-to-code

  - Convert designs to code

• code-review

  - Review design implementation