ui-ux-pro-max

# UI/UX Pro Max - Design Intelligence Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations. ## Single-voice craft (do NOT parallelize) Design coherence is the whole point: every page, color, font, and motion choice must read as the work of **one** designer. **Do not fan this skill out to parallel sub-agents** to "design page A and page B at once" — split design voices drift apart (mismatched spacing rhythm, two type scales, inconsistent shadow ladders) and the consistency rules below silently break. Run one coherent pass; if the surface is large, hold ONE design system fixed (`--design-system --persist`) and apply it page-by-page in sequence, each page inheriting the same MASTER tokens. **Craft loop (one voice, in order):** 1. **Lock the system first.** Generate ONE design system (`Step 2 --design-system`) before any component code. The system is the single source of truth — pattern, style, palette, type scale, effects, anti-patterns. Never let a later page invent a new palette or font. 2. **Decide, don't hedge.** One primary CTA per screen, one icon family, one elevation ladder, one motion rhythm (shared duration/easing tokens). When two good options exist, pick the one that matches the chosen style and commit — do not ship a blend (the §4 anti-pattern "mixing flat & skeuomorphic randomly"). 3. **Worked example — "fintech dashboard, dark, trustworthy":** lock the system → `search.py "fintech dashboard trustworthy dark" --design-system --persist -p "Acme"` → reuse its `color-semantic` tokens for every chart, card, and state → charts follow §10 (`legend-visible`, `contrast-data ≥3:1`, `pattern-texture` so meaning survives colorblindness) → motion uses ONE easing token across hover/expand/modal. Result: a dashboard that looks designed, not assembled. **OUTPUT contract (state these explicitly when you deliver):** - The chosen **design system** (pattern, style, palette tokens, type scale, effects) — cite the `search.py --design-system` output or the persisted `design-system/MASTER.md`. - The **UI code / change**, using semantic tokens (no raw hex in components). - A short **rationale** tying each major choice to a Quick Reference rule ID (e.g. `color-semantic`, `touch-target-size`, `spring-physics`). **VERIFY before claiming done (run, don't assume):** - Walk the **Pre-Delivery Checklist** (Visual / Interaction / Light-Dark / Layout / Accessibility) item-by-item. - Run `search.py "animation accessibility z-index loading" --domain ux` as a final UX validation pass. - Confirm CRITICAL §1–§2 (contrast ≥4.5:1, focus rings, touch ≥44pt) on the actual rendered surface — runtime is the truth, not the markup. **Evidence / no-hallucination guardrail:** - Every recommendation must trace to a **real query result** (`search.py` output, a cited Quick Reference rule ID, or shadcn/ui MCP) — never invent a palette, font pairing, or rule that the database did not return. - Use **official brand assets** only; never guess a logo path, recolor a brand, or fabricate a hex you didn't verify (see `Correct Brand Logos`). - A contrast / touch-target / a11y claim is only valid once observed on the rendered UI, not inferred from code. - **No regression:** improving one surface must not break a capability already shipped on another (shared tokens stay shared; don't fork the system to fix one page). ## 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 &lt; 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 &lt; 12px body, Gray-on-gray, Raw hex in components | | 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion | | 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront | | 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links | | 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning | ## Quick Reference ### 1. Accessibility (CRITICAL) - `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design - `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD) - `alt-text` - Descriptive alt text for meaningful images - `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG) - `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG) - `form-labels` - Use label with for attribute - `skip-links` - Skip to main content for keyboard users - `heading-hierarchy` - Sequential h1→h6, no level skip - `color-not-only` - Don't convey info by color alone (add icon/text) - `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD) - `reduced-motion` - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD) - `voiceover-sr` - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD) - `escape-routes` - Provide cancel/back in modals and multi-step flows (Apple HIG) - `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG) ### 2. Touch & Interaction (CRITICAL) - `touch-target-size` - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed - `touch-spacing` - Minimum 8px/8dp gap between touch targets (Apple HIG, MD) - `hover-vs-tap` - Use click/tap for primary interactions; don't rely on hover alone - `loading-buttons` - Disable button during async operations; show spinner or progress - `error-feedback` - Clear error messages near problem - `cursor-pointer` - Add cursor-pointer to clickable elements (Web) - `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll - `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web) - `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG) - `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG) - `press-feedback` - Visual feedback on press (ripple/highlight; MD state layers) - `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG) - `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions - `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges - `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges - `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial) - `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags ### 3. Performance (HIGH) - `image-optimization` - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets - `image-dimension` - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS) - `font-loading` - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD) - `font-preload` - Preload only critical fonts; avoid overusing preload on every variant - `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet) - `lazy-loading` - Lazy load non-hero components via dynamic import / route-level splitting - `bundle-splitting` - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI - `third-party-scripts` - Load third-party scripts async/defer; audit and remove unnecessary ones (MD) - `reduce-reflows` - Avoid frequent layout reads/writes; batch DOM reads then writes - `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS) - `lazy-load-below-fold` - Use loading="lazy" for below-the-fold images and heavy media - `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance - `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD) - `progressive-loading` - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG) - `input-latency` - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard) - `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG) - `debounce-throttle` - Use debounce/throttle for high-frequency events (scroll, resize, input) - `offline-support` - Provide offline state messaging and basic fallback (PWA / mobile) - `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations) ### 4. Style Selection (HIGH) - `style-match` - Match style to product type (use `--design-system` for recommendations) - `consistency` - Use same style across all pages - `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis - `color-palette-from-product` - Choose palette from product/industry (search `--domain color`) - `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.) - `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion - `state-clarity` - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers) - `elevation-consistent` - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values - `dark-mode-pairing` - Design light/dark variants together to keep brand, contrast, and style consistent - `icon-style-consistent` - Use one icon set/visual language (stroke width, corner radius) across the product - `system-controls` - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG) - `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG) - `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG) ### 5. Layout & Responsive (HIGH) - `viewport-meta` - width=device-width initial-scale=1 (never disable zoom) - `mobile-first` - Design mobile-first, then scale up to tablet and desktop - `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440) - `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom) - `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars - `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width - `spacing-scale` - Use 4pt/8dp incremental spacing system (Material Design) - `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps - `container-width` - Consistent max-width on desktop (max-w-6xl / 7xl) - `z-index-management` - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000) - `fixed-element-offset` - Fixed navbar/bottom bar must reserve safe padding for underlying content - `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience - `viewport-units` - Prefer min-h-dvh over 100vh on mobile - `orientation-support` - Keep layout readable and operable in landscape mode - `content-priority` - Show core content first on mobile; fold or hide secondary content - `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone ### 6. Typography & Color (MEDIUM) - `line-height` - Use 1.5-1.75 for body text - `line-length` - Limit to 65-75 characters per line - `font-pairing` - Match heading/body font personalities - `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32) - `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white) - `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD) - `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD) - `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system) - `color-dark-mode` - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD) - `color-accessible-pairs` - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD) - `color-not-decorative-only` - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD) - `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG) - `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD) - `number-tabular` - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift - `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG) ### 7. Animation (MEDIUM) - `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD) - `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left - `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms - `excessive-motion` - Animate 1-2 key elements per view max - `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions - `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG) - `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap - `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG) - `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG) - `spring-physics` - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations) - `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion) - `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD) - `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG) - `interruptible` - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG) - `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG) - `fade-crossfade` - Use crossfade for content replacement within the same container (MD) - `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)