메뉴
UI/UX design intelligence. 57 styles, 96 palettes, 50 font pairings, 25 charts, 11 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Search and apply design best practices.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Fork terminal sessions to spawn parallel AI agents or CLI commands in new terminal windows. Supports git worktrees for isolated parallel development.
Local code review using CodeRabbit CLI. Use when user wants to review changes before committing or pushing.
Use when the user asks for a "second opinion", "third opinion", "what does GLM/Gemini think", or wants another model to weigh in on code, design, or review. Routes to the consult plugin's CLI which calls z.ai (GLM-5.2) or Gemini directly via API.
Automatically assist with Bambu Lab X1Plus 3D printer operations via the bambu CLI. Covers status checks, file transfer, print control, calibration, filament management, camera analysis, diagnostics, and SSH commands.
Auto-triggered skill for managing UniFi network devices, clients, sites, and diagnostics via the unifi CLI.
Triggers when user mentions Cloudflare, DNS records, tunnels, R2, Workers, zero-trust, etc. Provides knowledge of the cf CLI.
| name | ui-ux-pro-max |
| description | UI/UX design intelligence. 57 styles, 96 palettes, 50 font pairings, 25 charts, 11 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Search and apply design best practices. |
| triggers | ["design a","build a website","build a landing page","build a dashboard","create a landing page","create a website","design website","design landing","design dashboard","design ui","design ux","build ui","implement ui","create ui","make a website","make a landing page","glassmorphism","neumorphism","minimalist design","brutalist design","dark mode","bento grid","color palette","font pairing","chart type","what chart","ux best practices","accessibility guidelines","responsive design","e-commerce design","saas design","dashboard design","portfolio design","mobile app design","admin panel","tailwind best practices","react best practices","next.js best practices","vue best practices","swiftui best practices","flutter best practices"] |
Searchable 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.13
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_PLUGIN_ROOT}/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_PLUGIN_ROOT}/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, nuxtjs, nuxt-ui, vue, svelte, swiftui, react-native, flutter, shadcn
| 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) |
icons | Icon recommendations | navigation, action, status, commerce |
| 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 |
nuxtjs | Nuxt 3, auto-imports, server routes |
nuxt-ui | Nuxt UI components, theming, forms |
svelte | Runes, stores, SvelteKit |
swiftui | Views, State, Navigation, Animation |
react-native | Components, Navigation, Lists |
flutter | Widgets, State, Layout, Theming |
shadcn | shadcn/ui components, theming, forms, patterns |
User request: "Build a landing page for a SaaS product"
AI should:
# 1. Search product type
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "saas software" --domain product
# 2. Search style
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "modern clean professional" --domain style
# 3. Search typography
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "professional modern" --domain typography
# 4. Search color palette
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "saas software" --domain color
# 5. Search landing page structure
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "hero features cta" --domain landing
# 6. Search UX guidelines
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "animation" --domain ux
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/search.py "accessibility" --domain ux
# 7. Search stack guidelines (default: html-tailwind)
python3 ${CLAUDE_PLUGIN_ROOT}/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 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