ui-ux-pro-max

# UI/UX Pro Max — Design Intelligence Skill

This skill activates AI-powered design intelligence for producing polished, production-ready UI/UX work. It embeds 67 UI styles, 99 UX guidelines, pre-delivery checklists, and a structured design system workflow so the AI can generate complete, coherent design systems without any external tooling.

## When to Use This Skill

Activate this skill whenever the user asks to:
- **Build** a UI, screen, component, page, or application
- **Design** a layout, design system, style guide, or visual identity
- **Create** mockups, wireframes, prototypes, or production-ready code
- **Implement** a frontend, dashboard, landing page, or mobile screen
- **Review** an existing UI for quality, consistency, or accessibility issues
- **Fix** design problems: poor contrast, broken layouts, inconsistent spacing
- **Improve** an existing interface's visual quality or usability

---

## Design System Generation Workflow

### Step 1 — Analyze Requirements

Before selecting any style or color, extract the following from the user's request:

1. **Product type** — What is being built? (SaaS dashboard, e-commerce store, mobile app, landing page, etc.)
2. **Industry** — Which industry category applies? (See Industry Categories table below.)
3. **Target audience** — Who are the end users? (age, technical level, accessibility needs)
4. **Tech stack** — Which framework or platform? (See Supported Tech Stacks below.)
5. **Tone/brand** — Any stated brand personality, color preferences, or aesthetic direction?
6. **Constraints** — Dark mode required? Accessibility level (AA/AAA)? Performance budget?

### Step 2 — Select Style, Color & Typography

Using the analysis from Step 1:

1. **Choose a UI style** from the 67 UI Styles table that best matches the product type and industry.
2. **Select a color palette** appropriate to the industry (use the Industry Categories table to guide palette mood).
3. **Choose a font pairing** — a display/heading font + a body font that match the chosen style's personality.
4. **Define semantic color tokens**: `primary`, `secondary`, `surface`, `error`, `success`, `warning`, `text`, `text-muted`, `border`.
5. **Define a spacing scale** using 4pt/8dp increments: `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96`.
6. **Define a type scale**: `12 / 14 / 16 / 18 / 24 / 32 / 48`.

### Step 3 — Implement

Apply the design system to the requested output:

- Use the chosen style's visual language consistently across all components.
- Apply the spacing scale — never use arbitrary pixel values.
- Apply the type scale — never use arbitrary font sizes.
- Implement all 10 rule categories from the Quick Reference (§1–§10) as hard constraints.
- Validate against the Pre-Delivery Checklist before finalizing output.

### Step 4 — Validate

Before presenting the final output, run through the Pre-Delivery Checklist (see below). Fix any failing items. Only present output that passes all checklist items.

---

## Rule Categories — Priority Table

| Priority | Category | Level | Description |
|----------|----------|-------|-------------|
| 1 | Accessibility | **CRITICAL** | Color contrast, focus states, ARIA, keyboard nav, screen reader support |
| 2 | Touch & Interaction | **CRITICAL** | Touch target sizes, tap feedback, safe areas, loading states |
| 3 | Performance | **HIGH** | Image optimization, lazy loading, bundle splitting, list virtualization |
| 4 | Style Selection | **HIGH** | Style-product match, consistency, icon sets, dark mode pairing |
| 5 | Layout & Responsive | **HIGH** | Mobile-first, breakpoints, no horizontal scroll, spacing scale |
| 6 | Typography & Color | **MEDIUM** | Line height, line length, font pairing, semantic color tokens |
| 7 | Animation | **MEDIUM** | Duration/easing, transform-only, reduced-motion, interruptibility |
| 8 | Forms & Feedback | **MEDIUM** | Labels, error placement, submit feedback, inline validation |
| 9 | Navigation Patterns | **HIGH** | Bottom nav limits, back behavior, deep linking, adaptive nav |
| 10 | Charts & Data | **LOW** | Chart type matching, accessible palettes, responsive charts |

---

## Quick Reference — 99 UX Guidelines

### §1 Accessibility (CRITICAL)

| Rule | Guideline |
|------|-----------|
| `color-contrast` | Minimum 4.5:1 ratio for normal text (large text 3:1) |
| `focus-states` | Visible focus rings on interactive elements (2–4px) |
| `alt-text` | Descriptive alt text for meaningful images |
| `aria-labels` | `aria-label` for icon-only buttons |
| `keyboard-nav` | Tab order matches visual order; full keyboard support |
| `form-labels` | Use `<label>` with `for` attribute |
| `skip-links` | Skip to main content for keyboard users |
| `heading-hierarchy` | Sequential h1→h6, no level skip |
| `color-not-only` | Don't convey info by color alone (add icon/text) |
| `dynamic-type` | Support system text scaling; avoid truncation as text grows |
| `reduced-motion` | Respect `prefers-reduced-motion`; reduce/disable animations when requested |
| `voiceover-sr` | Meaningful `accessibilityLabel`/`accessibilityHint`; logical reading order |

