ui-ux-pro-max

Guide UI and UX decisions with prioritized accessibility, interaction, and style guidance.

Updated May 26, 2025
One-click install
npx skills add https://github.com/JhonMM27/Sistema_Pos_Paf_Webs --skill ui-ux-pro-max-jhonmm27
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/JhonMM27/Sistema_Pos_Paf_Webs/tree/main/.agent/skills/ui-ux-pro-max
Command: npx skills add https://github.com/JhonMM27/Sistema_Pos_Paf_Webs --skill ui-ux-pro-max-jhonmm27

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It solves inconsistent, inaccessible, or low-conversion UI/UX decisions by providing prioritized, actionable guidance across design, accessibility, interaction, typography, and UI composition.

Core Features & Use Cases

  • Accessibility-first checklist for color contrast, focus states, ARIA labeling, keyboard navigation, and readable form patterns.
  • Interaction and performance guidelines for touch target sizing, hover vs tap behavior, loading/error feedback, reduced motion, and layout stability.
  • Style and system building using a searchable library of styles, palettes, typography pairings, chart types, and layout patterns across multiple stacks (web and mobile).

Quick Start

Use the ui-ux-pro-max skill to generate a prioritized UI/UX plan for a responsive SaaS dashboard with accessible color contrast and touch-friendly interactions, using the HTML/Tailwind implementation approach by running: python3 .claude/skills/ui-ux-pro-max/scripts/search.py "saas dashboard accessible responsive touch" --design-system -p "Project Name"

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 design an accessible UI for a SaaS dashboard?

To design an accessible UI for a SaaS dashboard, apply a prioritized guidance model covering color contrast, touch target sizing, focus states, and responsive layout stability to prevent interaction failures and weak visual hierarchy.

What is the best way to ensure responsive layout and touch interaction consistency across web and mobile components?

Ensuring responsive layout and touch interaction consistency requires applying specific performance guidelines for hover vs tap behavior, touch target sizing, and loading feedback across multiple technology stacks.

Can I generate a complete design system with typography and color palettes for my interface?

Yes, you can generate a complete design system by using a searchable library of styles, typography pairings, color palettes, and chart types tailored for landing pages, admin panels, and mobile components.

Does this UI design approach work for reviewing existing dashboards and admin panels?

Yes, this UI design approach works for reviewing existing dashboards and admin panels by checking interfaces against an accessibility-first checklist for ARIA labeling, keyboard navigation, and readable form patterns.

Why does my UI design fail accessibility checks for color contrast and focus states?

UI design fails accessibility checks when prioritized guidance for color contrast ratios, ARIA labeling, keyboard navigation, and visible focus states is not applied during the interface composition process.

What chart design approaches should I use for visual hierarchy in data-heavy dashboards?

Chart design approaches for visual hierarchy in data-heavy dashboards should utilize a searchable library of chart types and layout patterns that satisfy performance and accessibility requirements while maintaining readable form patterns.