UI/UX Pro Max - Design Intelligence
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
Summary
Goal: Provide design intelligence (styles, color palettes, font pairings, UX guidelines) as a searchable database to inform UI/UX decisions before implementation.
| Step |
Action |
Key Notes |
| 1 |
Analyze requirements |
Extract product type, style keywords, industry, stack |
| 2 |
Search domains |
Use search.py for product, style, color, font, UX data |
| 3 |
Compile recommendations |
Style guide, palette, typography, UX patterns |
| 4 |
Deliver design brief |
Tech-agnostic recommendations ready for implementation |
Key Principles:
- Use FIRST before implementation — design decisions before code
- Tech-agnostic: works with React, Vue, Angular, Flutter, any stack
- For React component implementation, use shadcn-tailwind after this skill
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
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
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: React, Vue, Next.js, or default to
html-tailwind
Step 2: Search Relevant Domains
Use search.py multiple times to gather comprehensive information. Search until you have enough context.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
Recommended search order:
- Product - Get style recommendations for product type
- Style - Get detailed style guide (colors, effects, frameworks)
- Typography - Get font pairings with Google Fonts imports
- Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
- Landing - Get page structure (if landing page)
- Chart - Get chart recommendations (if dashboard/analytics)
- UX - Get best practices and anti-patterns
- Stack - Get stack-specific guidelines (default: html-tailwind)
Step 3: Stack Guidelines (Default: html-tailwind)
If user doesn't specify a stack, default to html-tailwind.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter
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 |
prompt |
AI prompts, CSS keywords |
(style name) |
Available Stacks
| Stack |
Focus |
html-tailwind |
Tailwind utilities, responsive, a11y (DEFAULT) |
react |
State, hooks, performance, patterns |
nextjs |
SSR, routing, images, API routes |
vue |
Composition API, Pinia, Vue Router |
svelte |
Runes, stores, SvelteKit |
swiftui |
Views, State, Navigation, Animation |
react-native |
Components, Navigation, Lists |
flutter |
Widgets, State, Layout, Theming |
Example Workflow
User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
AI should:
# 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
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. Search color palette
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 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 - "healthcare SaaS dashboard" > "app"
- Search multiple times - Different keywords reveal different insights
- Combine domains - Style + Typography + Color = Complete design system
- Always check UX - Search "animation", "z-index", "accessibility" for common issues
- Use stack flag - Get implementation-specific best practices
- Iterate - If first search doesn't match, try different keywords
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 |
Pre-Delivery Checklist
Before delivering UI code, verify these items:
Visual Quality
Interaction
Light/Dark Mode
Layout
Accessibility
IMPORTANT Task Planning Notes
- Always plan and break many small todo tasks
- Always add a final review todo task to review the works done at the end to find any fix or enhancement needed
1---2name: ui-ux-pro-max-643description: [Utilities] Design intelligence database for UI/UX decisions (tech-agnostic). Use FIRST when planning beautiful interfaces - provides style recommendations, color palettes, font pairings, UX guidelines BEFORE implementation. Searchable: 50 styles (glassmorphism, minimalism, brutalism), 21 color palettes, 50 font pairings, chart recommendations, landing page structures, accessibility patterns. Works with any stack (React, Vue, Angular, Flutter). For React component implementation, use shadcn-tailwind instead. Triggers on: beautiful UI, design system, color palette, font pairing, UX review, style guide.4---56# UI/UX Pro Max - Design Intelligence78Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.910## Summary1112**Goal:** Provide design intelligence (styles, color palettes, font pairings, UX guidelines) as a searchable database to inform UI/UX decisions before implementation.1314| Step | Action | Key Notes |15|------|--------|-----------|16| 1 | Analyze requirements | Extract product type, style keywords, industry, stack |17| 2 | Search domains | Use `search.py` for product, style, color, font, UX data |18| 3 | Compile recommendations | Style guide, palette, typography, UX patterns |19| 4 | Deliver design brief | Tech-agnostic recommendations ready for implementation |2021**Key Principles:**22- Use FIRST before implementation — design decisions before code23- Tech-agnostic: works with React, Vue, Angular, Flutter, any stack24- For React component implementation, use shadcn-tailwind after this skill2526## Prerequisites2728Check if Python is installed:2930```bash31python3 --version || python --version32```3334If Python is not installed, install it based on user's OS:3536**macOS:**37```bash38brew install python339```4041**Ubuntu/Debian:**42```bash43sudo apt update && sudo apt install python344```4546**Windows:**47```powershell48winget install Python.Python.3.1249```5051---5253## How to Use This Skill5455When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:5657### Step 1: Analyze User Requirements5859Extract key information from user request:60- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.61- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.62- **Industry**: healthcare, fintech, gaming, education, etc.63- **Stack**: React, Vue, Next.js, or default to `html-tailwind`6465### Step 2: Search Relevant Domains6667Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.6869```bash70python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]71```7273**Recommended search order:**74751. **Product** - Get style recommendations for product type762. **Style** - Get detailed style guide (colors, effects, frameworks)773. **Typography** - Get font pairings with Google Fonts imports784. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)795. **Landing** - Get page structure (if landing page)806. **Chart** - Get chart recommendations (if dashboard/analytics)817. **UX** - Get best practices and anti-patterns828. **Stack** - Get stack-specific guidelines (default: html-tailwind)8384### Step 3: Stack Guidelines (Default: html-tailwind)8586If user doesn't specify a stack, **default to `html-tailwind`**.8788```bash89python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind90```9192Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`9394---9596## Search Reference9798### Available Domains99100| Domain | Use For | Example Keywords |101| ------------ | ------------------------------------ | -------------------------------------------------------- |102| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |103| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |104| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |105| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |106| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |107| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |108| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |109| `prompt` | AI prompts, CSS keywords | (style name) |110111### Available Stacks112113| Stack | Focus |114| --------------- | ---------------------------------------------- |115| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |116| `react` | State, hooks, performance, patterns |117| `nextjs` | SSR, routing, images, API routes |118| `vue` | Composition API, Pinia, Vue Router |119| `svelte` | Runes, stores, SvelteKit |120| `swiftui` | Views, State, Navigation, Animation |121| `react-native` | Components, Navigation, Lists |122| `flutter` | Widgets, State, Layout, Theming |123124---125126## Example Workflow127128**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"129130**AI should:**131132```bash133# 1. Search product type134python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product135136# 2. Search style (based on industry: beauty, elegant)137python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style138139# 3. Search typography140python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography141142# 4. Search color palette143python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color144145# 5. Search landing page structure146python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing147148# 6. Search UX guidelines149python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux150python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux151152# 7. Search stack guidelines (default: html-tailwind)153python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind154```155156**Then:** Synthesize all search results and implement the design.157158---159160## Tips for Better Results1611621. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"1632. **Search multiple times** - Different keywords reveal different insights1643. **Combine domains** - Style + Typography + Color = Complete design system1654. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues1665. **Use stack flag** - Get implementation-specific best practices1676. **Iterate** - If first search doesn't match, try different keywords168169---170171## Common Rules for Professional UI172173These are frequently overlooked issues that make UI look unprofessional:174175### Icons & Visual Elements176177| Rule | Do | Don't |178| -------------------------- | ----------------------------------------------- | -------------------------------------- |179| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |180| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |181| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |182| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |183184### Interaction & Cursor185186| Rule | Do | Don't |187| ---------------------- | ----------------------------------------------------- | -------------------------------------------- |188| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |189| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |190| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |191192### Light/Dark Mode Contrast193194| Rule | Do | Don't |195| ------------------------- | ----------------------------------- | --------------------------------------- |196| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |197| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |198| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |199| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |200201### Layout & Spacing202203| Rule | Do | Don't |204| ------------------------ | ----------------------------------- | -------------------------------------- |205| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |206| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |207| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |208209---210211## Pre-Delivery Checklist212213Before delivering UI code, verify these items:214215### Visual Quality216- [ ] No emojis used as icons (use SVG instead)217- [ ] All icons from consistent icon set (Heroicons/Lucide)218- [ ] Brand logos are correct (verified from Simple Icons)219- [ ] Hover states don't cause layout shift220221### Interaction222- [ ] All clickable elements have `cursor-pointer`223- [ ] Hover states provide clear visual feedback224- [ ] Transitions are smooth (150-300ms)225- [ ] Focus states visible for keyboard navigation226227### Light/Dark Mode228- [ ] Light mode text has sufficient contrast (4.5:1 minimum)229- [ ] Glass/transparent elements visible in light mode230- [ ] Borders visible in both modes231- [ ] Test both modes before delivery232233### Layout234- [ ] Floating elements have proper spacing from edges235- [ ] No content hidden behind fixed navbars236- [ ] Responsive at 320px, 768px, 1024px, 1440px237- [ ] No horizontal scroll on mobile238239### Accessibility240- [ ] All images have alt text241- [ ] Form inputs have labels242- [ ] Color is not the only indicator243- [ ] `prefers-reduced-motion` respected244245## IMPORTANT Task Planning Notes246247- Always plan and break many small todo tasks248- Always add a final review todo task to review the works done at the end to find any fix or enhancement needed
diegosouzapw