UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.

When to Apply

Reference these guidelines when:

• Designing new UI components or pages
• Choosing color palettes and typography
• Reviewing code for UX issues
• Building landing pages or dashboards
• Implementing accessibility requirements

Creative Direction

Before coding, understand the context and commit to a bold aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Frontend Aesthetics

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a distinctive display font with a refined body font.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
• Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Apply gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, and grain overlays.

What to Avoid

NEVER use generic AI-generated aesthetics: overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts, and cookie-cutter patterns. No design should be the same — vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.

Implementation Complexity

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Rule Categories by Priority

Priority	Category	Impact	Domain
1	Accessibility	CRITICAL	ux
2	Touch & Interaction	CRITICAL	ux
3	Performance	HIGH	ux
4	Layout & Responsive	HIGH	ux
5	Typography & Color	MEDIUM	typography, color
6	Animation	MEDIUM	ux
7	Style Selection	MEDIUM	style, product
8	Charts & Data	LOW	chart

Quick Reference

1. Accessibility (CRITICAL)

• color-contrast - Minimum 4.5:1 ratio for normal text
• focus-states - Visible focus rings on interactive elements
• alt-text - Descriptive alt text for meaningful images
• aria-labels - aria-label for icon-only buttons
• keyboard-nav - Tab order matches visual order
• form-labels - Use label with for attribute

2. Touch & Interaction (CRITICAL)

• touch-target-size - Minimum 44x44px touch targets
• hover-vs-tap - Use click/tap for primary interactions
• loading-buttons - Disable button during async operations
• error-feedback - Clear error messages near problem
• cursor-pointer - Add cursor-pointer to clickable elements

3-8: Performance, Layout, Typography, Animation, Style, Charts

• image-optimization - Use WebP, srcset, lazy loading
• reduced-motion - Check prefers-reduced-motion
• viewport-meta - width=device-width initial-scale=1
• readable-font-size - Minimum 16px body text on mobile
• line-height - Use 1.5-1.75 for body text
• duration-timing - Use 150-300ms for micro-interactions
• style-match - Match style to product type
• chart-type - Match chart type to data type

Reference: Read references/quality-checklist.md for professional UI rules (icons, interaction, contrast, layout) and the pre-delivery checklist.

Reference: Read references/workflow-examples.md for a complete end-to-end design workflow example and search tips.

How to Use This Skill

Step 1: Analyze User Requirements

Extract: Product type, Style keywords, Industry, Stack (default: html-tailwind)

Step 2: Generate Design System (REQUIRED)

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

Add --persist to save for hierarchical retrieval. Add --page "dashboard" for page-specific overrides.

Step 3: Supplement with Detailed Searches (as needed)

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Need	Domain	Example
More style options	style	--domain style "glassmorphism dark"
Chart recommendations	chart	--domain chart "real-time dashboard"
UX best practices	ux	--domain ux "animation accessibility"
Alternative fonts	typography	--domain typography "elegant luxury"
Landing structure	landing	--domain landing "hero social-proof"

Step 4: Stack Guidelines (Default: html-tailwind)

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Search Domains

Domain	Use For
product	Product type recommendations
style	UI styles, colors, effects
typography	Font pairings, Google Fonts
color	Color palettes by product type
landing	Page structure, CTA strategies
chart	Chart types, library recommendations
ux	Best practices, anti-patterns
react	React/Next.js performance
web	Web interface guidelines
prompt	AI prompts, CSS keywords