Initial commit: antigravity-claudekit

skills/ck-ui-ux-pro-max/SKILL.md

@@ -0,0 +1,91 @@
+---
+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
+```