What problem does it solve?
This Skill helps teams design clearer, more accessible, and better-performing UI/UX across web and mobile by providing structured guidelines, components, and visual system recommendations so you can avoid inconsistent patterns and UX regressions.
Core Features & Use Cases
- Design system intelligence: Uses a curated knowledge base covering 50+ styles, 161 color palettes, 57 font pairings, and 161 product types with matching reasoning rules.
- Practical UX rule coverage: Applies 99 UX guidelines with prioritized checks, including accessibility, touch interactions, responsive layout, typography/color semantics, animation, forms/feedback, navigation, and chart usability.
- Cross-stack applicability: Tailors recommendations for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS, including mobile-first behavior and component-level patterns.
- Decision and review support: Helps plan, build, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code quality through category-based checklists.
- How to apply (examples): Use it to design a dashboard layout with consistent spacing and navigation; review a login form for accessibility and error handling; or select a style/color system and chart presentation that works for both light/dark modes.
Quick Start
Use the ui-ux-pro-max skill to review my current React dashboard UI for accessibility (focus states, labels, contrast), touch targets, responsive layout, and chart readability.