ui-ux-pro-max

name: ui-ux-pro-max description: "Design intelligence skill providing UI styles, color palettes, font pairings, chart types, and UX guidelines for building professional interfaces. Based on the open-source UI UX Pro Max project (github.com/nextlevelbuilder/ui-ux-pro-max-skill)."

UI UX Pro Max — Design Intelligence

Searchable design intelligence for building professional UI/UX. Covers 67+ UI styles, 95+ color palettes, 56+ font pairings, 24+ chart types, 29+ landing patterns, and comprehensive UX guidelines.

When to Apply

Use this skill when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

• Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
• Creating or refactoring UI components (buttons, modals, forms, tables, charts)
• Choosing color schemes, typography systems, spacing, or layout systems
• Reviewing UI code for UX, accessibility, or visual consistency
• Implementing navigation, animations, or responsive behavior
• Making product-level design decisions (style, hierarchy, branding)
• Improving perceived quality, clarity, or usability

Skip

• Pure backend logic
• API or database design only
• Non-UI performance optimization
• Infrastructure or DevOps
• Non-visual scripting or automation

Rule of thumb: If the task changes how something looks, feels, moves, or is interacted with, use this skill.

How to Use This Skill

Workflow

Step 1: Analyze User Requirements

Extract from the user request:

• Product type: SaaS, E-commerce, Portfolio, Healthcare, Fintech, Entertainment, etc.
• Target audience: Consumer, Enterprise, Developer, etc.
• Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
• Tech stack: React, Next.js, Vue, Svelte, React Native, etc.

Step 2: Select Design System

Match the product type to a recommended style, color palette, typography, and layout pattern using the databases below.

Step 3: Apply Quality Rules

Use the Quick Reference checklist (Priority 1-10) to ensure professional quality.

Step 4: Deliver with Checklist

Run through the Pre-Delivery Checklist before presenting the final result.

Design Style Database (67+ Styles)

Core Styles

Style-Product Matching

Color Palette Database (95+ Palettes)

By Product Type

Dark Mode Palette Rules

• Use desaturated/lighter tonal variants, not inverted colors
• Background: #000000 (OLED) or #0F172A (soft dark)
• Surface: #1E293B or #18181B
• Text: #E2E8F0 (primary), #94A3B8 (secondary)
• Borders: rgba(255,255,255,0.1) or #2D3748
• Test contrast separately from light mode

Typography Database (56+ Pairings)

Recommended Pairings

Type Scale

xs: 12px | sm: 14px | base: 16px | lg: 18px | xl: 20px
2xl: 24px | 3xl: 30px | 4xl: 36px | 5xl: 48px | 6xl: 60px

Typography Rules

• Body text minimum 16px on mobile (avoids iOS auto-zoom)
• Line height: 1.5–1.75 for body, 1.1–1.3 for headings
• Line length: 35–60 chars mobile, 60–75 chars desktop
• Font weight hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500)
• Use font-display: swap to avoid FOIT

Chart Type Database (24+ Types)

Landing Page Patterns (29+ Patterns)

Quick Reference — Quality Rules by Priority

§1. Accessibility (CRITICAL)

• color-contrast — Minimum 4.5:1 for normal text (3:1 for large text)
• focus-states — Visible focus rings (2–4px) on all 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; full keyboard support
• heading-hierarchy — Sequential h1→h6, no level skipping
• color-not-only — Don't convey info by color alone (add icon/text)
• reduced-motion — Respect prefers-reduced-motion
• dynamic-type — Support system text scaling

§2. Touch & Interaction (CRITICAL)

• touch-target-size — Min 44×44pt (Apple) / 48×48dp (Material)
• touch-spacing — Minimum 8px gap between touch targets
• hover-vs-tap — Don't rely on hover alone; use click/tap
• loading-buttons — Disable button during async; show spinner
• error-feedback — Clear error messages near the problem
• press-feedback — Visual feedback on press (ripple/highlight)
• safe-area-awareness — Keep targets away from notch, gesture bar, screen edges

§3. Performance (HIGH)

