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