ui-ux-pro-max

Original：🇨🇳 Chinese
Translated
2 scriptsChecked / no sensitive code detected

UI/UX Design Intelligence, a must-use resource when conducting page design work

1installs
Sourceprorise-cool/prorise-claude-skills
Added on

NPX Install

npx skill4agent add prorise-cool/prorise-claude-skills ui-ux-pro-max

Tags

Translated version includes tags in frontmatter
ui-ux-designdesign-workflowtech-stack-guidanceaccessibility-best-practicestailwind-css

SKILL.md Content (Chinese)

View Translation Comparison →

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:
  1. Product - Get style recommendations for the product type
  2. Style - Get detailed style guides (colors, effects, frameworks)
  3. Typography - Get font pairings with Google Fonts import code
  4. Color - Get color schemes (primary, secondary, CTA, background, text, border)
  5. Landing - Get page structure (if it's a landing page)
  6. Chart - Get chart recommendations (if it's a dashboard/analytics type)
  7. UX - Get best practices and anti-patterns (i.e., designs to avoid)
  8. 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
)		PurposeKeyword Examples
product
Product type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, service
style
UI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalism
typography
Font pairings, Google Fontselegant, playful, professional, modern
color
Color schemes by product typesaas, ecommerce, healthcare, beauty, fintech, service
landing
Page structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proof
chart
Chart types, library recommendationstrend, comparison, timeline, funnel, pie
ux
Best practices, anti-patternsanimation, 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

  1. Be specific with keywords - Use "healthcare SaaS dashboard" instead of "app".
  2. Search multiple times - Different keywords reveal different insights.
  3. Combine domains - Style + Typography + Color = Complete design system.
  4. Always check UX - Search for "animation", "z-index", "accessibility" to avoid common issues.
  5. Use the Stack flag - Get best practices for specific implementations.
  6. 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

RuleDoDon't
Don't use Emoji as iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use Emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover statesUse color/opacity transitions on hoverUse scale transforms that cause layout shifts
Correct brand logosFind official SVGs from Simple IconsGuess or use incorrect logo paths
Consistent icon sizesUse fixed viewBox (24x24) and w-6 h-6Randomly mix icon sizes

Interaction & Cursor

RuleDoDon't
Cursor pointerAdd 
cursor-pointer
to all clickable/hoverable cards		Keep default cursor on interactive elements
Hover feedbackProvide visual feedback (color, shadow, border)Have no indication that an element is interactive
Smooth transitionsUse 
transition-colors duration-200
Switch states instantly or too slowly (>500ms)

Light/Dark Mode Contrast

RuleDoDon't
Glass cards in light modeUse 
bg-white/80
or higher opacity		Use 
bg-white/10
(too transparent)
Light text contrastUse 
#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 visibilityUse 
border-gray-200
in light mode		Use 
border-white/10
(invisible)

Layout & Spacing

RuleDoDon't
Floating navigation barAdd 
top-4 left-4 right-4
spacing		Stick navigation bar to 
top-0 left-0 right-0
Content paddingAccount for the height of fixed navigation barsLet content be hidden behind fixed elements
Consistent max widthUse 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