### §2 Touch & Interaction (CRITICAL)

| Rule | Guideline |
|------|-----------|
| `touch-target-size` | Min 44×44pt (Apple) / 48×48dp (Material) |
| `touch-spacing` | Minimum 8px/8dp gap between touch targets |
| `hover-vs-tap` | Use click/tap for primary interactions; don't rely on hover alone |
| `loading-buttons` | Disable button during async operations; show spinner or progress |
| `error-feedback` | Clear error messages near problem |
| `cursor-pointer` | Add `cursor-pointer` to clickable elements (Web) |
| `tap-delay` | Use `touch-action: manipulation` to reduce 300ms delay (Web) |
| `press-feedback` | Visual feedback on press (ripple/highlight) |
| `safe-area-awareness` | Keep primary touch targets away from notch, Dynamic Island, gesture bar |

### §3 Performance (HIGH)

| Rule | Guideline |
|------|-----------|
| `image-optimization` | Use WebP/AVIF, responsive images (`srcset`/`sizes`), lazy load non-critical assets |
| `image-dimension` | Declare `width`/`height` or use `aspect-ratio` to prevent layout shift (CLS) |
| `font-loading` | Use `font-display: swap/optional` to avoid invisible text (FOIT) |
| `critical-css` | Prioritize above-the-fold CSS |
| `lazy-loading` | Lazy load non-hero components via dynamic import / route-level splitting |
| `bundle-splitting` | Split code by route/feature to reduce initial load and TTI |
| `reduce-reflows` | Avoid frequent layout reads/writes; batch DOM reads then writes |
| `virtualize-lists` | Virtualize lists with 50+ items |
| `main-thread-budget` | Keep per-frame work under ~16ms for 60fps |
| `debounce-throttle` | Use debounce/throttle for high-frequency events |

### §4 Style Selection (HIGH)

| Rule | Guideline |
|------|-----------|
| `style-match` | Match style to product type |
| `consistency` | Use same style across all pages |
| `no-emoji-icons` | Use SVG icons (Heroicons, Lucide), not emojis |
| `color-palette-from-product` | Choose palette from product/industry |
| `effects-match-style` | Shadows, blur, radius aligned with chosen style |
| `platform-adaptive` | Respect platform idioms (iOS HIG vs Material) |
| `state-clarity` | Make hover/pressed/disabled states visually distinct |
| `dark-mode-pairing` | Design light/dark variants together |
| `icon-style-consistent` | Use one icon set/visual language across the product |
| `primary-action` | Each screen should have only one primary CTA |

### §5 Layout & Responsive (HIGH)

| Rule | Guideline |
|------|-----------|
| `viewport-meta` | `width=device-width initial-scale=1` (never disable zoom) |
| `mobile-first` | Design mobile-first, then scale up |
| `breakpoint-consistency` | Use systematic breakpoints (375 / 768 / 1024 / 1440) |
| `readable-font-size` | Minimum 16px body text on mobile |
| `line-length-control` | Mobile 35–60 chars per line; desktop 60–75 chars |
| `horizontal-scroll` | No horizontal scroll on mobile |
| `spacing-scale` | Use 4pt/8dp incremental spacing system |
| `container-width` | Consistent max-width on desktop (`max-w-6xl` / `7xl`) |
| `z-index-management` | Define layered z-index scale |
| `fixed-element-offset` | Fixed navbar/bottom bar must reserve safe padding |
| `viewport-units` | Prefer `min-h-dvh` over `100vh` on mobile |

### §6 Typography & Color (MEDIUM)

