ui-ux-pro-max

ui-ux-pro-max

Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.

The load-bearing artifact is the design system. Reuse the project's existing tokens, components, and design rules for maintenance or review. Generate a system with --design-system only when one is missing or the user requests a new direction. The selected system guides each page and component.

For purely creative/bespoke aesthetic direction without the design-system database, see frontend-design.

Prerequisites

When a database search or design-system generation is needed, check if Python is available. Reviewing an existing system without a database lookup does not require Python:

python3 --version || python --version

If Python is not available, stop and tell the user the prerequisite is missing. Do not install Python from this skill.

How to Use This Skill

Select the work from the request: create a missing system, implement within the chosen system, or review the affected interface. Reuse existing decisions and skip searches or generation that would not change the result.

Running commands: all examples below use <skill-dir> as a placeholder for this skill's directory (the folder containing this SKILL.md). Substitute its actual path, e.g. python3 <skill-dir>/scripts/search.py .... The script resolves its data files relative to itself, so it works from any working directory.

Step 1: Analyze User Requirements

Extract key information from user 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: use the existing project stack or the user's selection; use html-tailwind only for a new unconfigured artifact.

Step 2: Select or generate the design system

Use an existing system for a review or scoped fix. When the system is missing or a new direction is requested, use --design-system to obtain recommendations:

python3 <skill-dir>/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

1. Searches 5 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

Add -f markdown for documentation-friendly output (default: ascii box, best for terminal display).

Example — user asks "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" (non-English requests work: analyze the request, then search with English keywords):

python3 <skill-dir>/scripts/search.py "beauty spa wellness service elegant" --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 <skill-dir>/scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates (where <project-slug> is the lowercased, hyphenated project name, or default if no -p given):

• design-system/<project-slug>/MASTER.md — Global Source of Truth with all design rules
• design-system/<project-slug>/pages/ — Folder for page-specific overrides

Persisted files land under the current working directory by default. Pass --output-dir (short form -o) to write the design-system/ tree somewhere else — the repo root, a docs/ folder, or a scratch directory:

python3 <skill-dir>/scripts/search.py "<query>" --design-system --persist -p "Project Name" -o <target-dir>

Set it deliberately when the shell's working directory is not where the design system belongs; the confirmation output prints paths relative to the chosen directory.

With page-specific override:

python3 <skill-dir>/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

• design-system/<project-slug>/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/<project-slug>/pages/checkout.md
2. If the page file exists, its rules override the Master file
3. If not, use design-system/<project-slug>/MASTER.md exclusively

Step 3: Supplement with Detailed Searches

With the design system selected, use domain searches only for unresolved details:

python3 <skill-dir>/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

Step 4: Stack Guidelines (Default: html-tailwind)

Search stack-specific guidance when an implementation decision needs it. Use the existing project stack. Default to html-tailwind only for a new artifact with no selected stack.

python3 <skill-dir>/scripts/search.py "layout responsive form" --stack html-tailwind

For the full list of --domain and --stack values, see references/search-reference.md.

React re-render and memoization review is not this skill's job. data/react-performance.csv is a data lookup — rules you can search and cite. Auditing an actual component tree for unnecessary re-renders, memoization that buys nothing, Context provider churn, stale closures, or fetch race conditions belongs to the advanced-react skill, which is the reviewer. Use this skill for the design system; route the performance pass there.

For an implementation request, apply the selected system and relevant search results to the scoped change. For a review request, return findings against that system without editing.

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Verify the changed interface

Use one check set for the affected pages and interactions. Start from the selected design system and, when available, its generated checklist. Merge relevant rules from the tables above; do not run duplicate checklists.

Check supported light and dark modes when the change affects shared colors or mode behavior. For a local change, inspect the affected surface in the supported modes rather than retesting unrelated pages.

Preserve these checks where applicable: consistent icons, interaction feedback, readable contrast, visible focus, labels and image alternatives, text or shape in addition to color, responsive layout, no content hidden behind fixed elements, no mobile horizontal scroll, and reduced-motion support. Use theme tokens directly as required by the project's styling conventions.

Reuse evidence for unchanged surfaces. After a correction, recheck the affected behavior; broaden only if the correction or a failure exposes a wider risk. Report the tested scope and any unsupported or untested mode.