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.
This 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 respected