| Rule | Guideline |
|------|-----------|
| `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 |
| `font-scale` | Consistent type scale (e.g. 12 14 16 18 24 32) |
| `contrast-readability` | Darker text on light backgrounds |
| `color-semantic` | Define semantic color tokens (primary, secondary, error, surface) |
| `color-dark-mode` | Dark mode uses desaturated / lighter tonal variants, not inverted colors |
| `color-accessible-pairs` | Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA) |
| `truncation-strategy` | Prefer wrapping over truncation |
| `whitespace-balance` | Use whitespace intentionally to group related items |

### §7 Animation (MEDIUM)

| Rule | Guideline |
|------|-----------|
| `duration-timing` | Use 150–300ms for micro-interactions; complex transitions ≤400ms |
| `transform-performance` | Use `transform`/`opacity` only; avoid animating `width`/`height`/`top`/`left` |
| `loading-states` | Show skeleton or progress indicator when loading exceeds 300ms |
| `easing` | Use `ease-out` for entering, `ease-in` for exiting |
| `motion-meaning` | Every animation must express a cause-effect relationship |
| `spring-physics` | Prefer spring/physics-based curves for natural feel |
| `exit-faster-than-enter` | Exit animations shorter than enter (~60–70% of enter duration) |
| `interruptible` | Animations must be interruptible by user tap/gesture |
| `no-blocking-animation` | Never block user input during an animation |

### §8 Forms & Feedback (MEDIUM)

| Rule | Guideline |
|------|-----------|
| `input-labels` | Visible label per input (not placeholder-only) |
| `error-placement` | Show error below the related field |
| `submit-feedback` | Loading then success/error state on submit |
| `required-indicators` | Mark required fields (e.g. asterisk) |
| `empty-states` | Helpful message and action when no content |
| `toast-dismiss` | Auto-dismiss toasts in 3–5s |
| `confirmation-dialogs` | Confirm before destructive actions |
| `inline-validation` | Validate on blur (not keystroke) |
| `input-type-keyboard` | Use semantic input types (`email`, `tel`, `number`) |
| `focus-management` | After submit error, auto-focus the first invalid field |

### §9 Navigation Patterns (HIGH)

| Rule | Guideline |
|------|-----------|
| `bottom-nav-limit` | Bottom navigation max 5 items; use labels with icons |
| `back-behavior` | Back navigation must be predictable and consistent |
| `deep-linking` | All key screens must be reachable via deep link / URL |
| `nav-label-icon` | Navigation items must have both icon and text label |
| `nav-state-active` | Current location must be visually highlighted |
| `modal-escape` | Modals and sheets must offer a clear close/dismiss affordance |
| `state-preservation` | Navigating back must restore previous scroll position, filter state |
| `adaptive-navigation` | Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav |
| `navigation-consistency` | Navigation placement must stay the same across all pages |

### §10 Charts & Data (LOW)

| Rule | Guideline |
|------|-----------|
| `chart-type` | Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut) |
| `color-guidance` | Use accessible color palettes; avoid red/green only pairs |
| `data-table` | Provide table alternative for accessibility |
| `legend-visible` | Always show legend; position near the chart |
| `tooltip-on-interact` | Provide tooltips/data labels on hover or tap |
| `axis-labels` | Label axes with units and readable scale |
| `responsive-chart` | Charts must reflow or simplify on small screens |
| `empty-data-state` | Show meaningful empty state when no data exists |
| `animation-optional` | Chart entrance animations must respect `prefers-reduced-motion` |

---

## 67 UI Styles Reference

### General Styles (49)

| # | Style Name | Best For |
|---|-----------|----------|
| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation |
| 2 | Neumorphism | Health/wellness apps, meditation platforms |
| 3 | Glassmorphism | Modern SaaS, financial dashboards |
| 4 | Brutalism | Design portfolios, artistic projects |
| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive |
| 6 | Vibrant & Block-based | Startups, creative agencies, gaming |
| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms |
| 8 | Accessible & Ethical | Government, healthcare, education |
| 9 | Claymorphism | Educational apps, children's apps, SaaS |
| 10 | Aurora UI | Modern SaaS, creative agencies |
| 11 | Retro-Futurism | Gaming, entertainment, music platforms |
| 12 | Flat Design | Web apps, mobile apps, startup MVPs |
| 13 | Skeuomorphism | Legacy apps, gaming, premium products |
| 14 | Liquid Glass | Premium SaaS, high-end e-commerce |
| 15 | Motion-Driven | Portfolio sites, storytelling platforms |
| 16 | Micro-interactions | Mobile apps, touchscreen UIs |
| 17 | Inclusive Design | Public services, education, healthcare |
| 18 | Zero Interface | Voice assistants, AI platforms |
| 19 | Soft UI Evolution | Modern enterprise apps, SaaS |
| 20 | Neubrutalism | Gen Z brands, startups, Figma-style |
| 21 | Bento Box Grid | Dashboards, product pages, portfolios |
| 22 | Y2K Aesthetic | Fashion brands, music, Gen Z |
| 23 | Cyberpunk UI | Gaming, tech products, crypto apps |
| 24 | Organic Biophilic | Wellness apps, sustainability brands |
| 25 | AI-Native UI | AI products, chatbots, copilots |
| 26 | Memphis Design | Creative agencies, music, youth brands |
| 27 | Vaporwave | Music platforms, gaming, portfolios |
| 28 | Dimensional Layering | Dashboards, card layouts, modals |
| 29 | Exaggerated Minimalism | Fashion, architecture, portfolios |
| 30 | Kinetic Typography | Hero sections, marketing sites |
| 31 | Parallax Storytelling | Brand storytelling, product launches |
| 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial |
| 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity |
| 34 | Pixel Art | Indie games, retro tools, creative |
| 35 | Bento Grids | Product features, dashboards, personal |
| 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR |
| 37 | E-Ink / Paper | Reading apps, digital newspapers |
| 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists |
| 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health |
| 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites |
| 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands |
| 42 | Nature Distilled | Wellness brands, sustainable products |
| 43 | Interactive Cursor Design | Creative portfolios, interactive |
| 44 | Voice-First Multimodal | Voice assistants, accessibility apps |
| 45 | 3D Product Preview | E-commerce, furniture, fashion |
| 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative |
| 47 | Editorial Grid / Magazine | News sites, blogs, magazines |
| 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech |
| 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands |

### Landing Page Styles (8)

| # | Style Name | Best For |
|---|-----------|----------|
| 1 | Hero-Centric Design | Products with strong visual identity |
| 2 | Conversion-Optimized | Lead generation, sales pages |
| 3 | Feature-Rich Showcase | SaaS, complex products |
| 4 | Minimal & Direct | Simple products, apps |
| 5 | Social Proof-Focused | Services, B2C products |
| 6 | Interactive Product Demo | Software, tools |
| 7 | Trust & Authority | B2B, enterprise, consulting |
| 8 | Storytelling-Driven | Brands, agencies, nonprofits |

### BI/Analytics Dashboard Styles (10)

| # | Style Name | Best For |
|---|-----------|----------|
| 1 | Data-Dense Dashboard | Complex data analysis |
| 2 | Heat Map & Heatmap Style | Geographic/behavior data |
| 3 | Executive Dashboard | C-suite summaries |
| 4 | Real-Time Monitoring | Operations, DevOps |
| 5 | Drill-Down Analytics | Detailed exploration |
| 6 | Comparative Analysis Dashboard | Side-by-side comparisons |
| 7 | Predictive Analytics | Forecasting, ML insights |
| 8 | User Behavior Analytics | UX research, product analytics |
| 9 | Financial Dashboard | Finance, accounting |
| 10 | Sales Intelligence Dashboard | Sales teams, CRM |

---

## Industry Categories — Design System Reasoning

Use this table to guide style selection, color palette mood, and typography tone for each industry.

| Sector | Product Types |
|--------|--------------|
| **Tech & SaaS** | SaaS, Micro SaaS, B2B Service, Developer Tool, AI/Chatbot Platform, Cybersecurity |
| **Finance** | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing |
| **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health |
| **E-commerce** | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery |
| **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment |
| **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming |
| **Lifestyle** | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker |

**Industry → Style guidance:**
- **Tech & SaaS**: Prefer Minimalism, Glassmorphism, AI-Native UI, Bento Box Grid, or Soft UI Evolution.
- **Finance**: Prefer Minimalism, Accessible & Ethical, Dimensional Layering, or Glassmorphism. Avoid playful/chaotic styles.
- **Healthcare**: Prefer Accessible & Ethical, Inclusive Design, Flat Design, or Soft UI Evolution. Accessibility rules are non-negotiable.
- **E-commerce (General)**: Prefer Flat Design, Vibrant & Block-based, or Conversion-Optimized landing styles.
- **E-commerce (Luxury)**: Prefer Exaggerated Minimalism, Liquid Glass, or Vintage Analog.
- **Creative/Portfolio**: Prefer Brutalism, Neubrutalism, Anti-Polish, Kinetic Typography, or Parallax Storytelling.
- **Gaming**: Prefer Cyberpunk UI, HUD/Sci-Fi FUI, Retro-Futurism, Pixel Art, or 3D & Hyperrealism.
- **Wellness/Lifestyle**: Prefer Neumorphism, Organic Biophilic, Nature Distilled, or Claymorphism.
- **Dashboards/Analytics**: Prefer Data-Dense Dashboard, Executive Dashboard, or Bento Box Grid.

---

## Supported Tech Stacks

This skill generates design system output for the following tech stacks. Always adapt component syntax, class names, and patterns to the target stack:

| Category | Stacks |
|----------|--------|
| **Web (React ecosystem)** | React, Next.js, Astro |
| **Web (Vue ecosystem)** | Vue, Nuxt.js, Nuxt UI |
| **Web (Other)** | Svelte, Angular, HTML + Tailwind CSS |
| **Component libraries** | shadcn/ui, Nuxt UI |
| **Mobile (iOS)** | SwiftUI |
| **Mobile (Cross-platform)** | React Native, Flutter |
| **Mobile (Android)** | Jetpack Compose |
| **Backend-driven** | Laravel (Blade + Alpine.js / Livewire) |

**Stack-specific notes:**
- **shadcn/ui**: Use CSS variables for theming; follow the `cn()` utility pattern; use Radix UI primitives for accessibility.
- **Flutter**: Use `ThemeData` for design tokens; prefer `Material 3` color scheme; use `MediaQuery` for responsive breakpoints.
- **SwiftUI**: Follow iOS HIG; use `@Environment(\.colorScheme)` for dark mode; use `safeAreaInsets` for safe areas.
- **Tailwind CSS**: Define custom tokens in `tailwind.config.js`; use `@layer components` for reusable patterns.

---

## Pre-Delivery Checklist

Run this checklist before presenting any UI output. Every item must pass.

### Icons & Visual Language
- [ ] No emojis used as icons (use SVG instead)
- [ ] All icons come from a consistent icon family and style

### Interactivity
- [ ] `cursor-pointer` on all clickable elements
- [ ] Hover states with smooth transitions (150–300ms)
- [ ] All tappable elements provide clear pressed feedback

### Accessibility
- [ ] Light mode: text contrast 4.5:1 minimum
- [ ] Focus states visible for keyboard nav
- [ ] `prefers-reduced-motion` respected
- [ ] Screen reader focus order matches visual order

### Responsive Layout
- [ ] Responsive: 375px, 768px, 1024px, 1440px
- [ ] No horizontal scroll on mobile
- [ ] Safe areas respected (notch, gesture bar)
- [ ] Viewport meta tag present and correct

### Touch & Mobile
- [ ] Touch targets ≥44×44pt (iOS) / 48×48dp (Android)
- [ ] Safe areas respected (notch, gesture bar)

### Dark Mode
- [ ] Both light and dark mode tested (if dark mode is in scope)

---

## Design System Output Template

When generating a design system, structure the output as follows:

```
## Design System: [Product Name]

