ui-ux-pro-max

name	ui-ux-pro-max
description	UI/UX design intelligence for web and mobile. 50+ styles, 161 color palettes, 57 font pairings, 99 UX guidelines across 10 stacks. Triggers on "design system", "color palette", "UI review", "make it look better", "accessibility check".

UI/UX Pro Max - Design Intelligence

Original skill by NextLevelBuilder. Included in this collection with permission under MIT license.

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.

Install the full skill

This STCA-skills version includes the SKILL.md reference guide. For the full interactive experience with the Python search CLI and data files, install from the original repo:

npx uipro-cli init --ai claude

Or clone directly:

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git ~/.claude/skills/ui-ux-pro-max-full

When to Apply

Use when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

• 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

Skip

• Pure backend logic development
• Only involving API or database design
• Performance optimization unrelated to the interface
• Infrastructure or DevOps work

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

Priority	Category	Impact	Key Checks (Must Have)	Anti-Patterns (Avoid)
1	Accessibility	CRITICAL	Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels	Removing focus rings, Icon-only buttons without labels
2	Touch & Interaction	CRITICAL	Min size 44×44px, 8px+ spacing, Loading feedback	Reliance on hover only, Instant state changes (0ms)
3	Performance	HIGH	WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1)	Layout thrashing, Cumulative Layout Shift
4	Style Selection	HIGH	Match product type, Consistency, SVG icons (no emoji)	Mixing flat & skeuomorphic randomly, Emoji as icons
5	Layout & Responsive	HIGH	Mobile-first breakpoints, Viewport meta, No horizontal scroll	Horizontal scroll, Fixed px container widths, Disable zoom
6	Typography & Color	MEDIUM	Base 16px, Line-height 1.5, Semantic color tokens	Text < 12px body, Gray-on-gray, Raw hex in components
7	Animation	MEDIUM	Duration 150–300ms, Motion conveys meaning, Spatial continuity	Decorative-only animation, Animating width/height, No reduced-motion
8	Forms & Feedback	MEDIUM	Visible labels, Error near field, Helper text, Progressive disclosure	Placeholder-only label, Errors only at top, Overwhelm upfront
9	Navigation Patterns	HIGH	Predictable back, Bottom nav ≤5, Deep linking	Overloaded nav, Broken back behavior, No deep links
10	Charts & Data	LOW	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)
• focus-states - Visible focus rings on interactive elements (2–4px)
• alt-text - Descriptive alt text for meaningful images
• aria-labels - aria-label for icon-only buttons; accessibilityLabel in native
• keyboard-nav - Tab order matches visual order; full keyboard support
• 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
• reduced-motion - Respect prefers-reduced-motion; reduce/disable animations when requested
• voiceover-sr - Meaningful accessibilityLabel/accessibilityHint; logical reading order
• escape-routes - Provide cancel/back in modals and multi-step flows
• keyboard-shortcuts - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop

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
• 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
• standard-gestures - Use platform standard gestures consistently; don't redefine
• press-feedback - Visual feedback on press (ripple/highlight)
• haptic-feedback - Use haptic for confirmations and important actions; avoid overuse
• safe-area-awareness - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges

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
• font-loading - Use font-display: swap/optional to avoid invisible text
• critical-css - Prioritize above-the-fold CSS
• lazy-loading - Lazy load non-hero components via dynamic import / route-level splitting
• bundle-splitting - Split code by route/feature to reduce initial load and TTI
• virtualize-lists - Virtualize lists with 50+ items
• progressive-loading - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations

4. Style Selection (HIGH)

• style-match - Match style to product type
• consistency - Use same style across all pages
• no-emoji-icons - Use SVG icons (Heroicons, Lucide), not emojis
• platform-adaptive - Respect platform idioms (iOS HIG vs Material)
• elevation-consistent - Use a consistent elevation/shadow scale
• dark-mode-pairing - Design light/dark variants together
• primary-action - Each screen should have only one primary CTA; secondary actions visually subordinate

5. Layout & Responsive (HIGH)

• viewport-meta - width=device-width initial-scale=1 (never disable zoom)
• mobile-first - Design mobile-first, then scale up
• breakpoint-consistency - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
• readable-font-size - Minimum 16px body text on mobile
• line-length-control - Mobile 35–60 chars per line; desktop 60–75 chars
• horizontal-scroll - No horizontal scroll on mobile
• spacing-scale - Use 4pt/8dp incremental spacing system
• z-index-management - Define layered z-index scale

6. Typography & Color (MEDIUM)

• line-height - Use 1.5-1.75 for body text
• font-pairing - Match heading/body font personalities
• font-scale - Consistent type scale (e.g. 12 14 16 18 24 32)
• color-semantic - Define semantic color tokens (primary, secondary, error, surface, on-surface)
• color-dark-mode - Dark mode uses desaturated / lighter tonal variants, not inverted colors
• color-accessible-pairs - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA)
• number-tabular - Use tabular/monospaced figures for data columns, prices, and timers

7. Animation (MEDIUM)

• duration-timing - Use 150–300ms for micro-interactions; complex transitions ≤400ms
• transform-performance - Use transform/opacity only; avoid animating width/height/top/left
• loading-states - Show skeleton or progress indicator when loading exceeds 300ms
• motion-meaning - Every animation must express a cause-effect relationship, not just be decorative
• spring-physics - Prefer spring/physics-based curves over linear for natural feel
• exit-faster-than-enter - Exit animations shorter than enter (~60–70% of enter duration)
• interruptible - Animations must be interruptible; user tap/gesture cancels in-progress animation
• no-blocking-animation - Never block user input during an animation

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
• empty-states - Helpful message and action when no content
• confirmation-dialogs - Confirm before destructive actions
• inline-validation - Validate on blur (not keystroke)
• error-recovery - Error messages must include a clear recovery path
• focus-management - After submit error, auto-focus the first invalid field

9. Navigation Patterns (HIGH)

• bottom-nav-limit - Bottom navigation max 5 items; use labels with icons
• back-behavior - Back navigation must be predictable and consistent; preserve scroll/state
• deep-linking - All key screens must be reachable via deep link / URL
• nav-state-active - Current location must be visually highlighted in navigation
• modal-escape - Modals and sheets must offer a clear close/dismiss affordance
• state-preservation - Navigating back must restore previous scroll position, filter state, and input
• adaptive-navigation - Large screens prefer sidebar; small screens use bottom/top nav

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
• data-table - Provide table alternative for accessibility
• legend-visible - Always show legend; position near the chart
• tooltip-on-interact - Provide tooltips/data labels on hover (Web) or tap (mobile)
• responsive-chart - Charts must reflow or simplify on small screens
• no-pie-overuse - Avoid pie/donut for >5 categories; switch to bar chart

Pre-Delivery Checklist

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons come from a consistent icon family and style
• Pressed-state visuals do not shift layout bounds or cause jitter
• Semantic theme tokens are used consistently

Interaction

• All tappable elements provide clear pressed feedback
• Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
• Micro-interaction timing stays in the 150-300ms range
• Screen reader focus order matches visual order

Light/Dark Mode

• Primary text contrast >=4.5:1 in both light and dark mode
• Secondary text contrast >=3:1 in both light and dark mode
• Both themes are tested before delivery

Layout

• Safe areas are respected for headers, tab bars, and bottom CTA bars
• Verified on small phone, large phone, and tablet
• 4/8dp spacing rhythm is maintained
• Long-form text measure remains readable on larger devices

Accessibility

• All meaningful images/icons have accessibility labels
• Form fields have labels, hints, and clear error messages
• Color is not the only indicator
• Reduced motion and dynamic text size are supported