ui-ux-pro-max

Analyze web and mobile interfaces for accessibility, visual hierarchy, and interaction patterns.

Updated May 7, 2026
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill ui-ux-pro-max-tumeloramaphosa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/ui-ux-pro-max/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill ui-ux-pro-max-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid amateur-feeling interfaces by guiding high-quality UI/UX decisions, enforcing accessibility, and improving interaction, layout, and visual consistency.

Core Features & Use Cases

  • Accessibility-first UI QA: Ensures contrast, focus states, keyboard navigation, labels, aria usage, and reduced-motion compliance.
  • Cross-platform design system guidance: Recommends layout, typography, color systems, interaction states, and responsive behavior for web and mobile stacks.
  • Component and UI pattern recommendations: Supports designing and refactoring buttons, modals, nav patterns, forms, charts, and product-specific UI structures.
  • Chart & data viz UX guardrails: Recommends accessible chart types, legend/tooltips, and responsive data presentation.

Quick Start

Use ui-ux-pro-max to review your current dashboard UI for accessibility, responsive layout issues, and interaction/state problems, then request concrete improvements in the code you provide.

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 make my dashboard UI accessible and compliant with WCAG standards?

Making dashboard UI accessible requires enforcing WCAG-style contrast ratios, focus states, keyboard navigation, labels, aria usage, and reduced-motion compliance. Reviewing visual hierarchy and interaction patterns identifies accessibility gaps to generate concrete component improvements.

What is the best way to design responsive layouts for web and mobile interfaces?

Designing responsive layouts requires applying responsive behavior constraints, consistent typography, and color systems across web and mobile stacks. Evaluating visual hierarchy and interaction states ensures navigation, forms, and components adapt correctly across screen sizes.

How do I choose accessible chart types and data visualization patterns?

Choosing accessible chart types involves applying data viz UX guardrails to recommend appropriate legends, tooltips, and responsive data presentation. Evaluating chart components ensures visual hierarchy and interaction patterns support accessible data visualization across modern front-end stacks.

Can I use this to review and refactor existing component structures like modals and forms?

Yes, you can review and refactor existing component structures like modals, forms, buttons, and navigation patterns. Analyzing component structure, interaction states, and accessibility compliance generates actionable implementation recommendations for refactoring pages and components.

Does this UI UX guidance work across different front-end stacks?

Yes, this UI UX guidance applies to building and refactoring pages across modern front-end stacks. It enforces touch and interaction standards, responsive layout constraints, and consistent style selection regardless of your specific web or mobile framework.

When should I not use automated design system guidance for component review?

You should not rely solely on automated design system guidance when resolving highly custom interaction patterns or brand-specific visual effects requiring manual oversight. Standardized recommendations for layout, typography, and color systems work best for common component structures and accessibility compliance.