robsonrung 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-tailwindonly 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:
- Searches 5 domains in parallel (product, style, color, landing, typography)
- Applies reasoning rules from
ui-reasoning.csvto select best matches - Returns complete design system: pattern, style, colors, typography, effects
- 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 rulesdesign-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:
- When building a specific page (e.g., "Checkout"), first check
design-system/<project-slug>/pages/checkout.md - If the page file exists, its rules override the Master file
- If not, use
design-system/<project-slug>/MASTER.mdexclusively
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:
| 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 serif" |
| Landing structure | landing |
--domain landing "hero social-proof" |
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
| Rule | Do | Don't |
|---|---|---|
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Use color/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 (color, 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 |
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.