UI/UX Pro Max

Overview

A comprehensive UI/UX design intelligence system that combines visual design expertise with engineering rigor. This skill provides opinionated, production-ready guidance covering style selection, color palettes, typography, UX heuristics, data visualization, and multi-stack implementation. Every recommendation is filtered through a strict priority hierarchy that ensures accessibility and performance are never sacrificed for aesthetics.

Phase 1: Requirements Gathering

Identify the product type and target audience
Determine platform(s) (web, mobile, desktop)
Assess existing brand guidelines or design system
Define accessibility requirements
Set performance budgets

STOP — Confirm requirements with user before making design recommendations.

Priority Hierarchy (Non-Negotiable Order)

Do NOT skip or reorder these priorities. Accessibility always comes first.

Accessibility — WCAG 2.1 AA minimum, AAA preferred
- Contrast ratio: 4.5:1 for normal text, 3:1 for large text
- Keyboard navigation: all interactive elements focusable, visible focus ring
- ARIA labels on all non-text controls
- Screen reader announcements for dynamic content
- Reduced motion: respect
```
prefers-reduced-motion
```
Touch Targets — 44x44px minimum (Apple HIG / WCAG 2.5.5)
- Spacing between targets: minimum 8px
- Clickable area may exceed visual bounds via padding
Performance
- Images: WebP with AVIF fallback, lazy loading below fold
- CLS < 0.1, LCP < 2.5s, FID < 100ms
- Font loading:
```
font-display: swap
```
  , preload critical fonts
- Bundle: code-split routes, tree-shake unused components
Style — Applied only after 1-3 are satisfied
Layout — Composition and spacing applied last

Phase 2: Style Selection

STOP — Present style recommendation with rationale before proceeding to implementation.

Style Selection Decision Table

Context	Recommended Styles	Why
SaaS Dashboard	Minimalism, Swiss, Material 3	Clean, data-focused, professional
Portfolio	Brutalism, Maximalism, Glassmorphism	Expressive, memorable
E-commerce	Clean, Material 3, Swiss	Trust, clarity, conversion
Mobile App	Material 3, Neumorphism, Minimalism	Native feel, thumb-friendly
Landing Page	Glassmorphism, Neo-Brutalism, Japandi	Visual impact, hero focus
Enterprise/B2B	Swiss Design, Minimalism	Authority, information density
Creative Agency	Maximalism, Brutalism, Cyberpunk	Uniqueness, portfolio showcase
Health/Wellness	Japandi, Minimalism	Calming, trustworthy
Finance	Swiss, Material 3	Conservative, professional
Kids/Family	Claymorphism, Maximalism	Playful, engaging

Style Reference (Key Categories)

Glass and Transparency:

Glassmorphism:
```
backdrop-filter: blur(10px)
```
, semi-transparent backgrounds, subtle border
Frosted Glass: heavier blur (20px+), lower opacity, works on busy backgrounds
Acrylic (Fluent Design): noise texture overlay + blur

Minimal and Clean:

Minimalism: maximum whitespace, single accent color, limited element count
Swiss Design: grid-based, Helvetica/Grotesk, asymmetric balance
Japandi: warm neutrals, organic shapes, hidden complexity

Bold and Expressive:

Brutalism: raw, exposed structure, system fonts, harsh borders, no border-radius
Neo-Brutalism: brutalism + bright accent colors + drop shadows
Maximalism: layered textures, mixed fonts, dense information

Depth and Dimension:

Neumorphism: soft inner/outer shadows on same-color backgrounds
Material Design 3: elevation tokens, tonal surfaces, dynamic color
Claymorphism: inflated 3D look, pastel colors, inner shadows

Dark and Moody:

