/ui-ux-pro-max

name: ui-ux-pro-max
user-invocable: false
description: "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."

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 |