/ui-ux-pro-max

name: ui-ux-pro-max
description: "Use when designing, building or reviewing UI/UX for a web or mobile app: picking styles, color palettes, typography, layout, animation or charts, or checking accessibility and touch targets. Priority-ranked rules ordered by impact."
domain: design

UI/UX Pro Max - Design Intelligence

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

How to Use

Search specific domains using the CLI tool below.

---

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

**macOS:**

brew install python3

**Ubuntu/Debian:**

sudo apt update && sudo apt install python3

**Windows:**

winget install Python.Python.3.12

---

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

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

Step 2: Generate Design System (REQUIRED)

**Always start with `--design-system`** to get comprehensive recommendations with reasoning:

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

This command: 1. Searches 5 domains in parallel (product, style, color, landing, typography) 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches 3. Returns complete design system: pattern, style, colors, typography, effects 4. Includes anti-patterns to avoid

**Example:**

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for **hierarchical retrieval across sessions**, add `--persist`:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

• `design-system/MASTER.md` — Global Source of Truth with all design rules
• `design-system/pages/` — Folder for page-specific overrides

**With page-specific override:**

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

• `design-system/pages/dashboard.md` — Page-specific deviations from Master

**How hierarchical retrieval works:** 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` 2. If the page file exists, its rules **override** the Master file 3. If not, use `design-system/MASTER.md` exclusively

**Context-aware retrieval prompt:**

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not,