### Style
- **UI Style**: [chosen style from the 67 styles]
- **Rationale**: [1–2 sentences explaining why this style fits the product]

### Color Tokens
- `--color-primary`: #...
- `--color-secondary`: #...
- `--color-surface`: #...
- `--color-surface-elevated`: #...
- `--color-error`: #...
- `--color-success`: #...
- `--color-warning`: #...
- `--color-text`: #...
- `--color-text-muted`: #...
- `--color-border`: #...

### Typography
- **Heading font**: [font name] — [weight range]
- **Body font**: [font name] — [weight range]
- **Type scale**: 12 / 14 / 16 / 18 / 24 / 32 / 48px

### Spacing Scale
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96px

### Border Radius
- Small: 4px (inputs, tags)
- Medium: 8px (cards, buttons)
- Large: 16px (modals, sheets)
- Full: 9999px (pills, avatars)

### Shadows
- Subtle: 0 1px 3px rgba(0,0,0,0.08)
- Card: 0 4px 12px rgba(0,0,0,0.10)
- Elevated: 0 8px 24px rgba(0,0,0,0.14)

### Component Notes
[Key component patterns for the chosen stack]
```

---

## Full Python-Powered Version

This bundled skill is a self-contained distillation of the upstream **UI UX Pro Max** skill. The full version includes:

- **161 color palettes** with industry-specific recommendations (CSV data)
- **57 font pairings** with personality tags (CSV data)
- **25 chart types** with data-type matching rules (CSV data)
- **Python-powered design system generator** (`search.py`) that queries the CSV data to produce tailored recommendations
- **Automated style matching** based on product type + industry + audience inputs

The full Python-powered version is available at:
**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill** (v2.5.0, MIT License, by NextLevelBuilder)

To use the full version, clone that repository and follow its setup instructions. The bundled skill above covers the core design intelligence and all 99 UX guidelines without requiring Python or CSV data files.