← ClaudeAtlas

vibe.ui-ux-pro-maxlisted

UI/UX design intelligence with bold aesthetic direction. Searchable database: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 stacks (React, Vue, Svelte, Angular, Astro, Next.js, Flutter, Swift, Kotlin). Use when building any UI component, choosing color schemes, selecting typography, applying design patterns, or reviewing UX compliance. Must use this skill when user builds frontend — pages, components, dashboards, or landing pages — to ensure design quality beyond generic AI output.
su-record/vibe · ★ 0 · Web & Frontend · score 78
Install: claude install-skill su-record/vibe
# UI/UX Pro Max - Design Intelligence Searchable database: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 stacks. ## Pre-check (K1) > Does this project need custom UI/UX design? If using a pre-built template or admin framework (e.g., Retool, Vercel templates), skip this skill. ## 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