# UI UX Pro Max

> UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

- Skill: `foundup/ui-ux-pro-max` (Agent Skill)
- Install (CLI): `npx skillmds@latest add foundup/ui-ux-pro-max`
- Raw SKILL.md: https://api.skillmd.com/api/skills/foundup/ui-ux-pro-max/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Foundup (https://skillmd.com/u/foundup)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/foundup/ui-ux-pro-max

---

# UI/UX Pro Max - Design Intelligence

**Source:** [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
**WSP 95 Stage:** PROTOTYPE (Not yet production-ready)
**Vetting Status:** Partial (content reviewed, scripts not yet verified)

---

## Overview

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.

## When to Apply

Reference these guidelines when:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements

## Rule Categories by Priority

| Priority | Category | Impact | Domain |
|----------|----------|--------|--------|
| 1 | Accessibility | CRITICAL | `ux` |
| 2 | Touch & Interaction | CRITICAL | `ux` |
| 3 | Performance | HIGH | `ux` |
| 4 | Layout & Responsive | HIGH | `ux` |
| 5 | Typography & Color | MEDIUM | `typography`, `color` |
| 6 | Animation | MEDIUM | `ux` |
| 7 | Style Selection | MEDIUM | `style`, `product` |
| 8 | Charts & Data | LOW | `chart` |

---

## Quick Reference

### 1. Accessibility (CRITICAL)
- `color-contrast` - Minimum 4.5:1 ratio for normal text
- `focus-states` - Visible focus rings on interactive elements
- `alt-text` - Descriptive alt text for meaningful images
- `aria-labels` - aria-label for icon-only buttons
- `keyboard-nav` - Tab order matches visual order
- `form-labels` - Use label with for attribute

### 2. Touch & Interaction (CRITICAL)
- `touch-target-size` - Minimum 44x44px touch targets
- `hover-vs-tap` - Use click/tap for primary interactions
- `loading-buttons` - Disable button during async operations
- `error-feedback` - Clear error messages near problem
- `cursor-pointer` - Add cursor-pointer to clickable elements

### 3. Performance (HIGH)
- `image-optimization` - Use WebP, srcset, lazy loading
- `reduced-motion` - Check prefers-reduced-motion
- `content-jumping` - Reserve space for async content

### 4. Layout & Responsive (HIGH)
- `viewport-meta` - width=device-width initial-scale=1
- `readable-font-size` - Minimum 16px body text on mobile
- `horizontal-scroll` - Ensure content fits viewport width
- `z-index-management` - Define z-index scale (10, 20, 30, 50)

### 5. Typography & Color (MEDIUM)
- `line-height` - Use 1.5-1.75 for body text
- `line-length` - Limit to 65-75 characters per line
- `font-pairing` - Match heading/body font personalities

### 6. Animation (MEDIUM)
- `duration-timing` - Use 150-300ms for micro-interactions
- `transform-performance` - Use transform/opacity, not width/height
- `loading-states` - Skeleton screens or spinners

### 7. Style Selection (MEDIUM)
- `style-match` - Match style to product type
- `consistency` - Use same style across all pages
- `no-emoji-icons` - Use SVG icons, not emojis

### 8. Charts & Data (LOW)
- `chart-type` - Match chart type to data type
- `color-guidance` - Use accessible color palettes
- `data-table` - Provide table alternative for accessibility

---

## Common Rules for Professional UI

### Icons & Visual Elements
- Use SVG icons, NOT emojis (❌ 🔔 → ✅ `<BellIcon />`)
- Consistent icon sizes (16px, 20px, 24px scale)
- Fill vs Stroke consistency

### Interaction & Cursor
- `cursor-pointer` on all clickable elements
- Hover states for interactive elements
- Active/pressed states for buttons

### Light/Dark Mode Contrast
- Light mode: dark text on light background
- Dark mode: light text on dark background
- Test both modes before shipping

### Layout & Spacing
- Use consistent spacing scale (4, 8, 12, 16, 24, 32, 48, 64)
- Maintain proper hierarchy with spacing
- Container max-width for readability

---

## Pre-Delivery Checklist

### Visual Quality
- [ ] No emoji icons (use SVG)
- [ ] Consistent icon sizes
- [ ] Proper color contrast (4.5:1 minimum)
- [ ] Consistent spacing throughout

### Interaction
- [ ] cursor-pointer on clickable elements
- [ ] Hover states work
- [ ] Loading states exist
- [ ] Error states are clear

### Light/Dark Mode
- [ ] Both modes tested
- [ ] No invisible text
- [ ] Proper shadow/border adjustments

### Layout
- [ ] Responsive at all breakpoints
- [ ] No horizontal scroll
- [ ] Proper z-index layering

### Accessibility
- [ ] Keyboard navigation works
- [ ] Focus states visible
- [ ] Screen reader friendly

---

## WSP 95 Security Review ✅

**Vetted 2026-02-08:**
- [x] SKILL.md content (safe to use)
- [x] UX guidelines (no code execution)
- [x] Design patterns (no external calls)
- [x] Python `search.py` script (SAFE - no eval, no network, no arbitrary file writes)

**Safe to use:** All components vetted. Can run Python scripts.