ui-ux-pro-max

Standardize UI/UX decisions to reduce accessibility failures and usability regressions.

Updated Mar 7, 2026
One-click install
npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ui-ux-pro-max-minhhoangdono
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/MinhHoangDono/antigravity-kit/tree/main/.agent/skills/ui-ux-pro-max
Command: npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ui-ux-pro-max-minhhoangdono

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI for accessibility and contrast issues?

To check UI for accessibility and contrast issues, you can apply a prioritized design standard that enforces contrast targets, visible focus states, keyboard navigation, and proper form labeling. This process outputs a prioritized checklist of changes to resolve usability regressions.

What's the best way to standardize responsive design and layout rules?

The best way to standardize responsive design is to apply mobile-first viewport rules and reduce layout shift by reserving space for async content. This prevents janky layouts by ensuring proper overflow handling with truncation and wrapping across web and mobile stacks.

Does this UI/UX design standard support frameworks like React Native and Flutter?

Yes, this UI/UX design standard supports React Native and Flutter, alongside React, Next.js, Vue, Svelte, SwiftUI, and Tailwind. It provides reference packs with curated palettes, styles, and UX guidelines to ensure cohesive decisions across these multiple stacks.

How do I handle animation constraints and reduced-motion preferences?

To handle animation constraints and reduced-motion preferences, apply specific motion guidance that aligns interactions with user accessibility settings. This ensures your interface remains usable and safe while preventing janky or disruptive transitions for sensitive users.

Why does my mobile interface have poor touch interaction quality?

Mobile interfaces have poor touch interaction quality when touch target sizes are too small or error feedback is unclear. You can resolve this by applying standardized interaction rules that ensure safe loading behavior for async actions and usable touch targets.

When do I need to standardize typography and color cohesion across my app?

You need to standardize typography and color cohesion when your app suffers from unreadable text lengths and weak contrast. Applying cohesive palettes with theme variables and readable line lengths ensures a fast, accessible, and unified interface across all components.