UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, cr

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 syste

ui-ux-pro-max