UI/UX design intelligence with searchable database: 50 styles, 21 color palettes, 50 font pairings, 20 chart types, 8 framework stacks. Trigger phrases (use this skill when user says): - "build a landing page", "create a dashboard", "design a website" - "Reactでコンポーネント作って", "Next.jsでページ作って", "Vueでアプリ作って" - "make it look modern", "use glassmorphism", "add dark mode" - "UIを改善して", "デザインを良くして", "もっとモダンにして" - "choose a color palette", "recommend fonts", "what chart should I use" - "fix accessibility", "improve UX", "optimize for mobile" - "style with Tailwind", "add hover effects", "create responsive layout" Supported: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind. Elements: button, modal, navbar, sidebar, card, table, form, chart, hero, footer. Styles: glassmorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, flat design.
Provides UI/UX design intelligence with a searchable database of 50 styles, 21 color palettes, 50 font pairings, and 20 chart types. Claude uses this when users request building interfaces, improving designs, or choosing visual styles for React, Vue, Next.js, or HTML+Tailwind projects.
/plugin marketplace add tadokoro-ryusuke/cc-plugins/plugin install ui-ux-pro-max@cc-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
data/charts.csvdata/colors.csvdata/landing.csvdata/products.csvdata/prompts.csvdata/stacks/flutter.csvdata/stacks/html-tailwind.csvdata/stacks/nextjs.csvdata/stacks/react-native.csvdata/stacks/react.csvdata/stacks/svelte.csvdata/stacks/swiftui.csvdata/stacks/vue.csvdata/styles.csvdata/typography.csvdata/ux-guidelines.csvscripts/core.pyscripts/search.pySearchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
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
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Extract key information from user request:
html-tailwindUse search.py multiple times to gather comprehensive information. Search until you have enough context.
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "<keyword>" --domain <domain> [-n <max_results>]
Recommended search order:
If user doesn't specify a stack, default to html-tailwind.
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter
| 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) |
| 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 |
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_SKILL_DIR}/scripts/search.py" "beauty spa wellness service" --domain product
# 2. Search style (based on industry: beauty, elegant)
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "elegant minimal soft" --domain style
# 3. Search typography
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "elegant luxury" --domain typography
# 4. Search color palette
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "beauty spa wellness" --domain color
# 5. Search landing page structure
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "hero-centric social-proof" --domain landing
# 6. Search UX guidelines
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "animation" --domain ux
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 "${CLAUDE_SKILL_DIR}/scripts/search.py" "layout responsive" --stack html-tailwind
Then: Synthesize all search results and implement the design.
These are frequently overlooked issues that make UI look unprofessional:
| 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 |
| 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) |
| 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) |
| 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 |
Before delivering UI code, verify these items:
cursor-pointerprefers-reduced-motion respectedUse when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.