UI UX Pro Max

UI/UX Pro Max - Design Intelligence

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

When to Apply

This Skill should be used 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, etc.)
• Choosing color schemes, typography systems, spacing standards, or layout systems
• Reviewing UI code for user experience, accessibility, or visual consistency
• Implementing navigation structures, animations, or responsive behavior
• Making product-level design decisions (style, information hierarchy, brand expression)
• Improving perceived quality, clarity, or usability of interfaces

Skip

• Pure backend logic development
• Only involving API or database design
• Performance optimization unrelated to the interface
• Infrastructure or DevOps work
• Non-visual scripts or automation tasks

Rule Categories by Priority

Quick Reference

1. Accessibility (CRITICAL)

• 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; accessibilityLabel in native
• 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
• escape-routes - Provide cancel/back in modals and multi-step flows
• keyboard-shortcuts - Preserve system and a11y shortcuts

2. Touch & Interaction (CRITICAL)

• 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)
• gesture-conflicts - Avoid horizontal swipe on main content; prefer vertical scroll
• tap-delay - Use touch-action: manipulation to reduce 300ms delay (Web)
• press-feedback - Visual feedback on press (ripple/highlight)
• haptic-feedback - Use haptic for confirmations; avoid overuse
• safe-area-awareness - Keep primary touch targets away from notch, Dynamic Island, gesture bar

3. Performance (HIGH)

• 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
• 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 (React Suspense / Next.js dynamic)
• virtualize-lists - Virtualize lists with 50+ items
• main-thread-budget - Keep per-frame work under ~16ms for 60fps
• progressive-loading - Use skeleton screens / shimmer instead of long blocking spinners for >1s
• debounce-throttle - Use debounce/throttle for high-frequency events (scroll, resize, input)

4. Style Selection (HIGH)

• style-match - Match style to product type
• consistency - Use same style across all pages
• no-emoji-icons - Use SVG icons (Heroicons, Lucide), not emojis
• 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
• elevation-consistent - Use a consistent elevation/shadow scale
• 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)

• viewport-meta - width=device-width initial-scale=1 (never disable zoom)
• mobile-first - Design mobile-first, then scale up to tablet and desktop
• breakpoint-consistency - Use systematic breakpoints (375 / 768 / 1024 / 1440)
• readable-font-size - Minimum 16px body text on mobile (avoids iOS auto-zoom)
• 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 (0 / 10 / 20 / 40 / 100 / 1000)
• viewport-units - Prefer min-h-dvh over 100vh on mobile
• visual-hierarchy - Establish hierarchy via size, spacing, contrast — not color alone

6. 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
• font-scale - Consistent type scale (e.g. 12 14 16 18 24 32)
• contrast-readability - Darker text on light backgrounds (e.g. slate-900 on white)
• weight-hierarchy - Bold headings (600–700), Regular body (400), Medium labels (500)
• color-semantic - Define semantic color tokens (primary, secondary, error, surface) not raw hex
• 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)
• number-tabular - Use tabular/monospaced figures for data columns, prices, and timers

7. Animation (MEDIUM)

• 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
• excessive-motion - Animate 1-2 key elements per view max
• easing - Use ease-out for entering, ease-in for exiting
• motion-meaning - Every animation must express a cause-effect relationship, not just be decorative
• spring-physics - Prefer spring/physics-based curves over linear or cubic-bezier
• exit-faster-than-enter - Exit animations shorter than enter (~60–70% of enter duration)
• stagger-sequence - Stagger list/grid item entrance by 30–50ms per item
• interruptible - Animations must be interruptible; user tap/gesture cancels in-progress animation
• no-blocking-animation - Never block user input during an animation

8. Forms & Feedback (MEDIUM)

• 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
• progressive-disclosure - Reveal complex options progressively
• inline-validation - Validate on blur (not keystroke)
• input-type-keyboard - Use semantic input types (email, tel, number)
• password-toggle - Provide show/hide toggle for password fields
• undo-support - Allow undo for destructive or bulk actions
• error-clarity - Error messages must state cause + how to fix

9. Navigation Patterns (HIGH)

• bottom-nav-limit - Bottom navigation max 5 items; use labels with icons
• drawer-usage - Use drawer/sidebar for secondary navigation, not primary actions
• back-behavior - Back navigation must be predictable and consistent; preserve scroll/state
• 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 in navigation
• modal-escape - Modals and sheets must offer a clear close/dismiss affordance
• state-preservation - Navigating back must restore previous scroll position, filter state, and input
• 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)

• 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 for colorblind users
• legend-visible - Always show legend; position near the chart
• tooltip-on-interact - Provide tooltips/data labels on hover (Web) or tap (mobile)
• 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
• loading-chart - Use skeleton or shimmer placeholder while chart data loads
• large-dataset - For 1000+ data points, aggregate or sample; provide drill-down
• number-formatting - Use locale-aware formatting for numbers, dates, currencies

How to Use This Skill

Use this skill when the user requests any of the following:

Workflow

Step 1: Analyze User Requirements

• Product type: Entertainment, Tool, Productivity, or hybrid
• Target audience: age group, usage context (commute, leisure, work)
• Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive
• Stack: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, etc.

Step 2: Select Design System Pick ONE primary style from the 50+ available. Common mappings:

Step 3: Apply Quick Reference Rules Walk the Priority 1→10 rule table. Always check §1 (Accessibility) + §2 (Touch) first — they're CRITICAL.

Pre-Delivery Checklist

Before delivering UI code:

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons come from a consistent icon family and style
• Official brand assets used with correct proportions
• Semantic theme tokens used consistently (no ad-hoc hardcoded colors)

Interaction

• All tappable elements provide clear pressed feedback
• Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
• Micro-interaction timing stays in the 150-300ms range
• Disabled states are visually clear and non-interactive
• Screen reader focus order matches visual order

Light/Dark Mode

• Primary text contrast >=4.5:1 in both light and dark mode
• Secondary text contrast >=3:1 in both light and dark mode
• Both themes tested before delivery

Layout

• Safe areas respected for headers, tab bars, and bottom CTA bars
• Scroll content not hidden behind fixed/sticky bars
• Verified on small phone, large phone, and tablet (portrait + landscape)
• 4/8dp spacing rhythm maintained

Accessibility

• All meaningful images/icons have accessibility labels
• Form fields have labels, hints, and clear error messages
• Color is not the only indicator
• Reduced motion and dynamic text size are supported without layout breakage