/ui-ux-pro-max

name: ui-ux-pro-max
description: "UI/UX design intelligence. 57 styles, 95 palettes, 56 font pairings, 24 charts, 12 stacks (React, Next.js, Vue, Nuxt, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Jetpack Compose, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
user-invocable: false

UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 57 styles, 95 color palettes, 56 font pairings, 98 UX guidelines, and 24 chart types across 12 technology stacks. Searchable database with priority-based recommendations.

When to Apply

Reference these guidelines when:

• Designing new UI components or pages
• Choosing color palettes and typography
• Reviewing code for UX issues
• Building landing pages or dashboards
• Implementing accessibility requirements

Rule Categories by Priority

| Priority | Category | Impact | Domain | |----------|----------|--------|--------| | 1 | Accessibility | CRITICAL | `ux` | | 2 | Touch & Interaction | CRITICAL | `ux` | | 3 | Performance | HIGH | `ux` | | 4 | Layout & Responsive | HIGH | `ux` | | 5 | Typography & Color | MEDIUM | `typography`, `color` | | 6 | Animation | MEDIUM | `ux` | | 7 | Style Selection | MEDIUM | `style`, `product` | | 8 | Charts & Data | LOW | `chart` |

Quick Reference

1. Accessibility (CRITICAL)

• `color-contrast` - Minimum 4.5:1 ratio for normal text
• `focus-states` - Visible focus rings on interactive elements
• `alt-text` - Descriptive alt text for meaningful images
• `aria-labels` - aria-label for icon-only buttons
• `keyboard-nav` - Tab order matches visual order
• `form-labels` - Use label with for attribute

2. Touch & Interaction (CRITICAL)

• `touch-target-size` - Minimum 44x44px touch targets
• `hover-vs-tap` - Use click/tap for primary interactions
• `loading-buttons` - Disable button during async operations
• `error-feedback` - Clear error messages near problem
• `cursor-pointer` - Add cursor-pointer to clickable elements

3. Performance (HIGH)

• `image-optimization` - Use WebP, srcset, lazy loading
• `reduced-motion` - Check prefers-reduced-motion
• `content-jumping` - Reserve space for async content

4. Layout & Responsive (HIGH)

• `viewport-meta` - width=device-width initial-scale=1
• `readable-font-size` - Minimum 16px body text on mobile
• `horizontal-scroll` - Ensure content fits viewport width
• `z-index-management` - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

• `line-height` - Use 1.5-1.75 for body text
• `line-length` - Limit to 65-75 characters per line
• `font-pairing` - Match heading/body font personalities

6. Animation (MEDIUM)

• `duration-timing` - Use 150-300ms for micro-interactions
• `transform-performance` - Use transform/opacity, not width/height
• `loading-states` - Skeleton screens or spinners

7. Style Selection (MEDIUM)

• `style-match` - Match style to product type
• `consistency` - Use same style across all pages
• `no-emoji-icons` - Use SVG icons, not emojis

8. Charts & Data (LOW)

• `chart-type` - Match chart type to data type
• `color-guidance` - Use accessible color palettes
• `data-table` - Provide table alternative for accessibility

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

• **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
• **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
• **Industry**: healthcare, fintech, gaming, education, etc.
• **Stack**: React, Vue, Next.js, or default to `html-tailwind`

Step 2: Design System 생성

먼저 `scripts/search.py`로 `data/` 디렉토리의 CSV 데이터베이스를 검색합니다 (스킬 디렉토리에서 실행):

# 도메인 검색 — 색상(color) | 타이포(typography) | 차트(chart) | 스타일(style) 등
python3 scripts/search.py "<질의>" --domain color
python3 scripts/search.py "<질의>" --domain typography
python3 scripts/search.py "<질의>" --domain chart
python3 scripts/search.py "<질의>" --domain style
# 전체 도메인: style, prompt, color, chart, landing, product, ux, typography, icons, react, web

# 스택별 가이드라인 검색 (12개 스택)
python3 scripts/search.py "<질의>" --stack html-tailwind

# 디자인 시스템 일괄 생성 (내부적으로 scripts/design_system.py 사용 —
# product/style/color/landing/typography 5개 도메인 검색 결과를 통합)
python3 scripts/search.py "<제품유형> <산업> <키워드>" --design-system -p "프로젝트명"

# 세션 간 재사용을 위한 영속화 (design-system/MASTER.md + pages/ 오버라이드 생성)
python3 scripts/search.py "<질의>" --design-system --persist -p "프로젝트명" [--page "dashboard"]

검색 결과와 위 Quick Reference를 기반으로 디자인 시스템을 구성합니다. Python 미설치 등으로 검색이 불가하면 아래 데이터로 직접 구성:

1. **스타일 선택**: 제품 유형 + 산업에 맞는 스타일 (glassmorphism, minimalism, brutalism 등) 2. **색상 팔레트**: 산업별 추천 팔레트 매칭 3. **타이포그래피**: 스타일에 맞는 폰트 페어링 선택 4. **레이아웃 패턴**: 제품 유형에 맞는 레이아웃 구조

산업별 스타일 매칭

| 산업 | 추천 스타일 | 색상 톤 | 폰트 성격 | |------|------------|---------|----------| | SaaS/Tech | Minimalism, Flat Design | Blue/Purple 계열 | Geometric Sans (Inter, Geist) | | E-commerce | Clean, Card-based | Warm neutral | Readable (Plus Jakarta Sans) | | Healthcare | Soft, Trustworthy | Green/Teal 계열 | Humanist Sans (Source Sans) | | Fintech | Professional, Data-rich | Navy/Gold 계열 | Monospace accent (JetBrains Mono) | | Beauty/Wellness | Elegant, Soft | Rose/Sage 계열 | Serif accent (Playfair Display) | | Gam