UI/UX Pro Max - Design Intelligence
Overview
Systematic design guide with priority-based UX rules, accessibility requirements, and pre-delivery checklists. Use alongside @designing-frontends for creative direction.
Core principle: Apply rules by priority (CRITICAL → HIGH → MEDIUM → LOW) and verify with checklist before delivery.
When to Use
- Building UI components that need accessibility compliance
- Reviewing code for UX issues (touch targets, focus states, contrast)
- Implementing responsive layouts
- Adding animations and interactions
- Preparing UI for production delivery
- Choosing typography, colors, or chart types systematically
Use @designing-frontends for: Creative direction, bold aesthetics, unique visual identity
Use @ui-ux-pro-max for: Systematic rules, accessibility, checklists, production polish
Quick Reference - Rules by Priority
CRITICAL - Always Apply
| Rule |
Requirement |
| color-contrast |
Minimum 4.5:1 ratio for normal text |
| focus-states |
Visible focus rings on all 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 |
| 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 the problem |
| cursor-pointer |
Add cursor-pointer to all clickable elements |
HIGH - Apply for Production
| Rule |
Requirement |
| image-optimization |
Use WebP, srcset, lazy loading |
| reduced-motion |
Check prefers-reduced-motion |
| content-jumping |
Reserve space for async content |
| viewport-meta |
width=device-width, initial-scale=1 |
| readable-font-size |
Minimum 16px body text on mobile |
| horizontal-scroll |
Ensure content fits viewport width |
| z-index-management |
Define z-index scale (10, 20, 30, 50) |
MEDIUM - Apply for Polish
| Rule |
Requirement |
| line-height |
Use 1.5-1.75 for body text |
| line-length |
Limit to 65-75 characters per line |
| font-pairing |
Match heading/body font personalities |
| duration-timing |
Use 150-300ms for micro-interactions |
| transform-performance |
Use transform/opacity, not width/height |
| loading-states |
Skeleton screens or spinners |
| style-consistency |
Use same style across all pages |
| no-emoji-icons |
Use SVG icons, not emojis |
LOW - Apply When Relevant
| Rule |
Requirement |
| chart-type |
Match chart type to data type |
| chart-colors |
Use accessible color palettes |
| data-table |
Provide table alternative for chart accessibility |
Common Professional UI Rules
Interaction & Cursor
/* All clickable elements */
.clickable {
cursor: pointer;
transition: colors 200ms;
}
Light/Dark Mode Contrast
| Element |
Light Mode |
Dark Mode |
| Glass background |
bg-white/80 |
bg-white/10 |
| Text primary |
#0F172A |
#F8FAFC |
| Text secondary |
#475569 |
#94A3B8 |
| Borders |
border-gray-200 |
border-white/10 |
Layout & Spacing
- Floating elements: Use
top-4 left-4 right-4 not top-0 left-0 right-0
- Content width: Use
max-w-6xl or max-w-7xl for readability
- Responsive breakpoints: Test at 375px, 768px, 1024px, 1440px
Pre-Delivery Checklist
Run through before delivering any UI code:
Visual Quality
Interaction
Light/Dark Mode
Layout
Accessibility
Design Reference Data
This skill includes comprehensive design databases in the data/ folder:
Available References
data/styles.md - 68 design styles with colors, effects, CSS implementationdata/colors.md - 96 color palettes by product type (SaaS, e-commerce, healthcare, etc.)data/typography.md - 57 font pairings with Google Fonts imports and Tailwind config
How to Use
When building UI, read the relevant data file for recommendations:
- Need a style? → Read
data/styles.md for Glassmorphism, Neubrutalism, Bento Grid, etc.
- Need colors? → Read
data/colors.md for product-specific palettes
- Need fonts? → Read
data/typography.md for curated pairings with imports
Example Workflow
- User asks for "fintech dashboard"
- Read
data/colors.md → Find "Financial Dashboard" palette
- Read
data/styles.md → Find "Data-Dense Dashboard" or "Executive Dashboard" style
- Read
data/typography.md → Find "Financial Trust" or "Dashboard Data" pairing
- Apply the recommendations with the UX rules from this skill
Tips for Better Results
- Be specific - "healthcare SaaS dashboard" > "app"
- Check accessibility first - CRITICAL rules before polish
- Test both modes - Light and dark before delivery
- Use the checklist - Run through every item before shipping
Common Mistakes
| Mistake |
Fix |
Missing cursor-pointer on buttons |
Add to all clickable elements |
| Low contrast in light mode |
Test with contrast checker (4.5:1 minimum) |
| Emojis as icons |
Replace with SVG from Lucide/Heroicons |
| Touch targets too small |
Ensure minimum 44x44px |
| No loading states |
Add skeleton or spinner for async |
| Layout shift on hover |
Use transform instead of width/margin |
| Missing focus states |
Add visible :focus-visible styles |
Source
Adapted from nextlevelbuilder/ui-ux-pro-max-skill - contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.
1---2name: ui-ux-pro-max-103description: Use when building UI that needs systematic design decisions, accessibility compliance, UX best practices, or pre-delivery quality checks - complements designing-frontends for production-grade interfaces4---5
6# UI/UX Pro Max - Design Intelligence
7
8## Overview
9
10Systematic design guide with priority-based UX rules, accessibility requirements, and pre-delivery checklists. Use alongside `@designing-frontends` for creative direction.
11
12**Core principle:** Apply rules by priority (CRITICAL → HIGH → MEDIUM → LOW) and verify with checklist before delivery.
13
14## When to Use
15
16- Building UI components that need accessibility compliance
17- Reviewing code for UX issues (touch targets, focus states, contrast)
18- Implementing responsive layouts
19- Adding animations and interactions
20- Preparing UI for production delivery
21- Choosing typography, colors, or chart types systematically
22
23**Use `@designing-frontends` for:** Creative direction, bold aesthetics, unique visual identity
24
25**Use `@ui-ux-pro-max` for:** Systematic rules, accessibility, checklists, production polish
26
27## Quick Reference - Rules by Priority
28
29### CRITICAL - Always Apply
30
31| Rule | Requirement |
32|------|-------------|
33| **color-contrast** | Minimum 4.5:1 ratio for normal text |
34| **focus-states** | Visible focus rings on all interactive elements |
35| **alt-text** | Descriptive alt text for meaningful images |
36| **aria-labels** | `aria-label` for icon-only buttons |
37| **keyboard-nav** | Tab order matches visual order |
38| **form-labels** | Use `<label>` with `for` attribute |
39| **touch-target-size** | Minimum 44x44px touch targets |
40| **hover-vs-tap** | Use click/tap for primary interactions |
41| **loading-buttons** | Disable button during async operations |
42| **error-feedback** | Clear error messages near the problem |
43| **cursor-pointer** | Add `cursor-pointer` to all clickable elements |
44
45### HIGH - Apply for Production
46
47| Rule | Requirement |
48|------|-------------|
49| **image-optimization** | Use WebP, srcset, lazy loading |
50| **reduced-motion** | Check `prefers-reduced-motion` |
51| **content-jumping** | Reserve space for async content |
52| **viewport-meta** | `width=device-width, initial-scale=1` |
53| **readable-font-size** | Minimum 16px body text on mobile |
54| **horizontal-scroll** | Ensure content fits viewport width |
55| **z-index-management** | Define z-index scale (10, 20, 30, 50) |
56
57### MEDIUM - Apply for Polish
58
59| Rule | Requirement |
60|------|-------------|
61| **line-height** | Use 1.5-1.75 for body text |
62| **line-length** | Limit to 65-75 characters per line |
63| **font-pairing** | Match heading/body font personalities |
64| **duration-timing** | Use 150-300ms for micro-interactions |
65| **transform-performance** | Use `transform`/`opacity`, not `width`/`height` |
66| **loading-states** | Skeleton screens or spinners |
67| **style-consistency** | Use same style across all pages |
68| **no-emoji-icons** | Use SVG icons, not emojis |
69
70### LOW - Apply When Relevant
71
72| Rule | Requirement |
73|------|-------------|
74| **chart-type** | Match chart type to data type |
75| **chart-colors** | Use accessible color palettes |
76| **data-table** | Provide table alternative for chart accessibility |
77
78## Common Professional UI Rules
79
80### Interaction & Cursor
81
82```css
83/* All clickable elements */
84.clickable {
85 cursor: pointer;
86 transition: colors 200ms;
87}
88```
89
90### Light/Dark Mode Contrast
91
92| Element | Light Mode | Dark Mode |
93|---------|------------|-----------|
94| Glass background | `bg-white/80` | `bg-white/10` |
95| Text primary | `#0F172A` | `#F8FAFC` |
96| Text secondary | `#475569` | `#94A3B8` |
97| Borders | `border-gray-200` | `border-white/10` |
98
99### Layout & Spacing
100
101- **Floating elements**: Use `top-4 left-4 right-4` not `top-0 left-0 right-0`
102- **Content width**: Use `max-w-6xl` or `max-w-7xl` for readability
103- **Responsive breakpoints**: Test at 375px, 768px, 1024px, 1440px
104
105## Pre-Delivery Checklist
106
107Run through before delivering any UI code:
108
109### Visual Quality
110- [ ] No emojis used as icons (use SVG instead)
111- [ ] All icons from consistent icon set (Heroicons/Lucide)
112- [ ] Brand logos verified (use Simple Icons for tech logos)
113- [ ] Hover states don't cause layout shift
114- [ ] Use theme colors directly (`bg-primary`) not `var()` wrapper
115
116### Interaction
117- [ ] All clickable elements have `cursor-pointer`
118- [ ] Hover states provide clear visual feedback
119- [ ] Transitions are smooth (150-300ms)
120- [ ] Focus states visible for keyboard navigation
121
122### Light/Dark Mode
123- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
124- [ ] Glass/transparent elements visible in light mode
125- [ ] Borders visible in both modes
126- [ ] Test both modes before delivery
127
128### Layout
129- [ ] Floating elements have proper spacing from edges
130- [ ] No content hidden behind fixed navbars
131- [ ] Responsive at 375px, 768px, 1024px, 1440px
132- [ ] No horizontal scroll on mobile
133
134### Accessibility
135- [ ] All images have alt text
136- [ ] Form inputs have labels
137- [ ] Color is not the only indicator
138- [ ] `prefers-reduced-motion` respected
139
140## Design Reference Data
141
142This skill includes comprehensive design databases in the `data/` folder:
143
144### Available References
145- **`data/styles.md`** - 68 design styles with colors, effects, CSS implementation
146- **`data/colors.md`** - 96 color palettes by product type (SaaS, e-commerce, healthcare, etc.)
147- **`data/typography.md`** - 57 font pairings with Google Fonts imports and Tailwind config
148
149### How to Use
150When building UI, read the relevant data file for recommendations:
151- Need a style? → Read `data/styles.md` for Glassmorphism, Neubrutalism, Bento Grid, etc.
152- Need colors? → Read `data/colors.md` for product-specific palettes
153- Need fonts? → Read `data/typography.md` for curated pairings with imports
154
155### Example Workflow
1561. User asks for "fintech dashboard"
1572. Read `data/colors.md` → Find "Financial Dashboard" palette
1583. Read `data/styles.md` → Find "Data-Dense Dashboard" or "Executive Dashboard" style
1594. Read `data/typography.md` → Find "Financial Trust" or "Dashboard Data" pairing
1605. Apply the recommendations with the UX rules from this skill
161
162## Tips for Better Results
163
1641. **Be specific** - "healthcare SaaS dashboard" > "app"
1652. **Check accessibility first** - CRITICAL rules before polish
1663. **Test both modes** - Light and dark before delivery
1674. **Use the checklist** - Run through every item before shipping
168
169## Common Mistakes
170
171| Mistake | Fix |
172|---------|-----|
173| Missing `cursor-pointer` on buttons | Add to all clickable elements |
174| Low contrast in light mode | Test with contrast checker (4.5:1 minimum) |
175| Emojis as icons | Replace with SVG from Lucide/Heroicons |
176| Touch targets too small | Ensure minimum 44x44px |
177| No loading states | Add skeleton or spinner for async |
178| Layout shift on hover | Use `transform` instead of `width`/`margin` |
179| Missing focus states | Add visible `:focus-visible` styles |
180
181## Source
182
183Adapted from [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) - contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.
diegosouzapw