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.
metadata
{"bundled-in":"launch-mcp","source":"https://github.com/nextlevelbuilder/ui-ux-pro-max-skill","note":"Guidance-only copy bundled into launch-mcp. The optional Python CLI (scripts/search.py) and CSV database are NOT bundled — apply the Quick Reference, rule categories, and checklists below directly."}
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)
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
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)
9. Navigation Patterns (HIGH)
bottom-nav-limit - Bottom navigation max 5 items; use labels with icons (Material Design)
drawer-usage - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
back-behavior - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
deep-linking - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
tab-bar-ios - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
top-app-bar-android - Android: use Top App Bar with navigation icon for primary structure (Material Design)
nav-label-icon - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
nav-state-active - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
nav-hierarchy - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
modal-escape - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
search-accessible - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
breadcrumb-web - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
state-preservation - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
gesture-nav-support - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
tab-badge - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
overflow-menu - When actions exceed available space, use overflow/more menu instead of cramming (MD)
bottom-nav-top-level - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
adaptive-navigation - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
back-stack-integrity - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
navigation-consistency - Navigation placement must stay the same across all pages; don't change by page type
10. Charts & Data (LOW)
chart-type - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
color-guidance - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
data-table - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
pattern-texture - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
legend-visible - Always show legend; position near the chart, not detached below a scroll fold (MD)
tooltip-on-interact - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
axis-labels - Label axes with units and readable scale; avoid truncated or rotated labels on mobile
responsive-chart - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
empty-data-state - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
loading-chart - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
animation-optional - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
large-dataset - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
number-formatting - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
touch-target-chart - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
no-pie-overuse - Avoid pie/donut for >5 categories; switch to bar chart for clarity
contrast-data - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
legend-interactive - Legends should be clickable to toggle series visibility (MD)
direct-labeling - For small datasets, label values directly on the chart to reduce eye travel
tooltip-keyboard - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
sortable-table - Data tables must support sorting with aria-sort indicating current sort state (WCAG)
How to Use
Search specific domains using the CLI tool below.
Bundled note: In this launch-mcp bundle the Python CLI and CSV database are not shipped. Apply the Quick Reference, Common Rules, and Pre-Delivery Checklists above directly. The --design-system / --domain commands below describe the upstream skill's optional tooling and are kept for reference only.
Prerequisites
Check if Python is installed:
python3 --version || python --version
If Python is not installed, install it based on user's OS.
How to Use This Skill
Use this skill when the user requests any of the following:
Scenario
Trigger Examples
Start From
New project / page
"Build a landing page", "Build a dashboard"
Design system + Quick Reference
New component
"Create a pricing card", "Add a modal"
Quick Reference: style, ux
Choose style / color / font
"What style fits a fintech app?", "Recommend a color palette"
Style Selection + Typography & Color
Review existing UI
"Review this page for UX issues", "Check accessibility"
Target audience: age group, usage context (commute, leisure, work)
Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
Stack: the project's target stack (here: single-file HTML/CSS/JS)
Step 2: Choose a Design System
Pick a coherent pattern, style, color palette, typography pairing, and effect system that matches the product type. Keep it consistent across all sections. Note anti-patterns to avoid (mixing styles, emoji icons, low-contrast text, random spacing).
Step 3: Apply Detailed Rules
Deep-dive whichever dimension you're unsure about using the Quick Reference sections above (style, color, typography, chart, ux, landing structure).
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
Rule
Standard
Avoid
Why It Matters
No Emoji as Structural Icons
Use vector-based icons (Lucide, Heroicons, inline SVG).
Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls.
Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens.
Vector-Only Assets
Use SVG or vector icons that scale cleanly and support theming.
Raster PNG icons that blur or pixelate.
Ensures scalability, crisp rendering, and dark/light mode adaptability.
Stable Interaction States
Use color, opacity, or elevation transitions for press states without changing layout bounds.
Layout-shifting transforms that move surrounding content or trigger visual jitter.
Prevents unstable interactions and preserves smooth motion/perceived quality.
Correct Brand Logos
Use official brand assets and follow their usage guidelines (spacing, color, clear space).
Guessing logo paths, recoloring unofficially, or modifying proportions.