Dark Mode: OLED-safe (#000 backgrounds), muted primaries, reduced brightness
Cyberpunk: neon on dark, glitch effects, monospace accents
Noir: high contrast, grayscale with single accent

Phase 3: Color and Typography

STOP — Present palette and font pairing for approval before building components.

Color Palette Selection Rules

Palette Category	Product Types	Characteristics
SaaS/B2B (24 palettes)	Dashboards, admin tools	Professional blues, teals, slates
E-commerce (20 palettes)	Shops, marketplaces	Warm, trust-building ambers, greens
Health/Wellness (18 palettes)	Health apps, meditation	Calming greens, soft blues, lavender
Finance (15 palettes)	Banking, trading	Deep blues, golds, conservative neutrals
Creative (22 palettes)	Portfolios, agencies	Bold, saturated, unexpected combos
Social (16 palettes)	Communities, social apps	Vibrant, energetic, gradient-friendly
Education (14 palettes)	Learning, courses	Friendly, approachable, moderate saturation
Enterprise (12 palettes)	Corporate tools	Muted, authoritative, high-contrast
Kids/Family (10 palettes)	Children's apps	Bright primaries, rounded, playful
Luxury (10 palettes)	Premium brands	Black, gold, minimal, high whitespace

Color Token Rules

Primary: brand identity color, used for CTAs and key actions
Secondary: complementary, used for secondary actions and accents
Neutral: gray scale for text, borders, backgrounds (minimum 9 shades)
Semantic: success (#22C55E), warning (#F59E0B), error (#EF4444), info (#3B82F6)
Always define as semantic tokens:
```
--color-action-primary
```
, not
```
--color-blue-500
```

Dark Mode Palette Rules

Rule	Implementation
Do NOT invert colors	Remap to dark-appropriate equivalents
Reduce saturation 10-20%	Prevent eye strain on dark backgrounds
Elevation = lighter surface	Not shadow-based like light mode
Text hierarchy	#E2E8F0 (primary), #94A3B8 (secondary), #64748B (tertiary)

Font Pairings (Top 10)

Pairing	Best For
Inter + Source Serif 4	SaaS, dashboards
Geist + Geist Mono	Developer tools, technical
DM Sans + DM Serif Display	Marketing, editorial
Plus Jakarta Sans + Lora	Modern professional
Outfit + Newsreader	Creative agencies
Manrope + Bitter	Enterprise applications
Space Grotesk + Space Mono	Tech startups
Satoshi + Erode	Premium/luxury
General Sans + Gambetta	Editorial/publishing
Cabinet Grotesk + Zodiak	Bold branding

Typography Scale (Default)

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

Phase 4: UX Guidelines Application

Navigation Rules

Primary navigation: maximum 7 items (Miller's Law)
Current location always indicated (breadcrumb or active state)
Back button must always work as expected
Search available on every page for content-heavy apps

Form Rules

Labels above inputs, never placeholder-only
Inline validation on blur, not on keystroke
Error messages: specific, actionable, adjacent to field
Auto-focus first field on page load
Submit button disabled until form valid (with explanation)
Progress indicator for multi-step forms

Feedback Rules

Loading states for any action > 300ms
Skeleton screens over spinners for content loading
Toast notifications: auto-dismiss success (3s), persist errors
Tap feedback: 80-150ms response time
Optimistic UI for low-risk actions

Content Layout Rules

F-pattern for text-heavy pages
Z-pattern for landing pages
Above-the-fold: value proposition + primary CTA
One primary CTA per viewport

Mobile Rules

Bottom navigation for primary actions (thumb zone)
Pull-to-refresh for feed content
Swipe gestures with visual affordance

Phase 5: Implementation

Chart Type Selection Decision Table

Data Relationship	Chart Types
Comparison	Bar, Grouped Bar, Lollipop, Dot Plot
Trend over Time	Line, Area, Sparkline, Step
Part-to-Whole	Pie (max 5 slices), Donut, Treemap, Stacked Bar
Distribution	Histogram, Box Plot, Violin, Density
Correlation	Scatter, Bubble, Heatmap
Flow/Process	Sankey, Funnel, Waterfall
Geographic	Choropleth, Dot Map, Cartogram
Hierarchical	Sunburst, Icicle

Supported Stacks

Stack	Key Patterns
React	JSX components, hooks, CSS Modules / Tailwind
Next.js	App Router, Server Components, Image optimization
Vue	Composition API, `<script setup>` , Pinia
Svelte	Reactive declarations, transitions, SvelteKit
SwiftUI	Declarative views, ViewModifiers, @State/@Binding
React Native	Flexbox, Platform.select, SafeAreaView
Flutter	Widgets, Material/Cupertino, MediaQuery
Tailwind CSS	Utility-first, @apply sparingly, design tokens via config
shadcn/ui	Radix primitives, Tailwind variants, cn() utility
HTML/CSS	Semantic HTML5, CSS Grid/Flexbox, custom properties

Design Token Architecture

master.tokens.json    -> Primitive values (colors, spacing, fonts)
semantic.tokens.json  -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
  brand-a.tokens.json -> Brand-specific overrides
  dark.tokens.json    -> Dark mode overrides

Master tokens are read-only defaults
Overrides are shallow-merged at runtime
Component tokens reference semantic tokens only
Never reference primitive tokens in components

Quick Wins Checklist

No emoji as icons — use Lucide React or Heroicons
Tap feedback delay: 80-150ms
Semantic color tokens (not raw hex values)
8dp spacing rhythm (4, 8, 12, 16, 24, 32, 48, 64)
```
prefers-color-scheme
```
media query for dark mode
```
prefers-reduced-motion
```
for animations
```
:focus-visible
```
instead of
```
:focus
```
for keyboard-only focus
Image aspect ratios set to prevent CLS
Font preloading for above-the-fold text
```
loading="lazy"
```
on below-fold images

Anti-Patterns / Common Mistakes

Anti-Pattern	Why It Is Wrong	What to Do Instead
`opacity` for disabled text	Kills readability	Use distinct disabled color token
Fixed pixel breakpoints only	Ignores component context	Use container queries for components
Hamburger menus on desktop	Hides primary navigation	Visible nav bar on desktop
Carousel for critical content	Most users see only first slide	Use static layout or accordion
Infinite scroll without URL persistence	Cannot share or return to position	Persist scroll position in URL
Modal on modal	Confusing, accessibility nightmare	Redesign to avoid nested modals
Auto-playing media	Annoying, accessibility violation	Require user interaction to play
Color as only differentiator	Color-blind users excluded	Add shape/pattern/text labels
Placeholder-only labels	Disappear on input, accessibility issue	Use visible labels above inputs
Raw hex values in components	Impossible to theme	Use semantic design tokens

Integration Points

Skill	Integration
`ui-design-system`	Token architecture and component library
`canvas-design`	Data visualization and charts
`mobile-design`	Mobile-specific design patterns
`ux-researcher-designer`	User research informs design decisions
`artifacts-builder`	Standalone prototypes and demos
`senior-frontend`	Implementation of UI components
`accessibility`	WCAG compliance validation

Skill Type

FLEXIBLE — Follow the priority hierarchy (accessibility > touch > performance > style > layout). Style recommendations adapt to context. Accessibility and performance rules are strongly recommended and should not be deprioritized.

ui-ux-pro-max

NPX Install

Tags

SKILL.md Content