| name | ui-ux-pro-max |
| description | AI-powered design intelligence for building professional UI/UX across multiple platforms and frameworks. Contains 67 styles, 96 colour palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks with a searchable database and design system generator. |
| triggers | ["ui design","ux design","ui/ux","design system","landing page design","colour palette","typography","visual design","interaction design","accessibility review"] |
| keywords | ["ui","ux","design","style","typography","colour","color","palette","layout","landing","glassmorphism","neumorphism","minimalism","brutalism","accessibility","wcag","responsive","dark mode","light mode","design system","tailwind","react","nextjs","vue","svelte","flutter","swiftui"] |
| source | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill |
UI UX Pro Max
Comprehensive design intelligence for web and mobile applications. Provides a searchable database of UI styles, colour palettes, typography pairings, UX guidelines, chart recommendations, and stack-specific best practices with an AI-powered design system generator.
When to Apply
Reference these guidelines when:
- Designing new UI components or pages
- Choosing colour palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements
- Generating or validating a design system
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 & Colour | MEDIUM | typography, color |
| 6 | Animation | MEDIUM | ux |
| 7 | Style Selection | MEDIUM | style, product |
| 8 | Charts & Data | LOW | chart |
Prerequisites
The design system generator and search tool require Python 3.x:
python3 --version || python --version
How to Use This Skill
When performing UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyse User Requirements
Extract key information from the request:
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, or default to
html-tailwind
Step 2: Generate Design System (REQUIRED)
Always start with --design-system to get comprehensive recommendations with reasoning:
python3 .jumpstart/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, colour, landing, typography)
- Applies reasoning rules from
ui-reasoning.csv to select best matches
- Returns complete design system: pattern, style, colours, typography, effects
- Includes anti-patterns to avoid
Example:
python3 .jumpstart/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions, add --persist:
python3 .jumpstart/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
design-system/<project-slug>/MASTER.md — Global Source of Truth with all design rulesdesign-system/<project-slug>/pages/ — Folder for page-specific overrides
With page-specific override:
python3 .jumpstart/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches for additional details:
python3 .jumpstart/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
When to use detailed searches:
| 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)
Get implementation-specific best practices:
python3 .jumpstart/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, astro, nuxtjs, nuxt-ui
Search Reference
Available Domains
| Domain | Use For | Example Keywords |
|---|
product | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
style | UI styles, colours, effects | glassmorphism, minimalism, dark mode, brutalism |
typography | Font pairings, Google Fonts | elegant, playful, professional, modern |
color | Colour 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 |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | Web interface guidelines | aria, focus, keyboard, semantic, virtualise |
Available Stacks
| Stack | Focus |
|---|
html-tailwind | Tailwind utilities, responsive, a11y (DEFAULT) |
react | State, hooks, performance, patterns |
nextjs | SSR, routing, images, API routes |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Components, Navigation, Lists |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui components, theming, forms, patterns |
jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
Icons & Visual Elements
| Rule | Do | Don't |
|---|
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis as UI icons |
| Stable hover states | Use colour/opacity transitions on hover | Use scale transforms that shift layout |
| Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizing | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
Interaction & Cursor
| Rule | Do | Don't |
|---|
| Cursor pointer | Add cursor-pointer to all clickable/hoverable cards | Leave default cursor on interactive elements |
| Hover feedback | Provide visual feedback (colour, shadow, border) | No indication element is interactive |
| Smooth transitions | Use transition-colors duration-200 | Instant state changes or too slow (>500ms) |
Light/Dark Mode Contrast
| Rule | Do | Don't |
|---|
| Glass card light mode | Use bg-white/80 or higher opacity | Use bg-white/10 (too transparent) |
| Text contrast light | Use #0F172A (slate-900) for text | Use #94A3B8 (slate-400) for body text |
| Muted text light | Use #475569 (slate-600) minimum | Use gray-400 or lighter |
| Border visibility | Use border-gray-200 in light mode | Use border-white/10 (invisible) |
Layout & Spacing
| Rule | Do | Don't |
|---|
| Floating navbar | Add top-4 left-4 right-4 spacing | Stick navbar to top-0 left-0 right-0 |
| Content padding | Account for fixed navbar height | Let content hide behind fixed elements |
| Consistent max-width | Use same max-w-6xl or max-w-7xl | Mix different container widths |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
Interaction
Light/Dark Mode
Layout
Accessibility
