2.9 KiB
2.9 KiB
name, description
| name | description |
|---|---|
| ck-ui-ux-pro-max | UI/UX design intelligence with 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks. Use when building, designing, reviewing, or improving websites, dashboards, landing pages, or mobile app UI. |
UI/UX Pro Max
Comprehensive design guide: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 stacks.
When to Use
- Designing new UI components, pages, or full products
- Choosing color palettes and typography pairings
- Reviewing code for UX issues or accessibility
- Building landing pages, dashboards, e-commerce, SaaS, portfolios
- Implementing glassmorphism, brutalism, neumorphism, bento grid, dark mode
Don't Use When
- Pure backend work with no UI concerns
- Already have a finalized design system — implement directly
Workflow
Step 1: Analyze Requirements
Extract: product type (SaaS/e-commerce/portfolio), style keywords, industry, tech stack (default: html-tailwind)
Step 2: Generate Design System (Always First)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
Returns: pattern, style, colors, typography, effects, anti-patterns.
Step 3: Supplement Searches (as needed)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>
| Need | Domain |
|---|---|
| More style options | style |
| Chart recommendations | chart |
| UX best practices | ux |
| Alternative fonts | typography |
| Landing structure | landing |
Step 4: Stack Guidelines
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
Priority Rules
| Priority | Rule | Impact |
|---|---|---|
| 1 | Color contrast ≥4.5:1 | CRITICAL |
| 2 | Touch targets ≥44×44px | CRITICAL |
| 3 | Image optimization (WebP, lazy load) | HIGH |
| 4 | Viewport meta tag | HIGH |
| 5 | Line height 1.5–1.75 | MEDIUM |
| 6 | Transitions 150–300ms | MEDIUM |
| 7 | No emoji as UI icons (use SVG) | MEDIUM |
Pre-Delivery Checklist
- No emojis as icons (use Heroicons/Lucide SVG)
- All clickable elements have
cursor-pointer - Light mode text contrast ≥4.5:1
- Glass elements visible in light mode (
bg-white/80+) - Floating navbar has edge spacing (
top-4 left-4 right-4) - No content hidden behind fixed navbars
- Responsive at 375px, 768px, 1024px, 1440px
prefers-reduced-motionrespected- All images have alt text
Output Formats
# ASCII box (default, terminal)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system
# Markdown (for docs)
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -f markdown