UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.

When to Apply

This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.

Must Use

This Skill must be invoked in the following situations:

• 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

This Skill is recommended in the following situations:

• 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

This Skill is not needed in the following situations:

• 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, this Skill should be used.

Rule Categories by Priority

For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.

Quick Reference

Per-category rule cheat-sheet (10 priority categories, ~230 lines of named rules with platform / WCAG sources) moved to references/quick-reference.md in v0.2 (the reference split). Load that file when:

• doing an accessibility audit or contrast / focus-state check
• selecting animation timing / motion patterns
• verifying navigation pattern fit (bottom nav vs sidebar vs tabs)
• checking touch-target sizing or gesture conflict prevention
• choosing chart type / data viz patterns

The priority order is unchanged: priorities 1-2 (Accessibility, Touch & Interaction) are CRITICAL gates — always reviewed. Priorities 3-5 (Performance, Style, Layout) are HIGH. Priorities 6-9 (Typography & Color, Animation, Forms, Navigation) are MEDIUM-HIGH. Priority 10 (Charts) is LOW unless the surface is data-heavy.

→ Full per-category rule list with platform / WCAG sources: references/quick-reference.md.

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

Use this skill when the user requests any of the following:

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-methodology/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:

python3 skills/ui-ux-methodology/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-methodology/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:

python3 skills/ui-ux-methodology/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 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

python3 skills/ui-ux-methodology/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

Step 4: Stack Guidelines (React Native)

Get React Native implementation-specific best practices:

python3 skills/ui-ux-methodology/scripts/search.py "<keyword>" --stack react-native

Search Reference

Available Domains

Available Stacks

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-methodology/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)

# Get style options for a modern tool product
python3 skills/ui-ux-methodology/scripts/search.py "minimalism dark mode" --domain style

# Get UX best practices for search interaction and loading
python3 skills/ui-ux-methodology/scripts/search.py "search loading animation" --domain ux

Step 4: Stack Guidelines

python3 skills/ui-ux-methodology/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:

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-methodology/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-methodology/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
• Always add --stack react-native for implementation-specific guidance

Common Sticking Points

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
• Verify behavior with reduced-motion enabled and Dynamic Type at largest size
• Check dark mode contrast independently (don't assume light mode values work)
• Confirm all touch targets ≥44pt and no content hidden behind safe areas

Common Rules for Professional UI + Pre-Delivery Checklist

Frequently-overlooked App UI rules (Icons & Visual Elements / Interaction / Light-Dark Contrast / Layout & Spacing) PLUS the 5-section Pre-Delivery Checklist (Visual Quality / Interaction / Light-Dark Mode / Layout / Accessibility) moved to references/professional-ui-rules.md in v0.2 (the reference split). Load that file at delivery time / pre-handoff sanity pass.

Scope notice: rules + checklist are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.

→ Full rule tables + 5-section pre-delivery verification checklist: references/professional-ui-rules.md.