ui-ux-pro-max

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

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