UI/UX Pro Max - Design Intelligence
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
When to Apply
This Skill should be used when the task involves UI structure, visual design decisions, interaction patterns, or user experience quality control.
Must Use
This Skill must be invoked in the following situations:
- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
- Choosing color schemes, typography systems, spacing standards, or layout systems
- Reviewing UI code for user experience, accessibility, or visual consistency
- Implementing navigation structures, animations, or responsive behavior
- Making product-level design decisions (style, information hierarchy, brand expression)
- Improving perceived quality, clarity, or usability of interfaces
Recommended
This Skill is recommended in the following situations:
- UI looks "not professional enough" but the reason is unclear
- Receiving feedback on usability or experience
- Pre-launch UI quality optimization
- Aligning cross-platform design (Web / iOS / Android)
- Building design systems or reusable component libraries
Skip
This Skill is not needed in the following situations:
- Pure backend logic development
- Only involving API or database design
- Performance optimization unrelated to the interface
- Infrastructure or DevOps work
- Non-visual scripts or automation tasks
Decision criteria: If the task will change how a feature looks, feels, moves, or is interacted with, this Skill should be used.
Rule Categories by Priority
For human/AI reference: follow priority 1->10 to decide which rule category to focus on first; use --domain <Domain> to query details when needed. Scripts do not read this table.
| Priority |
Category |
Impact |
Domain |
Key Checks (Must Have) |
Anti-Patterns (Avoid) |
| 1 |
Accessibility |
CRITICAL |
ux |
Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels |
Removing focus rings, Icon-only buttons without labels |
| 2 |
Touch & Interaction |
CRITICAL |
ux |
Min size 44x44px, 8px+ spacing, Loading feedback |
Reliance on hover only, Instant state changes (0ms) |
| 3 |
Performance |
HIGH |
ux |
WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) |
Layout thrashing, Cumulative Layout Shift |
| 4 |
Style Selection |
HIGH |
style, product |
Match product type, Consistency, SVG icons (no emoji) |
Mixing flat & skeuomorphic randomly, Emoji as icons |
| 5 |
Layout & Responsive |
HIGH |
ux |
Mobile-first breakpoints, Viewport meta, No horizontal scroll |
Horizontal scroll, Fixed px container widths, Disable zoom |
| 6 |
Typography & Color |
MEDIUM |
typography, color |
Base 16px, Line-height 1.5, Semantic color tokens |
Text < 12px body, Gray-on-gray, Raw hex in components |
| 7 |
Animation |
MEDIUM |
ux |
Duration 150-300ms, Motion conveys meaning, Spatial continuity |
Decorative-only animation, Animating width/height, No reduced-motion |
| 8 |
Forms & Feedback |
MEDIUM |
ux |
Visible labels, Error near field, Helper text, Progressive disclosure |
Placeholder-only label, Errors only at top, Overwhelm upfront |
| 9 |
Navigation Patterns |
HIGH |
ux |
Predictable back, Bottom nav <=5, Deep linking |
Overloaded nav, Broken back behavior, No deep links |
| 10 |
Charts & Data |
LOW |
chart |
Legends, Tooltips, Accessible colors |
Relying on color alone to convey meaning |
Reference Files
Read these files for detailed rules, workflow instructions, and checklists:
| File |
Contents |
references/ux-guidelines.md |
Full quick reference for all 10 rule categories (accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) |
references/workflow.md |
How to use the search CLI, prerequisites, step-by-step workflow (Steps 1-4), domain/stack reference tables |
references/examples.md |
Complete example workflow (AI search homepage) |
references/checklist.md |
Output formats, query tips, common sticking points, professional UI rules (icons, interaction, light/dark mode, layout/spacing), and pre-delivery checklist |
references/animated-backgrounds.md |
Effect → free repo map for animated hero/background components (aurora, meteors, constellations, liquid) and the scroll-scrub cinematic hero technique |
Also available (from ui-styling merge)
| File |
Contents |
references/canvas-design-system.md |
Canvas-based design system |
references/shadcn-accessibility.md |
shadcn/ui accessibility patterns |
references/shadcn-components.md |
shadcn/ui component reference |
references/shadcn-theming.md |
shadcn/ui theming guide |
references/tailwind-customization.md |
Tailwind CSS customization |
references/tailwind-responsive.md |
Tailwind responsive patterns |
references/tailwind-utilities.md |
Tailwind utility classes |
1---2name: ui-ux-pro-max3description: UI/UX design intelligence with 50+ styles, 161 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations for web and mobile.4---56# UI/UX Pro Max - Design Intelligence78Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.910## When to Apply1112This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.1314### Must Use1516This Skill must be invoked in the following situations:1718- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)19- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)20- Choosing color schemes, typography systems, spacing standards, or layout systems21- Reviewing UI code for user experience, accessibility, or visual consistency22- Implementing navigation structures, animations, or responsive behavior23- Making product-level design decisions (style, information hierarchy, brand expression)24- Improving perceived quality, clarity, or usability of interfaces2526### Recommended2728This Skill is recommended in the following situations:2930- UI looks "not professional enough" but the reason is unclear31- Receiving feedback on usability or experience32- Pre-launch UI quality optimization33- Aligning cross-platform design (Web / iOS / Android)34- Building design systems or reusable component libraries3536### Skip3738This Skill is not needed in the following situations:3940- Pure backend logic development41- Only involving API or database design42- Performance optimization unrelated to the interface43- Infrastructure or DevOps work44- Non-visual scripts or automation tasks4546**Decision criteria**: If the task will change how a feature **looks, feels, moves, or is interacted with**, this Skill should be used.4748## Rule Categories by Priority4950*For human/AI reference: follow priority 1->10 to decide which rule category to focus on first; use `--domain <Domain>` to query details when needed. Scripts do not read this table.*5152| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |53|----------|----------|--------|--------|------------------------|------------------------|54| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |55| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44x44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |56| 3 | Performance | HIGH | `ux` | WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |57| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |58| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |59| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |60| 7 | Animation | MEDIUM | `ux` | Duration 150-300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |61| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |62| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav <=5, Deep linking | Overloaded nav, Broken back behavior, No deep links |63| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |6465## Reference Files6667Read these files for detailed rules, workflow instructions, and checklists:6869| File | Contents |70|------|----------|71| `references/ux-guidelines.md` | Full quick reference for all 10 rule categories (accessibility, touch, performance, style, layout, typography, animation, forms, navigation, charts) |72| `references/workflow.md` | How to use the search CLI, prerequisites, step-by-step workflow (Steps 1-4), domain/stack reference tables |73| `references/examples.md` | Complete example workflow (AI search homepage) |74| `references/checklist.md` | Output formats, query tips, common sticking points, professional UI rules (icons, interaction, light/dark mode, layout/spacing), and pre-delivery checklist |75| `references/animated-backgrounds.md` | Effect → free repo map for animated hero/background components (aurora, meteors, constellations, liquid) and the scroll-scrub cinematic hero technique |7677### Also available (from ui-styling merge)7879| File | Contents |80|------|----------|81| `references/canvas-design-system.md` | Canvas-based design system |82| `references/shadcn-accessibility.md` | shadcn/ui accessibility patterns |83| `references/shadcn-components.md` | shadcn/ui component reference |84| `references/shadcn-theming.md` | shadcn/ui theming guide |85| `references/tailwind-customization.md` | Tailwind CSS customization |86| `references/tailwind-responsive.md` | Tailwind responsive patterns |87| `references/tailwind-utilities.md` | Tailwind utility classes |
assafkip