ui-ux-pro-max

Review web and mobile UI/UX against accessibility, interaction, and layout guidelines.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill ui-ux-pro-max-tommy771004
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tommy771004/StockAnalyzeAIConnectV2/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill ui-ux-pro-max-tommy771004

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

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 review my React dashboard UI for accessibility and responsive layout issues?

You can review your React dashboard UI using 99 prioritized UX guidelines covering accessibility, touch targets, and responsive layout. This audit identifies inconsistent patterns and returns actionable fixes to improve user experience.

What is the best way to select a color palette and typography system for both light and dark modes?

Selecting a color palette and typography system for light and dark modes involves matching your product against 161 color palettes and 57 font pairings. This applies semantic color rules to ensure visual consistency across tech stacks.

Does this UX review approach work with Vue, Svelte, and Tailwind?

Yes, this UX review approach works with Vue, Svelte, and Tailwind. It tailors component-level recommendations and mobile-first behavior patterns specifically for these frameworks alongside React, Next.js, SwiftUI, and Flutter.

How do I audit existing forms and navigation for UX regressions?

To audit existing forms and navigation for UX regressions, apply category-based checklists covering forms, feedback, and navigation. This identifies inaccessible interactions and returns prioritized fixes aligned to your tech stack.

Can I use this to improve data visualization and chart usability?

Yes, you can use this to improve data visualization and chart usability. It enforces prioritized rule categories specifically for chart usability, ensuring your data presentations remain readable and accessible across interfaces.