UI/UX Design
Parent: Frontend Design · Published reference · snapshot 2026-09-08 · skill frontend-ui/references/ui-ux-pro-max.md
↓ Facts as markdownall context files
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 acro
These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.
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. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#uiux-pro-max---design-intelligence]
When to Apply
- This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#when-to-apply]
Must Use
- This Skill must be invoked in the following situations: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Choosing color schemes, typography systems, spacing standards, or layout systems [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Reviewing UI code for user experience, accessibility, or visual consistency [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Implementing navigation structures, animations, or responsive behavior [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Making product-level design decisions (style, information hierarchy, brand expression) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
- Improving perceived quality, clarity, or usability of interfaces [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#must-use]
Recommended
- This Skill is recommended in the following situations: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
- UI looks "not professional enough" but the reason is unclear [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
- Receiving feedback on usability or experience [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
- Pre-launch UI quality optimization [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
- Aligning cross-platform design (Web / iOS / Android) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
- Building design systems or reusable component libraries [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#recommended]
Skip
- This Skill is not needed in the following situations: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Pure backend logic development [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Only involving API or database design [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Performance optimization unrelated to the interface [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Infrastructure or DevOps work [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Non-visual scripts or automation tasks [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
- Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#skip]
1. Accessibility (CRITICAL)
- color-contrast - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- focus-states - Visible focus rings on interactive elements (2–4px; Apple HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- alt-text - Descriptive alt text for meaningful images [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- aria-labels - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- keyboard-nav - Tab order matches visual order; full keyboard support (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- form-labels - Use label with for attribute [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- skip-links - Skip to main content for keyboard users [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- heading-hierarchy - Sequential h1→h6, no level skip [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- color-not-only - Don't convey info by color alone (add icon/text) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- dynamic-type - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- reduced-motion - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- voiceover-sr - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- escape-routes - Provide cancel/back in modals and multi-step flows (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
- keyboard-shortcuts - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#1-accessibility-critical]
2. Touch & Interaction (CRITICAL)
- touch-target-size - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- touch-spacing - Minimum 8px/8dp gap between touch targets (Apple HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- hover-vs-tap - Use click/tap for primary interactions; don't rely on hover alone [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- loading-buttons - Disable button during async operations; show spinner or progress [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- error-feedback - Clear error messages near problem [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- cursor-pointer - Add cursor-pointer to clickable elements (Web) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- gesture-conflicts - Avoid horizontal swipe on main content; prefer vertical scroll [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- tap-delay - Use touch-action: manipulation to reduce 300ms delay (Web) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- standard-gestures - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- system-gestures - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- press-feedback - Visual feedback on press (ripple/highlight; MD state layers) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- haptic-feedback - Use haptic for confirmations and important actions; avoid overuse (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- gesture-alternative - Don't rely on gesture-only interactions; always provide visible controls for critical actions [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- safe-area-awareness - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- no-precision-required - Avoid requiring pixel-perfect taps on small icons or thin edges [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- swipe-clarity - Swipe actions must show clear affordance or hint (chevron, label, tutorial) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
- drag-threshold - Use a movement threshold before starting drag to avoid accidental drags [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#2-touch-interaction-critical]
3. Performance (HIGH)
- image-optimization - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- image-dimension - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- font-loading - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- font-preload - Preload only critical fonts; avoid overusing preload on every variant [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- critical-css - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- lazy-loading - Lazy load non-hero components via dynamic import / route-level splitting [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- bundle-splitting - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- third-party-scripts - Load third-party scripts async/defer; audit and remove unnecessary ones (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- reduce-reflows - Avoid frequent layout reads/writes; batch DOM reads then writes [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- content-jumping - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- lazy-load-below-fold - Use loading="lazy" for below-the-fold images and heavy media [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- virtualize-lists - Virtualize lists with 50+ items to improve memory efficiency and scroll performance [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- main-thread-budget - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- progressive-loading - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- input-latency - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- tap-feedback-speed - Provide visual feedback within 100ms of tap (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- debounce-throttle - Use debounce/throttle for high-frequency events (scroll, resize, input) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- offline-support - Provide offline state messaging and basic fallback (PWA / mobile) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
- network-fallback - Offer degraded modes for slow networks (lower-res images, fewer animations) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#3-performance-high]
4. Style Selection (HIGH)
- style-match - Match style to product type (use --design-system for recommendations) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- consistency - Use same style across all pages [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- no-emoji-icons - Use SVG icons (Heroicons, Lucide), not emojis [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- color-palette-from-product - Choose palette from product/industry (search --domain color) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- effects-match-style - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- platform-adaptive - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- state-clarity - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- elevation-consistent - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- dark-mode-pairing - Design light/dark variants together to keep brand, contrast, and style consistent [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- icon-style-consistent - Use one icon set/visual language (stroke width, corner radius) across the product [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- system-controls - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- blur-purpose - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
- primary-action - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#4-style-selection-high]
5. Layout & Responsive (HIGH)
- viewport-meta - width=device-width initial-scale=1 (never disable zoom) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- mobile-first - Design mobile-first, then scale up to tablet and desktop [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- breakpoint-consistency - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- readable-font-size - Minimum 16px body text on mobile (avoids iOS auto-zoom) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- line-length-control - Mobile 35–60 chars per line; desktop 60–75 chars [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- horizontal-scroll - No horizontal scroll on mobile; ensure content fits viewport width [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- spacing-scale - Use 4pt/8dp incremental spacing system (Material Design) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- touch-density - Keep component spacing comfortable for touch: not cramped, not causing mis-taps [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- container-width - Consistent max-width on desktop (max-w-6xl / 7xl) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- z-index-management - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- fixed-element-offset - Fixed navbar/bottom bar must reserve safe padding for underlying content [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- scroll-behavior - Avoid nested scroll regions that interfere with the main scroll experience [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- viewport-units - Prefer min-h-dvh over 100vh on mobile [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- orientation-support - Keep layout readable and operable in landscape mode [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- content-priority - Show core content first on mobile; fold or hide secondary content [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
- visual-hierarchy - Establish hierarchy via size, spacing, contrast - not color alone [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#5-layout-responsive-high]
6. Typography & Color (MEDIUM)
- line-height - Use 1.5-1.75 for body text [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- line-length - Limit to 65-75 characters per line [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- font-pairing - Match heading/body font personalities [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- font-scale - Consistent type scale (e.g. 12 14 16 18 24 32) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- contrast-readability - Darker text on light backgrounds (e.g. slate-900 on white) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- text-styles-system - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- weight-hierarchy - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- color-semantic - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- color-dark-mode - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- color-accessible-pairs - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- color-not-decorative-only - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- truncation-strategy - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- letter-spacing - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- number-tabular - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
- whitespace-balance - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#6-typography-color-medium]
7. Animation (MEDIUM)
- duration-timing - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- transform-performance - Use transform/opacity only; avoid animating width/height/top/left [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- loading-states - Show skeleton or progress indicator when loading exceeds 300ms [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- excessive-motion - Animate 1-2 key elements per view max [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- easing - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- motion-meaning - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- state-transition - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- continuity - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- parallax-subtle - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- spring-physics - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- exit-faster-than-enter - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- stagger-sequence - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- shared-element-transition - Use shared element / hero transitions for visual continuity between screens (MD, HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- interruptible - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- no-blocking-animation - Never block user input during an animation; UI must stay interactive (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- fade-crossfade - Use crossfade for content replacement within the same container (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- scale-feedback - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- gesture-feedback - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- hierarchy-motion - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- motion-consistency - Unify duration/easing tokens globally; all animations share the same rhythm and feel [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- opacity-threshold - Fading elements should not linger below opacity 0.2; either fade fully or remain visible [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- modal-motion - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- navigation-direction - Forward navigation animates left/up; backward animates right/down - keep direction logically consistent (HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
- layout-shift-avoid - Animations must not cause layout reflow or CLS; use transform for position changes [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#7-animation-medium]
8. Forms & Feedback (MEDIUM)
- input-labels - Visible label per input (not placeholder-only) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- error-placement - Show error below the related field [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- submit-feedback - Loading then success/error state on submit [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- required-indicators - Mark required fields (e.g. asterisk) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- empty-states - Helpful message and action when no content [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- toast-dismiss - Auto-dismiss toasts in 3-5s [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- confirmation-dialogs - Confirm before destructive actions [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- input-helper-text - Provide persistent helper text below complex inputs, not just placeholder (Material Design) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- disabled-states - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- progressive-disclosure - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- inline-validation - Validate on blur (not keystroke); show error only after user finishes input (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- input-type-keyboard - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- password-toggle - Provide show/hide toggle for password fields (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- autofill-support - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- undo-support - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- success-feedback - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- error-recovery - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- multi-step-progress - Multi-step flows show step indicator or progress bar; allow back navigation (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- form-autosave - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- sheet-dismiss-confirm - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- error-clarity - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- field-grouping - Group related fields logically (fieldset/legend or visual grouping) (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- read-only-distinction - Read-only state should be visually and semantically different from disabled (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- focus-management - After submit error, auto-focus the first invalid field (WCAG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- error-summary - For multiple errors, show summary at top with anchor links to each field (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- touch-friendly-input - Mobile input height ≥44px to meet touch target requirements (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- destructive-emphasis - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- toast-accessibility - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- aria-live-errors - Form errors use aria-live region or role="alert" to notify screen readers (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- contrast-feedback - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
- timeout-feedback - Request timeout must show clear feedback with retry option (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#8-forms-feedback-medium]
9. Navigation Patterns (HIGH)
- bottom-nav-limit - Bottom navigation max 5 items; use labels with icons (Material Design) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- drawer-usage - Use drawer/sidebar for secondary navigation, not primary actions (Material Design) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- back-behavior - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- deep-linking - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- tab-bar-ios - iOS: use bottom Tab Bar for top-level navigation (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- top-app-bar-android - Android: use Top App Bar with navigation icon for primary structure (Material Design) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- nav-label-icon - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- nav-state-active - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- nav-hierarchy - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- modal-escape - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- search-accessible - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- breadcrumb-web - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- state-preservation - Navigating back must restore previous scroll position, filter state, and input (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- gesture-nav-support - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- tab-badge - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- overflow-menu - When actions exceed available space, use overflow/more menu instead of cramming (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- bottom-nav-top-level - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- adaptive-navigation - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- back-stack-integrity - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- navigation-consistency - Navigation placement must stay the same across all pages; don't change by page type [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- avoid-mixed-patterns - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- modal-vs-navigation - Modals must not be used for primary navigation flows; they break the user's path (HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- focus-on-route-change - After page transition, move focus to main content region for screen reader users (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- persistent-nav - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- destructive-nav-separation - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
- empty-nav-state - When a nav destination is unavailable, explain why instead of silently hiding it (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#9-navigation-patterns-high]
10. Charts & Data (LOW)
- chart-type - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- color-guidance - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- data-table - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- pattern-texture - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- legend-visible - Always show legend; position near the chart, not detached below a scroll fold (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- tooltip-on-interact - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- axis-labels - Label axes with units and readable scale; avoid truncated or rotated labels on mobile [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- responsive-chart - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- empty-data-state - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- loading-chart - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- animation-optional - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- large-dataset - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- number-formatting - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- touch-target-chart - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- no-pie-overuse - Avoid pie/donut for >5 categories; switch to bar chart for clarity [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- contrast-data - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- legend-interactive - Legends should be clickable to toggle series visibility (MD) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- direct-labeling - For small datasets, label values directly on the chart to reduce eye travel [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- tooltip-keyboard - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- sortable-table - Data tables must support sorting with aria-sort indicating current sort state (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- axis-readability - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- data-density - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- trend-emphasis - Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- gridline-subtle - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- focusable-elements - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- screen-reader-summary - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- error-state-chart - Data load failure must show error message with retry action, not a broken/empty chart [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- export-option - For data-heavy products, offer CSV/image export of chart data [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- drill-down-consistency - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
- time-scale-clarity - Time series charts must clearly label time granularity (day/week/month) and allow switching [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#10-charts-data-low]
How to Use
- Search specific domains using the CLI tool below. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#how-to-use]
Prerequisites
- Check if Python is installed: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#prerequisites]
- If Python is not installed, install it based on user's OS: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#prerequisites]
How to Use This Skill
- Use this skill when the user requests any of the following: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#how-to-use-this-skill]
- Follow this workflow: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#how-to-use-this-skill]
Step 1: Analyze User Requirements
- Extract key information from user request: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-user-requirements]
- Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-user-requirements]
- Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-user-requirements]
- Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-user-requirements]
- Stack: React Native (this project's only tech stack) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-user-requirements]
Step 2: Generate Design System (REQUIRED)
- Always start with --design-system to get comprehensive recommendations with reasoning: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required]
- Searches domains in parallel (product, style, color, landing, typography) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required]
- Applies reasoning rules from ui-reasoning.csv to select best matches [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required]
- Returns complete design system: pattern, style, colors, typography, effects [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required]
- Includes anti-patterns to avoid [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required]
Step 2b: Persist Design System (Master + Overrides Pattern)
- To save the design system for hierarchical retrieval across sessions, add --persist: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- design-system/MASTER.md - Global Source of Truth with all design rules [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- design-system/pages/ - Folder for page-specific overrides [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- With page-specific override: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- design-system/pages/dashboard.md - Page-specific deviations from Master [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- How hierarchical retrieval works: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- If the page file exists, its rules override the Master file [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- If not, use design-system/MASTER.md exclusively [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
- Context-aware retrieval prompt: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2b-persist-design-system-master-overrides-pattern]
Step 3: Supplement with Detailed Searches (as needed)
- After getting the design system, use domain searches to get additional details: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-3-supplement-with-detailed-searches-as-needed]
- When to use detailed searches: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-3-supplement-with-detailed-searches-as-needed]
Step 4: Stack Guidelines (React Native)
- Get React Native implementation-specific best practices: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-4-stack-guidelines-react-native]
Example Workflow
- User request: "Make an AI search homepage." [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#example-workflow]
Step 1: Analyze Requirements
- Product type: Tool (AI search engine) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-requirements]
- Target audience: C-end users looking for fast, intelligent search [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-requirements]
- Style keywords: modern, minimal, content-first, dark mode [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-1-analyze-requirements]
Step 2: Generate Design System (REQUIRED)
- Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-2-generate-design-system-required-1]
Step 4: Stack Guidelines
- Then: Synthesize design system + detailed searches and implement the design. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#step-4-stack-guidelines]
Output Formats
- The --design-system flag supports two output formats: [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#output-formats]
Query Strategy
- Use multi-dimensional keywords - combine product + industry + tone + density: "entertainment social vibrant content-dense" not just "app" [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#query-strategy]
- Try different keywords for the same need: "playful neon" → "vibrant dark" → "content-first minimal" [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#query-strategy]
- Use --design-system first for full recommendations, then --domain to deep-dive any dimension you're unsure about [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#query-strategy]
- Always add --stack react-native for implementation-specific guidance [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#query-strategy]
Pre-Delivery Checklist
- Run --domain ux "animation accessibility z-index loading" as a UX validation pass before implementation [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
- Run through Quick Reference §1–§3 (CRITICAL + HIGH) as a final review [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
- Test on 375px (small phone) and landscape orientation [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
- Verify behavior with reduced-motion enabled and Dynamic Type at largest size [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
- Check dark mode contrast independently (don't assume light mode values work) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
- Confirm all touch targets ≥44pt and no content hidden behind safe areas [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist]
Common Rules for Professional UI
- These are frequently overlooked issues that make UI look unprofessional: Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns. [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#common-rules-for-professional-ui]
Pre-Delivery Checklist
- Before delivering UI code, verify these items: Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter). [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#pre-delivery-checklist-1]
Visual Quality
- [ ] No emojis used as icons (use SVG instead) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#visual-quality]
- [ ] All icons come from a consistent icon family and style [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#visual-quality]
- [ ] Official brand assets are used with correct proportions and clear space [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#visual-quality]
- [ ] Pressed-state visuals do not shift layout bounds or cause jitter [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#visual-quality]
- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#visual-quality]
Interaction
- [ ] All tappable elements provide clear pressed feedback (ripple/opacity/elevation) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
- [ ] Disabled states are visually clear and non-interactive [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
- [ ] Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#interaction]
Light/Dark Mode
- [ ] Primary text contrast >=4.5:1 in both light and dark mode [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#lightdark-mode]
- [ ] Secondary text contrast >=3:1 in both light and dark mode [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#lightdark-mode]
- [ ] Dividers/borders and interaction states are distinguishable in both modes [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#lightdark-mode]
- [ ] Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#lightdark-mode]
- [ ] Both themes are tested before delivery (not inferred from a single theme) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#lightdark-mode]
Layout
- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
- [ ] Scroll content is not hidden behind fixed/sticky bars [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
- [ ] Verified on small phone, large phone, and tablet (portrait + landscape) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
- [ ] Horizontal insets/gutters adapt correctly by device size and orientation [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
- [ ] 4/8dp spacing rhythm is maintained across component, section, and page levels [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs) [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#layout]
Accessibility
- [ ] All meaningful images/icons have accessibility labels [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#accessibility]
- [ ] Form fields have labels, hints, and clear error messages [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#accessibility]
- [ ] Color is not the only indicator [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#accessibility]
- [ ] Reduced motion and dynamic text size are supported without layout breakage [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#accessibility]
- [ ] Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly [archived source: https://llms-explorer.com/sources/mdb-context-hub/ui-ux-pro-max/#accessibility]
Where this helps
- Starting a new product design (landing page, dashboard, mobile app) and needing a consistent design system (style, palette, typography) instead of ad hoc choices per screen. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Auditing an existing UI that "looks unprofessional" but the specific reason isn't obvious - running it against the numbered CRITICAL/HIGH/MEDIUM checklist surfaces the concrete gaps. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Reviewing a mobile app's UI for App Store/Play Store-level polish, covering touch targets, safe areas, and light/dark mode contrast in one pass. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Choosing a chart type for a data visualization and confirming it has an accessible, non-color-only encoding and a table fallback. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Project ideas
- Run the --design-system generator for a new product idea, then persist the output as a MASTER.md so the whole team works from one design source of truth across sessions. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Build a component library that enforces the CRITICAL-tier rules by default: 4.5:1 text contrast, 44x44pt/48x48dp touch targets, and no emoji used as icons. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Build a pre-launch UI checklist tool that runs through the numbered CRITICAL-through-LOW categories (accessibility, touch, performance, layout, forms) as a gate before shipping. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Build a responsive test harness that verifies a layout at 375px width and in landscape orientation, per the pack's own pre-delivery checklist. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Antipatterns
- Using emoji as icons instead of a consistent SVG icon set - it breaks visual consistency and often fails accessibility expectations. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Relying on hover-only interaction for a primary action - touch interfaces have no hover state, so hover-dependent UI silently breaks on mobile. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Skipping the design-system step and jumping straight to component-level decisions, producing visually inconsistent style choices across pages. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Using color as the only indicator of state (error, success, selection) - colorblind users lose that signal entirely without a redundant cue like an icon, text, or pattern. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Known issues
- Font loading without font-display: swap/optional risks invisible text (FOIT) and layout shift, hurting Core Web Vitals - a detail easy to overlook until a Lighthouse audit catches it. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- Bottom navigation is capped at 5 items in this guidance (a Material Design convention) - a design that needs more primary destinations has to restructure the information architecture, not just shrink icon labels. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- The guide's numbered rules (touch target sizes, contrast ratios, animation durations) are sourced from Apple HIG and Material Design conventions specifically - a product targeting a different platform convention may need to diverge deliberately. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
- The 150-500ms animation-duration guidance is a general micro-interaction heuristic; a specific brand or product feel may justify departing from it, and the guide doesn't adjudicate every edge case. [source] — AI-suggested, synthesized from this pack's existing facts — not extracted from a source document.
Children
- Editorial Micro-Typography & Type-Craft Defects
- Color Systems and Palettes (frontier)
- Typography and Font Pairing (frontier)
- Component Design Patterns (frontier)
- Dashboard and Admin UX (frontier)
- Responsive and Mobile Design (frontier)
Frontier under this node: Color Systems and Palettes, Component Design Patterns, Dashboard and Admin UX, Responsive and Mobile Design, Typography and Font Pairing