ui-ux-pro-max skill

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

This Skill must be invoked in the following situations:

• 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

Recommended

This Skill is recommended in the following situations:

• UI looks "not professional enough" but the reason is unclear
• Receiving feedback on usability or experience
• Pre-launch UI quality optimization
• Aligning cross-platform design (Web / iOS / Android)
• Building design systems or reusable component libraries

Skip

This Skill is not needed in the following situations:

• 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

Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.

Rule Categories by Priority

For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use --domain to query details when needed. Scripts do not read this table.

Quick Reference

1. Accessibility (CRITICAL)

• color-contrast - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
• focus-states - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
• alt-text - Descriptive alt text for meaningful images
• aria-labels - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
• keyboard-nav - Tab order matches visual order; full keyboard support (Apple HIG)
• 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 (Apple Dynamic Type, MD)
• reduced-motion - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
• voiceover-sr - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)

2. Touch & Interaction (CRITICAL)

• touch-target-size - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
• touch-spacing - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
• 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)
• standard-gestures - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
• system-gestures - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
• press-feedback - Visual feedback on press (ripple/highlight; MD state layers)
• haptic-feedback - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)

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 (Core Web Vitals: CLS)
• font-loading - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
• font-preload - Preload only critical fonts; avoid overusing preload on every variant
• critical-css - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
• 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) to reduce initial load and TTI
• third-party-scripts - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
• reduce-reflows - Avoid frequent layout reads/writes; batch DOM reads then writes
• content-jumping - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
• lazy-load-below-fold - Use loading="lazy" for below-the-fold images and heavy media
• virtualize-lists - Virtualize lists with 50+ items to improve memory efficiency and scroll performance

4. Style Selection (HIGH)

• style-match - Match style to product type (use --design-system for recommendations)
• 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 (search --domain color)
• effects-match-style - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
• platform-adaptive - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
• state-clarity - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
• elevation-consistent - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
• dark-mode-pairing - Design light/dark variants together to keep brand, contrast, and style consistent
• icon-style-consistent - Use one icon set/visual language (stroke width, corner radius) across the product
• system-controls - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
• blur-purpose - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)

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 (e.g. 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; ensure content fits viewport width
• spacing-scale - Use 4pt/8dp incremental spacing system (Material Design)
• touch-density - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
• container-width - Consistent max-width on desktop (max-w-6xl / 7xl)
• z-index-management - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
• fixed-element-offset - Fixed navbar/bottom bar must reserve safe padding for underlying content
• scroll-behavior - Avoid nested scroll regions that interfere with the main scroll experience

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)
• text-styles-system - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
• weight-hierarchy - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
• color-semantic - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
• color-dark-mode - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
• color-accessible-pairs - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
• color-not-decorative-only - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
• truncation-strategy - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)

7. Animation (MEDIUM)

• duration-timing - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
• 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; avoid linear for UI transitions
• motion-meaning - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
• state-transition - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
• continuity - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
• parallax-subtle - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
• spring-physics - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
• exit-faster-than-enter - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
• stagger-sequence - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)

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
• input-helper-text - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
• disabled-states - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
• progressive-disclosure - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
• inline-validation - Validate on blur (not keystroke); show error only after user finishes input (MD)
• input-type-keyboard - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)

9. Navigation Patterns (HIGH)

• bottom-nav-limit - Bottom navigation max 5 items; use labels with icons (Material Design)
• drawer-usage - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
• back-behavior - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
• deep-linking - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
• tab-bar-ios - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
• top-app-bar-android - Android: use Top App Bar with navigation icon for primary structure (Material Design)
• nav-label-icon - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
• nav-state-active - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
• nav-hierarchy - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
• modal-escape - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
• search-accessible - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
• breadcrumb-web - Web: use breadcrumbs for 3+ level deep hierarch