ui-ux-pro-max

Generates prioritized UI/UX and accessibility recommendations for web and mobile interfaces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It helps you avoid inconsistent, inaccessible, or poorly structured UI by providing a prioritized design and UX guideline workflow for web and mobile.

Core Features & Use Cases

  • Design-system recommendations from intent: Turn a brief (product type, style keywords, industry, and optional project name) into a cohesive pattern, style, colors, and typography.
  • Priority-based UX guardrails: Focus first on critical accessibility and touch interaction guidance before moving to performance, responsive layout, and animation.
  • Implementation-aware guidance via stacks: Use stack-specific searches (defaulting to html-tailwind when unspecified) for practical code-aligned recommendations.
  • Example: When building a SaaS dashboard, use it to select an accessible layout pattern, an appropriate design style, a color palette that supports readable contrast, and typography pairings aligned to a professional tone.

Quick Start

Ask: “Design a SaaS dashboard UI for fintech with an elegant professional style, including accessibility and responsive layout guidance; default to html-tailwind.”

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 generate a UI design system for a web or mobile interface?

Generate a UI design system by providing a brief with product type, style keywords, and industry. This produces cohesive patterns, accessible color palettes, and typography pairings tailored to your project intent. It applies priority-based UX guardrails to ensure structured interfaces.

What is the best way to ensure color palette accessibility and touch interaction in responsive layouts?

The best way to ensure accessibility is using priority-based UX guardrails that focus first on critical contrast and touch interaction guidance. It evaluates color palettes for readable contrast and responsive layouts before addressing performance and animation.

Can I use this to design a SaaS dashboard with html-tailwind constraints?

Yes, you can design a SaaS dashboard using stack-specific searches, defaulting to html-tailwind when unspecified. It provides practical code-aligned recommendations for accessible layout patterns, professional typography pairings, and readable color palettes.

How do I select typography pairings and UX guidelines for a fintech landing page?

Select typography pairings by defining an elegant professional style and fintech industry in your brief. It generates UX-ready recommendations prioritizing accessibility, responsive layout, and performance to build cohesive landing page structures.

Does this UX workflow support reviewing existing component structures for accessibility issues?

Yes, the UX workflow supports reviewing existing component structures for accessibility issues. It applies prioritized design intelligence to evaluate touch interaction, readable contrast, and performance constraints across web and mobile interfaces.