---
name: ui-ux-pro-max
description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app."
---

# UI/UX Pro Max - Design Intelligence

Searchable database of UI styles, color palettes, font pairings, chart types, and stack-specific best practices.

## How to Use

When user requests UI/UX work, follow this workflow:

### Step 1: Analyze Requirements

Extract:
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page
- **Style keywords**: minimal, playful, professional, elegant, dark mode
- **Industry**: healthcare, fintech, gaming, education
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`

### Step 2: Search Relevant Domains

1. **Product** - Get style recommendations
2. **Style** - Get detailed style guide
3. **Typography** - Get font pairings with Google Fonts imports
4. **Color** - Get color palette
5. **Landing** - Get page structure (if landing page)
6. **Chart** - Get chart recommendations (if dashboard)
7. **UX** - Get best practices and anti-patterns
8. **Stack** - Get stack-specific guidelines

## Available Stacks

| Stack | Focus |
|-------|-------|
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
| `react` | State, hooks, performance, patterns |
| `nextjs` | SSR, routing, images, API routes |
| `vue` | Composition API, Pinia, Vue Router |
| `svelte` | Runes, stores, SvelteKit |
| `swiftui` | Views, State, Navigation, Animation |
| `react-native` | Components, Navigation, Lists |
| `flutter` | Widgets, State, Layout, Theming |

## Common Rules for Professional UI

### Icons & Visual Elements
- Use SVG icons (Heroicons, Lucide), NOT emojis
- Use stable hover states (color/opacity, not scale)
- Use correct brand logos from Simple Icons
- Keep consistent icon sizing (24x24)

### Interaction
- Add `cursor-pointer` to all clickable elements
- Provide visual hover feedback
- Use `transition-colors duration-200`

### Light/Dark Mode Contrast
- Light mode glass cards: `bg-white/80` or higher
- Light mode text: `#0F172A` (slate-900)
- Muted text: `#475569` (slate-600) minimum

### Layout
- Floating navbar: add `top-4 left-4 right-4` spacing
- Account for fixed navbar height in content
- Use consistent `max-w-6xl` or `max-w-7xl`

## Pre-Delivery Checklist

### Visual Quality
- [ ] No emojis as icons (use SVG)
- [ ] Icons from consistent set (Heroicons/Lucide)
- [ ] Correct brand logos
- [ ] Hover states don't cause layout shift

### Interaction
- [ ] All clickable elements have `cursor-pointer`
- [ ] Smooth transitions (150-300ms)
- [ ] Focus states visible for keyboard navigation

### Accessibility
- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Color is not the only indicator
- [ ] `prefers-reduced-motion` respected