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:

bash

brew install python3

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
```
html-tailwind
```
.

Step 2: Search Relevant Domains

Use

search.py

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
html-tailwind
.

bash

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keywords>" --stack html-tailwind

Available Tech Stacks:

html-tailwind

react

nextjs

vue

svelte

swiftui

react-native

flutter

shadcn

Search Reference

Available Domains

Domain ( `domain` )	Purpose	Keyword Examples
`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 schemes 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 names)

Available Tech Stacks

Tech Stack ( `stack` )	Focus
`html-tailwind`	Tailwind utility classes, responsiveness, accessibility (default)
`react`	State management, hooks, performance, patterns
`nextjs`	SSR (Server-Side Rendering), routing, image optimization, API routes
`vue`	Composition API, Pinia, Vue Router
`svelte`	Runes, stores, SvelteKit
`swiftui`	Views, state, navigation, animations
`react-native`	Components, navigation, lists
`flutter`	Widgets, state, layout, themes
`shadcn`	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 `cursor-pointer` 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 `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Light text contrast	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Soft/secondary text (light mode)	Use at least `#475569` (slate-600)	Use gray-400 or lighter colors
Border visibility	Use `border-gray-200` in light mode	Use `border-white/10` (invisible)

Layout & Spacing

Rule	Do	Don't
Floating navigation bar	Add `top-4 left-4 right-4` spacing	Stick navigation bar to `top-0 left-0 right-0`
Content padding	Account for the height of fixed navigation bars	Let content be hidden behind fixed elements
Consistent max width	Use unified `max-w-6xl` or `max-w-7xl`	Mix different container widths

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

No Emojis used as icons (use SVG instead)
All icons come from consistent icon sets (Heroicons/Lucide)
Brand logos are correct (verified via Simple Icons)
Hover states don't cause layout shifts
Use theme colors directly (bg-primary) instead of var() wrappers

Interactive Experience

All clickable elements have
```
cursor-pointer
```
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states are visible during keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (minimum 4.5:1)
Glass/transparent elements are visible in light mode
Borders are visible in both modes
Tested in both modes before delivery

Layout

Floating elements have proper spacing from edges
No content is hidden behind fixed navigation bars
Responsive at 320px, 768px, 1024px, 1440px
No horizontal scrollbar on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
Respects
```
prefers-reduced-motion
```
settings

ui-ux-pro-max

NPX Install

Tags

SKILL.md Content (Chinese)

UI/UX Pro Max - Design Intelligence

Prerequisites

How to Use This Skill

Step 1: Analyze User Requirements

Step 2: Search Relevant Domains

Step 3: Tech Stack Guidelines (Default: html-tailwind)

Search Reference

Available Domains

Available Tech Stacks

Example Workflow

Tips for Better Results

General Rules for Professional UI

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Visual Quality

Interactive Experience

Light/Dark Mode

Layout

Accessibility