---
name: ck-ui-ux-pro-max
description: UI/UX design intelligence with 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks. Use when building, designing, reviewing, or improving websites, dashboards, landing pages, or mobile app UI.
---

# UI/UX Pro Max

Comprehensive design guide: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 stacks.

## When to Use

- Designing new UI components, pages, or full products
- Choosing color palettes and typography pairings
- Reviewing code for UX issues or accessibility
- Building landing pages, dashboards, e-commerce, SaaS, portfolios
- Implementing glassmorphism, brutalism, neumorphism, bento grid, dark mode

## Don't Use When

- Pure backend work with no UI concerns
- Already have a finalized design system — implement directly

## Workflow

### Step 1: Analyze Requirements

Extract: product type (SaaS/e-commerce/portfolio), style keywords, industry, tech stack (default: `html-tailwind`)

### Step 2: Generate Design System (Always First)

```bash
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

Returns: pattern, style, colors, typography, effects, anti-patterns.

### Step 3: Supplement Searches (as needed)

```bash
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>
```

| Need | Domain |
|------|--------|
| More style options | `style` |
| Chart recommendations | `chart` |
| UX best practices | `ux` |
| Alternative fonts | `typography` |
| Landing structure | `landing` |

### Step 4: Stack Guidelines

```bash
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
```

Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`

## Priority Rules

| Priority | Rule | Impact |
|----------|------|--------|
| 1 | Color contrast ≥4.5:1 | CRITICAL |
| 2 | Touch targets ≥44×44px | CRITICAL |
| 3 | Image optimization (WebP, lazy load) | HIGH |
| 4 | Viewport meta tag | HIGH |
| 5 | Line height 1.5–1.75 | MEDIUM |
| 6 | Transitions 150–300ms | MEDIUM |
| 7 | No emoji as UI icons (use SVG) | MEDIUM |

## Pre-Delivery Checklist

- [ ] No emojis as icons (use Heroicons/Lucide SVG)
- [ ] All clickable elements have `cursor-pointer`
- [ ] Light mode text contrast ≥4.5:1
- [ ] Glass elements visible in light mode (`bg-white/80+`)
- [ ] Floating navbar has edge spacing (`top-4 left-4 right-4`)
- [ ] No content hidden behind fixed navbars
- [ ] Responsive at 375px, 768px, 1024px, 1440px
- [ ] `prefers-reduced-motion` respected
- [ ] All images have alt text

## Output Formats

```bash
# ASCII box (default, terminal)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system

# Markdown (for docs)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -f markdown
```