92 lines
2.9 KiB
Markdown
92 lines
2.9 KiB
Markdown
---
|
||
name: ck-ui-ux-pro-max
|
||
description: 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)
|
||
|
||
```bash
|
||
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)
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
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-motion` respected
|
||
- [ ] All images have alt text
|
||
|
||
## Output Formats
|
||
|
||
```bash
|
||
# 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
|
||
```
|