ui-ux-pro-max

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

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 <Domain> to query details when needed. Scripts do not read this table.

Priority Category Impact Domain Key Checks (Must Have) Anti-Patterns (Avoid)

1 Accessibility CRITICAL ux Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels Removing focus rings, Icon-only buttons without labels

2 Touch & Interaction CRITICAL ux Min size 44×44px, 8px+ spacing, Loading feedback Reliance on hover only, Instant state changes (0ms)

3 Performance HIGH ux WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) Layout thrashing, Cumulative Layout Shift

4 Style Selection HIGH style, product Match product type, Consistency, SVG icons (no emoji) Mixing flat & skeuomorphic randomly, Emoji as icons

5 Layout & Responsive HIGH ux Mobile-first breakpoints, Viewport meta, No horizontal scroll Horizontal scroll, Fixed px container widths, Disable zoom

6 Typography & Color MEDIUM typography, color Base 16px, Line-height 1.5, Semantic color tokens Text < 12px body, Gray-on-gray, Raw hex in components

7 Animation MEDIUM ux Duration 150–300ms, Motion conveys meaning, Spatial continuity Decorative-only animation, Animating width/height, No reduced-motion

8 Forms & Feedback MEDIUM ux Visible labels, Error near field, Helper text, Progressive disclosure Placeholder-only label, Errors only at top, Overwhelm upfront

9 Navigation Patterns HIGH ux Predictable back, Bottom nav ≤5, Deep linking Overloaded nav, Broken back behavior, No deep links

10 Charts & Data LOW chart Legends, Tooltips, Accessible colors Relying on color alone to convey meaning

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)

• escape-routes - Provide cancel/back in modals and multi-step flows (Apple HIG)

• keyboard-shortcuts - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)

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)

• gesture-alternative - Don't rely on gesture-only interactions; always provide visible controls for critical actions

• safe-area-awareness - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges

• no-precision-required - Avoid requiring pixel-perfect taps on small icons or thin edges

• swipe-clarity - Swipe actions must show clear affordance or hint (chevron, label, tutorial)

• drag-threshold - Use a movement threshold before starting drag to avoid accidental drags

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

• main-thread-budget - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)

• progressive-loading - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)

• input-latency - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)

• tap-feedback-speed - Provide visual feedback within 100ms of tap (Apple HIG)

• debounce-throttle - Use debounce/throttle for high-frequency events (scroll, resize, input)

• offline-support - Provide offline state messaging and basic fallback (PWA / mobile)

• network-fallback - Offer degraded modes for slow networks (lower-res images, fewer animations)

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)

• primary-action - Each screen should have only one primary CTA; secondary actions visually subordinate (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

• viewport-units - Prefer min-h-dvh over 100vh on mobile

• orientation-support - Keep layout readable and operable in landscape mode

• content-priority - Show core content first on mobile; fold or hide secondary content

• 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)

• 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)

• letter-spacing - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)

• number-tabular - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift

• whitespace-balance - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (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)

• shared-element-transition - Use shared element / hero transitions for visual continuity between screens (MD, HIG)

• interruptible - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)

• no-blocking-animation - Never block user input during an animation; UI must stay interactive (Apple HIG)

• fade-crossfade - Use crossfade for content replacement within the same container (MD)

• scale-feedback - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)

• gesture-feedback - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)

• hierarchy-motion - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upwar

...