ui-ux-pro-max

UI/UX Pro Max

AI-powered design intelligence with 67+ UI styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 15+ tech stacks.

Prerequisites

Python 3.x (no external dependencies needed).

Search Command

python3 {{SKILL_DIR}}/scripts/search.py "<query>" --domain <domain> [-n <max_results>]

Design System Generation (start here for new projects)

python3 {{SKILL_DIR}}/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

Persist across sessions:

python3 {{SKILL_DIR}}/scripts/search.py "<query>" --design-system --persist -p "Project Name"

Page-specific override:

python3 {{SKILL_DIR}}/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

Domain Search

python3 {{SKILL_DIR}}/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Domain	Use For	Example Keywords
product	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty
style	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
typography	Font pairings, Google Fonts	elegant, playful, professional, modern
color	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech
landing	Page structure, CTA strategies	hero, testimonial, pricing, social-proof
chart	Chart types, library recommendations	trend, comparison, timeline, funnel
ux	Best practices, anti-patterns	animation, accessibility, z-index, loading
react	React/Next.js performance	waterfall, bundle, suspense, memo, rerender
web	App interface guidelines	accessibilityLabel, touch targets, safe areas
prompt	AI prompts, CSS keywords	(style name)

Stack-Specific Search

python3 {{SKILL_DIR}}/scripts/search.py "<keyword>" --stack <stack>

Available stacks: html-tailwind (default), react, nextjs, astro, vue, nuxtjs, nuxt-ui, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Output Formats

# ASCII box (default)
python3 {{SKILL_DIR}}/scripts/search.py "fintech crypto" --design-system

# Markdown
python3 {{SKILL_DIR}}/scripts/search.py "fintech crypto" --design-system -f markdown

Workflow

Scenario	Start From
New project / page	Step 1 → --design-system
New component	--domain style or --domain ux
Choose style / color / font	--design-system
Review existing UI	Pre-delivery checklist below
Fix a UI bug	Domain search for relevant area
Add charts / data viz	--domain chart
Stack best practices	--stack <stack>

Step 1: Analyze Requirements

Extract: product type, target audience, style keywords, tech stack.

Step 2: Generate Design System (REQUIRED for new projects)

Run --design-system first. Always.

Step 3: Supplement with Domain Searches

Deep-dive specific areas (style, color, typography, ux, etc.)

Step 4: Stack Guidelines

Get implementation-specific best practices for the target stack.

Pre-Delivery Checklist

Visual Quality

• [ ] No emojis used as icons (use SVG: Phosphor, Heroicons, Lucide)
• [ ] cursor-pointer on all clickable elements
• [ ] Hover states with smooth transitions (150-300ms)
• [ ] Official brand assets with correct proportions
• [ ] Semantic theme tokens (no hardcoded per-screen colors)

Contrast & Color

• [ ] Light mode: text contrast ≥4.5:1
• [ ] Dark mode: primary ≥4.5:1, secondary ≥3:1
• [ ] Dividers/borders visible in both themes
• [ ] Color is not the only indicator

Layout

• [ ] Responsive: 375px, 768px, 1024px, 1440px
• [ ] Safe areas respected for fixed elements
• [ ] 4/8dp spacing rhythm maintained
• [ ] Long text readable (not edge-to-edge on wide screens)

Accessibility

• [ ] Focus states visible for keyboard nav
• [ ] prefers-reduced-motion respected
• [ ] Touch targets ≥44pt (iOS) / ≥48dp (Android)
• [ ] All meaningful images/icons have alt text / labels

Interaction

• [ ] Touch feedback within 80-150ms
• [ ] Micro-interactions 150-300ms with native easing
• [ ] Disabled states visually clear and non-interactive
• [ ] No gesture conflicts in nested interactive regions