1---
2name: ui-ux-pro-max
3description: "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, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."
4---
5 
6# UI/UX Pro Max - Design Intelligence
7 
8Comprehensive 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.
9 
10## When to Apply
11 
12This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.
13 
14### Must Use
15 
16This Skill must be invoked in the following situations:
17 
18- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
19- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
20- Choosing color schemes, typography systems, spacing standards, or layout systems
21- Reviewing UI code for user experience, accessibility, or visual consistency
22- Implementing navigation structures, animations, or responsive behavior
23- Making product-level design decisions (style, information hierarchy, brand expression)
24- Improving perceived quality, clarity, or usability of interfaces
25 
26### Recommended
27 
28This Skill is recommended in the following situations:
29 
30- UI looks "not professional enough" but the reason is unclear
31- Receiving feedback on usability or experience
32- Pre-launch UI quality optimization
33- Aligning cross-platform design (Web / iOS / Android)
34- Building design systems or reusable component libraries
35 
36### Skip
37 
38This Skill is not needed in the following situations:
39 
40- Pure backend logic development
41- Only involving API or database design
42- Performance optimization unrelated to the interface
43- Infrastructure or DevOps work
44- Non-visual scripts or automation tasks
45 
46**Decision criteria**: If the task will change how a feature **looks, feels, moves, or is interacted with**, this Skill should be used.
47 
48## Rule Categories by Priority
49 
50*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.*
51 
52| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
53|----------|----------|--------|--------|------------------------|------------------------|
54| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
55| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
56| 3 | Performance | HIGH | `ux` | WebP/AVIF, Lazy loading, Reserve space (CLS &lt; 0.1) | Layout thrashing, Cumulative Layout Shift |
57| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
58| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
59| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text &lt; 12px body, Gray-on-gray, Raw hex in components |
60| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
61| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
62| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
63| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
64 
65## Quick Reference
66 
67### 1. Accessibility (CRITICAL)
68 
69- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
70- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
71- `alt-text` - Descriptive alt text for meaningful images
72- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
73- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)
74- `form-labels` - Use label with for attribute
75- `skip-links` - Skip to main content for keyboard users
76- `heading-hierarchy` - Sequential h1→h6, no level skip
77- `color-not-only` - Don't convey info by color alone (add icon/text)
78- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
79- `reduced-motion` - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
80- `voiceover-sr` - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
81- `escape-routes` - Provide cancel/back in modals and multi-step flows (Apple HIG)
82- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)
83 
84### 2. Touch & Interaction (CRITICAL)
85 
86- `touch-target-size` - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
87- `touch-spacing` - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
88- `hover-vs-tap` - Use click/tap for primary interactions; don't rely on hover alone
89- `loading-buttons` - Disable button during async operations; show spinner or progress
90- `error-feedback` - Clear error messages near problem
91- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)
92- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll
93- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)
94- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
95- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
96- `press-feedback` - Visual feedback on press (ripple/highlight; MD state layers)
97- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
98- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions
99- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
100- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges
101- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)
102- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags
103 
104### 3. Performance (HIGH)
105 
106- `image-optimization` - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
107- `image-dimension` - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
108- `font-loading` - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
109- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant
110- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
111- `lazy-loading` - Lazy load non-hero components via dynamic import / route-level splitting
112- `bundle-splitting` - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
113- `third-party-scripts` - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
114- `reduce-reflows` - Avoid frequent layout reads/writes; batch DOM reads then writes
115- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
116- `lazy-load-below-fold` - Use loading="lazy" for below-the-fold images and heavy media
117- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance
118- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
119- `progressive-loading` - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
120- `input-latency` - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
121- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)
122- `debounce-throttle` - Use debounce/throttle for high-frequency events (scroll, resize, input)
123- `offline-support` - Provide offline state messaging and basic fallback (PWA / mobile)
124- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)
125 
126### 4. Style Selection (HIGH)
127 
128- `style-match` - Match style to product type (use `--design-system` for recommendations)
129- `consistency` - Use same style across all pages
130- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis
131- `color-palette-from-product` - Choose palette from product/industry (search `--domain color`)
132- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
133- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
134- `state-clarity` - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
135- `elevation-consistent` - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
136- `dark-mode-pairing` - Design light/dark variants together to keep brand, contrast, and style consistent
137- `icon-style-consistent` - Use one icon set/visual language (stroke width, corner radius) across the product
138- `system-controls` - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
139- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
140- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)
141 
142### 5. Layout & Responsive (HIGH)
143 
144- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)
145- `mobile-first` - Design mobile-first, then scale up to tablet and desktop
146- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
147- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)
148- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars
149- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width
150- `spacing-scale` - Use 4pt/8dp incremental spacing system (Material Design)
151- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
152- `container-width` - Consistent max-width on desktop (max-w-6xl / 7xl)
153- `z-index-management` - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
154- `fixed-element-offset` - Fixed navbar/bottom bar must reserve safe padding for underlying content
155- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience
156- `viewport-units` - Prefer min-h-dvh over 100vh on mobile
157- `orientation-support` - Keep layout readable and operable in landscape mode
158- `content-priority` - Show core content first on mobile; fold or hide secondary content
159- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone
160 
161### 6. Typography & Color (MEDIUM)
162 
163- `line-height` - Use 1.5-1.75 for body text
164- `line-length` - Limit to 65-75 characters per line
165- `font-pairing` - Match heading/body font personalities
166- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)
167- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)
168- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
169- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
170- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
171- `color-dark-mode` - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
172- `color-accessible-pairs` - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
173- `color-not-decorative-only` - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
174- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
175- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
176- `number-tabular` - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
177- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)
178 
179### 7. Animation (MEDIUM)
180 
181- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
182- `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left
183- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms
184- `excessive-motion` - Animate 1-2 key elements per view max
185- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
186- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
187- `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
188- `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
189- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
190- `spring-physics` - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
191- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
192- `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
193- `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
194- `interruptible` - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
195- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)
196- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)
197- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
198- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
199- `hierarchy-motion` - Use translate/scale direc