← ClaudeAtlas

ui-ux-pro-maxlisted

UI/UX design system: 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React/Vue/Svelte/SwiftUI/Flutter/Tailwind/shadcn). Use for designing, building, reviewing UI — pages, components, color, typography, layout, accessibility.
johanolofsson72/Claude · ★ 2 · Web & Frontend · score 65
Install: claude install-skill johanolofsson72/Claude
# UI/UX Pro Max - Design Intelligence Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 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 p