ui-ux-pro-max

# UI/UX Pro Max - Design Intelligence Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 15 technology stacks. Searchable database with priority-based recommendations. ## When to Apply 当任务涉及 **UI 结构、视觉设计决策、交互模式或用户体验质量控制** 时，应使用此 Skill。 ### Must Use 在以下情况必须调用此 Skill： - 设计新的页面（Landing Page、Dashboard、Admin、SaaS、Mobile App） - 创建或重构 UI 组件（按钮、弹窗、表单、表格、图表等） - 选择配色方案、字体系统、间距规范或布局体系 - 审查 UI 代码的用户体验、可访问性或视觉一致性 - 实现导航结构、动效或响应式行为 - 做产品层级的设计决策（风格、信息层级、品牌表达） - 提升界面的感知质量、清晰度或可用性 ### Recommended 在以下情况建议使用此 Skill： - UI 看起来"不够专业"，但原因不明确 - 收到可用性或体验方面的反馈 - 准备上线前的 UI 质量优化 - 需要对齐跨平台设计（Web / iOS / Android） - 构建设计系统或可复用组件库 ### Skip 在以下情况无需使用此 Skill： - 纯后端逻辑开发 - 仅涉及 API 或数据库设计 - 与界面无关的性能优化 - 基础设施或 DevOps 工作 - 非视觉类脚本或自动化任务 **判断准则**：如果任务会改变某个功能 **看起来如何、使用起来如何、如何运动或如何被交互**，就应该使用此 Skill。 ## Rule Categories by Priority *供人工/AI 查阅：按 1→10 决定先关注哪类规则；需要细则时用 `--domain <Domain>` 查询。脚本不读取本表。* | 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) - `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion) - `hierarchy-motion` - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD) - `motion-consistency` - Unify duration/easing tokens globally; all animations share the same rhythm and feel - `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible - `modal-motion` - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD) - `navigation-direction` - Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG) - `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes ### 8. Forms & Feedback (MEDIUM) - `input-labels` - Visible label per input (not placeholder-only) - `error-placement` - Show error below the related field - `submit-feedback` - Loading then success/error state on submit - `required-indicators` - Mark required fields (e.g. asterisk) - `empty-states` - Helpful message and action when no content - `toast-dismiss` - Auto-dismiss toasts in 3-5s - `confirmation-dialogs` - Confirm before destructive actions - `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design) - `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD) - `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG) - `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD) - `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD) - `password-toggle` - Provide show/hide toggle for password fields (MD) - `autofill-support` - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD) - `undo-support` - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG) - `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD) - `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD) - `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD) - `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG) - `sheet-dismiss-confirm` - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG) - `error-clarity` - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD) - `field-grouping` - Group related fields logically (fieldset/legend or visual grouping) (MD) - `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD) - `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD) - `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG) - `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG) - `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD) - `toast-accessibility` - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG) - `aria-live-errors` - Form errors use aria-live region or role="alert" to notify screen readers (WCAG)