UI/UX Pro Max - Design Intelligence
A searchable database containing UI styles, color schemes, font pairings, chart types, product recommendations, UX guidelines, and best practices for specific tech stacks.
Prerequisites
Check if Python is installed:
bash
python3 --version || python --version
If Python is not installed, install it according to your operating system:
macOS:
Ubuntu/Debian:
bash
sudo apt update && sudo apt install python3
Windows:
powershell
winget install Python.Python.3.12
How to Use This Skill
When a user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Step 1: Analyze User Requirements
Extract key information from the user's request:
- Product Type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style Keywords: minimalist, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Tech Stack: React, Vue, Next.js, or default to .
Step 2: Search Relevant Domains
Use
multiple times to gather comprehensive information. Continue searching until sufficient context is obtained.
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keywords>" --domain <domain> [-n <max results>]
Recommended Search Order:
- Product - Get style recommendations for the product type
- Style - Get detailed style guides (colors, effects, frameworks)
- Typography - Get font pairings with Google Fonts import code
- Color - Get color schemes (primary, secondary, CTA, background, text, border)
- Landing - Get page structure (if it's a landing page)
- Chart - Get chart recommendations (if it's a dashboard/analytics type)
- UX - Get best practices and anti-patterns (i.e., designs to avoid)
- Stack - Get guidelines for specific tech stacks (default: html-tailwind)
Step 3: Tech Stack Guidelines (Default: html-tailwind)
If the user doesn't specify a tech stack,
default to .
bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keywords>" --stack html-tailwind
Available Tech Stacks:
,
,
,
,
,
,
,
,
Search Reference
Available Domains
| Domain () | Purpose | Keyword Examples |
|---|
| Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
| UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
| Font pairings, Google Fonts | elegant, playful, professional, modern |
| Color schemes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
| Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
| Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
| Best practices, anti-patterns | animation, accessibility, z-index, loading |
| AI prompts, CSS keywords | (style names) |
Available Tech Stacks
| Tech Stack () | Focus |
|---|
| Tailwind utility classes, responsiveness, accessibility (default) |
| State management, hooks, performance, patterns |
| SSR (Server-Side Rendering), routing, image optimization, API routes |
| Composition API, Pinia, Vue Router |
| Runes, stores, SvelteKit |
| Views, state, navigation, animations |
| Components, navigation, lists |
| Widgets, state, layout, themes |
| shadcn/ui components, theme customization, forms, patterns |
Example Workflow
User Request: "Create a landing page for professional skincare services"
AI Should Execute:
bash
# 1. Search product type
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. Search style (based on industry: beauty, elegant)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. Search typography/fonts
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. Search color scheme
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. Search tech stack guidelines (default: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
Then: Synthesize all search results and implement the design.
Tips for Better Results
- Be specific with keywords - Use "healthcare SaaS dashboard" instead of "app".
- Search multiple times - Different keywords reveal different insights.
- Combine domains - Style + Typography + Color = Complete design system.
- Always check UX - Search for "animation", "z-index", "accessibility" to avoid common issues.
- Use the Stack flag - Get best practices for specific implementations.
- Iterate - If the first search doesn't match, try different keywords.
General Rules for Professional UI
These are often overlooked issues that make UI look unprofessional:
Icons & Visual Elements
| Rule | Do | Don't |
|---|
| Don't use Emoji as 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 cause layout shifts |
| Correct brand logos | Find official SVGs from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizes | Use fixed viewBox (24x24) and w-6 h-6 | Randomly mix icon sizes |
Interaction & Cursor
| Rule | Do | Don't |
|---|
| Cursor pointer | Add to all clickable/hoverable cards | Keep default cursor on interactive elements |
| Hover feedback | Provide visual feedback (color, shadow, border) | Have no indication that an element is interactive |
| Smooth transitions | Use transition-colors duration-200
| Switch states instantly or too slowly (>500ms) |
Light/Dark Mode Contrast
| Rule | Do | Don't |
|---|
| Glass cards in light mode | Use or higher opacity | Use (too transparent) |
| Light text contrast | Use (slate-900) for text | Use (slate-400) for body text |
| Soft/secondary text (light mode) | Use at least (slate-600) | Use gray-400 or lighter colors |
| Border visibility | Use in light mode | Use (invisible) |
Layout & Spacing
| Rule | Do | Don't |
|---|
| Floating navigation bar | Add spacing | Stick navigation bar to |
| Content padding | Account for the height of fixed navigation bars | Let content be hidden behind fixed elements |
| Consistent max width | Use unified or | Mix different container widths |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
Interactive Experience
Light/Dark Mode
Layout
Accessibility