| name | ui-ux-pro-max |
| description | UI/UX design intelligence for web and mobile. Includes 67 styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 16 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Angular, Laravel, and more). 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. |
UI/UX Pro Max — Design Intelligence
Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with BM25-ranked recommendations and an AI-powered Design System Generator.
When to Apply
Use this skill 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
Recommended
- UI looks "not professional enough" but the reason is unclear
- Receiving feedback on usability or experience
- Pre-launch UI quality optimization
- Aligning cross-platform design (Web / iOS / Android)
- Building design systems or reusable component libraries
Skip
- 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, use this skill.
Prerequisites
Python 3 is required. Check with:
python3 --version || python --version
If missing, install:
- macOS:
brew install python3
- Ubuntu/Debian:
sudo apt update && sudo apt install python3
- Windows:
winget install Python.Python.3.12
Workflow
Step 1: Analyze User Requirements
Extract from the user's request:
- Product type: SaaS, e-commerce, fintech, healthcare, gaming, portfolio, beauty, service, etc.
- Target audience: Consumer, enterprise, age group, usage context
- Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
- Stack: HTML+Tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, etc.
Step 2: Generate Design System (REQUIRED for new projects)
Always start with --design-system to get comprehensive AI-powered recommendations:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
- Searches 5 domains in parallel (product, style, color, landing, typography)
- Applies 161 industry-specific reasoning rules from
ui-reasoning.csv
- Returns a complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid and a pre-delivery checklist
Example:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Markdown output (for documentation):
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
design-system/<project>/MASTER.md — Global Source of Truthdesign-system/<project>/pages/ — Folder for page-specific overrides
With page-specific override:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
How hierarchical retrieval works:
- When building a specific page, first check
design-system/<project>/pages/[page].md
- If the page file exists, its rules override the Master file
- If not, use
design-system/<project>/MASTER.md exclusively
Step 3: Supplement with Detailed Searches
After getting the design system, use domain searches for additional details:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Need | Domain | Example |
|---|
| Product type patterns | product | --domain product "entertainment social" |
| More style options | style | --domain style "glassmorphism dark" |
| Color palettes | color | --domain color "entertainment vibrant" |
| Font pairings | typography | --domain typography "playful modern" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Landing structure | landing | --domain landing "hero social-proof" |
| Individual Google Fonts | google-fonts | --domain google-fonts "sans serif popular" |
| Icon recommendations | icons | --domain icons "navigation arrows" |
| React/Next.js performance | react | --domain react "rerender memo list" |
| App interface guidelines | web | --domain web "accessibilityLabel touch safe-areas" |
Step 4: Stack-Specific Guidelines
Get implementation-specific best practices for your stack:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>
Available stacks: react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs, angular, laravel
Search Reference
Available Domains
| Domain | Use For | Example Keywords |
|---|
product | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
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, service |
landing | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
chart | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
ux | Best practices, anti-patterns | animation, accessibility, z-index, loading |
google-fonts | Individual Google Fonts lookup | sans serif, monospace, variable font, popular |
icons | Icon library recommendations | navigation, arrows, social, media |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | App interface guidelines (iOS/Android/RN) | accessibilityLabel, touch targets, safe areas |
Quick Reference: Rule Categories by Priority
| Priority | Category | Impact | Domain | Key Checks | Anti-Patterns |
|---|
| 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, Emoji as icons |
| 5 | Layout & Responsive | HIGH | ux | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px containers, Disable zoom |
| 6 | Typography & Color | MEDIUM | typography, color | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 | Animation | MEDIUM | ux | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
| 8 | Forms & Feedback | MEDIUM | ux | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 | Navigation Patterns | HIGH | ux | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
| 10 | Charts & Data | LOW | chart | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
Pre-Delivery Checklist
Before delivering UI code, verify:
Visual Quality
Interaction
Light/Dark Mode
Layout
Accessibility
Tips for Better Results
- Use multi-dimensional keywords:
"entertainment social vibrant content-dense" not just "app"
- Try different keywords for the same need:
"playful neon" → "vibrant dark" → "content-first minimal"
- Always use
--design-system first for full recommendations, then --domain to deep-dive
- Add
--stack <your-stack> for implementation-specific guidance
- Run
--domain ux "animation accessibility z-index loading" as a UX validation pass before implementation
Example Workflow
User request: "Build a landing page for my SaaS product."
Step 1: Analyze
- Product type: SaaS
- Style keywords: modern, professional, conversion-optimized
- Stack: HTML + Tailwind (default)
Step 2: Generate Design System
python3 skills/ui-ux-pro-max/scripts/search.py "SaaS B2B modern professional" --design-system -p "MySaaS"
Step 3: Supplement
python3 skills/ui-ux-pro-max/scripts/search.py "conversion optimization" --domain landing
python3 skills/ui-ux-pro-max/scripts/search.py "form validation loading" --domain ux
Step 4: Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
Then: Synthesize the design system + detailed searches and implement the design.
Output Location
Generated design system files (via --persist) are written to design-system/<project>/ in the current working directory. The skill's own scripts and data live at skills/ui-ux-pro-max/.
