| name | ui-ux-pro-max |
| description | Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. |
ui-ux-pro-max
Comprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.
Prerequisites
The bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:
python3 --version || python --version
If Python is not installed, do not install it yourself. Stop and ask the user to install Python 3 using their preferred method (e.g. from python.org or their OS package manager), then continue once it is available. Never run package-manager or system-modifying commands (sudo, brew, apt, winget, etc.) on the user's machine for this skill.
If the user prefers not to install Python, skip the CLI searches and rely on the Quick Reference sections above.
Note: On Windows, use python instead of python3 to run scripts (e.g., python scripts/search.py instead of python3 scripts/search.py).
How to Use This Skill
Use this skill when the user requests any of the following:
| Scenario | Trigger Examples | Start From |
|---|
| New project / page | "做一个 landing page"、"Build a dashboard" | Step 1 → Step 2 (design system) |
| New component | "Create a pricing card"、"Add a modal" | Step 3 (domain search: style, ux) |
| Choose style / color / font | "What style fits a fintech app?"、"推荐配色" | Step 2 (design system) |
| Review existing UI | "Review this page for UX issues"、"检查无障碍" | Quick Reference checklist above |
| Fix a UI bug | "Button hover is broken"、"Layout shifts on load" | Quick Reference → relevant section |
| Improve / optimize | "Make this faster"、"Improve mobile experience" | Step 3 (domain search: ux, react) |
| Implement dark mode | "Add dark mode support" | Step 3 (domain: style "dark mode") |
| Add charts / data viz | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
| Stack best practices | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
Follow this workflow:
Step 1: Analyze User Requirements
Extract key information from user request:
- Product type: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
- Target audience: C-end consumer users; consider age group, usage context (commute, leisure, work)
- Style keywords: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
- Stack: React Native (this project's only tech stack)
Step 2: Generate Design System (REQUIRED)
Always start with --design-system to get comprehensive recommendations with reasoning:
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
- Searches domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csv to select best matches
- Returns complete design system: pattern, style, colors, typography, effects
- Includes anti-patterns to avoid
Example:
python3 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 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
design-system/MASTER.md — Global Source of Truth with all design rulesdesign-system/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"
This also creates:
design-system/pages/dashboard.md — Page-specific deviations from Master
How hierarchical retrieval works:
- When building a specific page (e.g., "Checkout"), first check
design-system/pages/checkout.md
- If the page file exists, its rules override the Master file
- If not, use
design-system/MASTER.md exclusively
Context-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
Step 2c: Design Dials (optional)
Three optional 1-10 sliders that tune --design-system output without changing your query. Add any combination of them to the same command:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>
| Dial | Low (1-3) | Mid (4-7) | High (8-10) |
|---|
--variance | Centered / minimal (biases toward Minimalism-style categories) | Balanced / modern | Bold / asymmetric (biases toward Brutalism, Bento Grids) |
--motion | Subtle micro-interactions | Standard scroll/stagger motion | Complex choreography (pin, Flip, SplitText) |
--density | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense/dashboard (8-32px spacing scale) |
--motion attaches a ready-to-use GSAP snippet (with framework notes, Do/Don't, and performance notes) pulled from --domain gsap, matched to the resolved tier (Subtle/Standard/Complex).--density overrides the --space-* CSS variable table in the ASCII/markdown/MASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).
Example:
python3 skills/ui-ux-pro-max/scripts/search.py "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"
Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
When to use detailed searches:
| 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" |
| React Native perf | react | --domain react "rerender memo list" |
| App interface a11y | web | --domain web "accessibilityLabel touch safe-areas" |
| AI prompt / CSS keywords | prompt | --domain prompt "minimalism" |
Step 4: Stack Guidelines
Get implementation-specific best practices for the user's stack:
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>
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 |
gsap | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
prompt | AI prompts, CSS keywords | (style name) |
Available Stacks
| Stack | Focus |
|---|
react-native | Components, Navigation, Lists |
javafx | Enterprise desktop apps, AtlantaFX themes, FXML, CSS, Controls, Binding, Threading, Packaging |
JavaFX enterprise examples:
python3 skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
Example Workflow
User request: "Make an AI search homepage。"
Step 1: Analyze Requirements
- Product type: Tool (AI search engine)
- Target audience: C-end users looking for fast, intelligent search
- Style keywords: modern, minimal, content-first, dark mode
- Stack: React Native
Step 2: Generate Design System (REQUIRED)
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Step 3: Supplement with Detailed Searches (as needed)
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
Step 4: Stack Guidelines
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
Then: Synthesize design system + detailed searches and implement the design.
Output Formats
The --design-system flag supports two output formats:
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Tips for Better Results
Query Strategy
- Use multi-dimensional keywords — combine product + industry + tone + density:
"entertainment social vibrant content-dense" not just "app"
- Try different keywords for the same need:
"playful neon" → "vibrant dark" → "content-first minimal"
- Use
--design-system first for full recommendations, then --domain to deep-dive any dimension you're unsure about
- Add
--stack <stack> for implementation-specific guidance when the target stack is known
Common Sticking Points
| Problem | What to Do |
|---|
| Can't decide on style/color | Re-run --design-system with different keywords |
| Dark mode contrast issues | Quick Reference §6: color-dark-mode + color-accessible-pairs |
| Animations feel unnatural | Quick Reference §7: spring-physics + easing + exit-faster-than-enter |
| Form UX is poor | Quick Reference §8: inline-validation + error-clarity + focus-management |
| Navigation feels confusing | Quick Reference §9: nav-hierarchy + bottom-nav-limit + back-behavior |
| Layout breaks on small screens | Quick Reference §5: mobile-first + breakpoint-consistency |
| Performance / jank | Quick Reference §3: virtualize-lists + main-thread-budget + debounce-throttle |
Pre-Delivery Checklist
- Run
--domain ux "animation accessibility z-index loading" as a UX validation pass before implementation
- Run through Quick Reference §1–§3 (CRITICAL + HIGH) as a final review
- Test on 375px (small phone) and landscape orientation