• image-optimization — Use WebP/AVIF, srcset, lazy load non-critical
• image-dimension — Declare width/height to prevent layout shift (CLS)
• font-loading — font-display: swap to avoid invisible text
• lazy-loading — Lazy load below-fold components
• bundle-splitting — Split code by route/feature
• virtualize-lists — Virtualize lists with 50+ items
• progressive-loading — Skeleton screens instead of spinners for >1s ops
• debounce-throttle — Debounce/throttle high-frequency events

§4. Style Selection (HIGH)

• style-match — Match style to product type
• consistency — Same style across all pages
• no-emoji-icons — Use SVG icons (Lucide, Heroicons, Phosphor), NOT emojis
• effects-match-style — Shadows, blur, radius aligned with chosen style
• elevation-consistent — Consistent shadow scale for cards, sheets, modals
• dark-mode-pairing — Design light/dark variants together
• icon-style-consistent — One icon set with consistent stroke/corner style
• primary-action — One primary CTA per screen; secondary actions subordinate

§5. Layout & Responsive (HIGH)

• mobile-first — Design mobile-first, then scale up
• breakpoint-consistency — Systematic breakpoints (375 / 768 / 1024 / 1440)
• readable-font-size — Min 16px body on mobile
• horizontal-scroll — No horizontal scroll on mobile
• spacing-scale — 4pt/8dp incremental spacing system
• z-index-management — Defined z-index scale (0/10/20/40/100/1000)
• viewport-units — Prefer min-h-dvh over 100vh on mobile

§6. Typography & Color (MEDIUM)

• line-height — 1.5–1.75 for body text
• line-length — 65–75 characters per line
• font-scale — Consistent type scale (12/14/16/18/24/32)
• color-semantic — Semantic color tokens, not raw hex in components
• color-dark-mode — Desaturated/lighter variants, not inverted
• weight-hierarchy — Bold headings (600-700), Regular body (400)

§7. Animation (MEDIUM)

• duration — 150–300ms for micro-interactions
• easing — ease-out for entrances, ease-in for exits
• spring-physics — Use spring for natural feel (mass, stiffness, damping)
• exit-faster-than-enter — Exit animations ~30% faster
• spatial-continuity — Elements animate from/to logical positions
• no-decorative-only — Animation must convey meaning or aid navigation
• reduced-motion-fallback — Provide instant alternatives

§8. Forms & Feedback (MEDIUM)

• visible-labels — Always use visible labels (not placeholder-only)
• inline-validation — Validate on blur, show error near field
• error-clarity — Specific error messages ("Email must include @")
• progressive-disclosure — Show fields progressively, don't overwhelm
• focus-management — Auto-focus first field; move focus to errors

§9. Navigation (HIGH)

• nav-hierarchy — Clear primary/secondary/utility navigation
• bottom-nav-limit — Max 5 items in bottom navigation
• back-behavior — Predictable back navigation
• deep-linking — Support deep links to all major screens
• breadcrumbs — Show location in complex hierarchies

§10. Charts & Data (LOW)

• legends — Always include legends for multi-series
• tooltips — Interactive tooltips with formatted values
• accessible-colors — Don't rely on color alone; use patterns/labels
• responsive-charts — Charts must resize with container

Common Professional UI Rules

Icons & Visual Elements

Shadows & Elevation

Spacing System (8px grid)

4px  — tight (icon padding)
8px  — compact (inline spacing)
12px — default (element gaps)
16px — comfortable (section padding)
24px — spacious (card padding)
32px — section gaps
48px — major section separation
64px — page section separation

Border Radius Scale

Pre-Delivery Checklist

Before presenting any UI work, verify:

• Contrast: All text meets 4.5:1 ratio
• Touch targets: All interactive elements ≥ 44×44pt
• Focus states: Visible focus rings on all interactive elements
• SVG icons: No emoji used as structural icons
• Hover feedback: All clickable elements have hover states
• Dark mode: Contrast tested independently
• Responsive: Tested at 375px (small phone) and landscape
• Loading states: Skeleton/spinner for async operations
• Error states: Clear, contextual error messages
• Reduced motion: Animations respect prefers-reduced-motion
• Consistent style: Same design language across all components
• Typography: 16px+ body, proper line-height, readable line-length
• Spacing: Consistent spacing scale (4/8px grid)
• Elevation: Consistent shadow scale
• Primary CTA: One clear primary action per screen

Tips for Better Design Decisions