---
name: ui-ux-pro-max
description: Advanced design intelligence for professional UI/UX. Use for implementing modern design patterns (Glassmorphism, Bento Grid), ensuring accessibility, and generating tailored design systems for web and mobile.
---

# UI/UX Pro Max

This skill provides professional-grade UI/UX design guidance, focusing on modern aesthetics, accessibility, and consistency.

## Capabilities

### 1. Design System Generation
Can generate a complete design system including:
- **Colors**: Primary, secondary, semantic, and neutral palettes (OKLCH/HSL).
- **Typography**: Font pairings, scales, and line heights.
- **Spacing**: Consistent spacing grids (4px/8px rule).
- **Components**: Variations for buttons, inputs, cards, etc.

### 2. Design Patterns
- **Glassmorphism**: Backdrop filters, transluscent layers.
- **Bento Grid**: Grid-based layouts for dashboards and landing pages.
- **Neumorphism**: Soft UI shadows (use sparingly).
- **Dark Mode**: High contrast, desaturated colors for eye comfort.

### 3. Review & Refactor
- Check for accessibility (WCAG contrast ratios).
- Identify "generic" designs and suggest premium alternatives.
- Validate responsive behavior across devices.

## Rules of Thumb

- **Whitespace**: More is usually better. Give content room to breathe.
- **Consistency**: Use variables for everything (colors, spacing, radius).
- **Feedback**: Every interaction (hover, click, focus) needs visual feedback.
- **Motion**: Use subtle micro-animations (200-300ms) to make the UI feel alive.

## When to Use

- "Make this page look more premium."
- "Design a dashboard for this data."
- "Improve the UX of this form."
- "Create a dark mode theme."