ui-ux-pro-max

# 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: ```bash 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](https://www.python.org/downloads/) 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: ```bash python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] ``` This command: 1. Searches domains in parallel (product, style, color, landing, typography) 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches 3. Returns complete design system: pattern, style, colors, typography, effects 4. Includes anti-patterns to avoid **Example:** ```bash 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`: ```bash 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 rules - `design-system/pages/` — Folder for page-specific overrides **With page-specific override:** ```bash 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:** 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` 2. If the page file exists, its rules **override** the Master file 3. 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: ```bash 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:** ```bash 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: ```bash 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: ```bash 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:** ```bash 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) ```bash 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) ```bash # Get style options for a modern tool product python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style # Get UX best practices for search interaction and loading python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux ``` ### Step 4: Stack Guidelines ```bash 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: ```bash # ASCII box (default) - best for terminal display python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system # Markdown - best for documentation 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