What problem does it solve?
This Skill prevents UI and UX issues—like poor accessibility, unreadable typography, weak contrast, and janky layouts—by providing a prioritized, practical design standard you can apply during design and implementation.
Core Features & Use Cases
- Accessibility first: enforces contrast targets, visible focus states, keyboard navigation correctness, proper form labeling, and descriptive alt text/ARIA for icon-only controls.
- Interaction and touch quality: ensures usable touch target sizes, clear error feedback, and safe loading behavior for async actions.
- Performance and responsive layout: reduces layout shift via reserved space, applies mobile-first viewport rules, and handles overflow with truncation/wrapping.
- Typography, color, and motion guidance: recommends readable line lengths, font pairing strategy, cohesive palettes with theme variables, and animation rules aligned with reduced-motion preferences.
- Reference packs across multiple stacks: supports design decisions for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui, including 50 styles, 97 palettes, and curated chart/font/UX guideline data.
Quick Start
Use ui-ux-pro-max to review your app’s UI and output a prioritized checklist of accessibility, interaction, layout, typography, color, and animation changes to meet the provided rules.