ui-ux-pro-max

Generate design-system blueprints with color tokens, typography, spacing, and accessibility checks.

14|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill ui-ux-pro-max-wpgaurav
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/design/ui-ux-pro-max
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill ui-ux-pro-max-wpgaurav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides comprehensive UI/UX design intelligence to standardize and accelerate design decisions across web and mobile projects, reducing iteration time and improving usability.

Core Features & Use Cases

  • 50+ design styles and 161 color palettes to choose from for consistent aesthetics.
  • 57 font pairings and 161 product types with reasoning rules to guide component design.
  • 99 UX guidelines and 25 chart types across 10 technology stacks for informed decision-making.
  • Real-world examples including websites, dashboards, admin panels, and mobile apps.

Quick Start

Begin by prompting for a design brief (product type, target platforms, and constraints) and request a ready-to-use design system outline.

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 create a design system for a React and Next.js web project?

A design system blueprint for Svelte and Vue includes color tokens, typography scales, spacing rules, and motion guidelines. It provides reusable component patterns and UX guidelines tailored to these specific technology stacks.

Can I generate a color palette and typography scale for a mobile app?

Yes, you can generate a color palette and typography scale for mobile apps using SwiftUI, React Native, or Flutter. The workflow applies 161 color palettes and 57 font pairings to produce consistent aesthetics and reusable design tokens for mobile interfaces.

What's the best way to standardize UI components for an admin panel?

The best way to standardize UI components for an admin panel is to apply a design workflow that outputs reusable patterns, spacing rules, and accessibility checks. This ensures dashboard interfaces maintain consistent visual hierarchy and usability across pages.

Does this design workflow support Tailwind and shadcn/ui?

Yes, this design workflow supports Tailwind and shadcn/ui among ten technology stacks. It generates a design-system blueprint with color tokens and component guidelines that integrate directly with these CSS frameworks.

How do I apply accessibility checks to my e-commerce interface design?

To apply accessibility checks to e-commerce interfaces, generate a design-system blueprint that includes 99 UX guidelines. These checks evaluate color contrast, typography legibility, and component interactions to ensure usable product designs.

When do I need hierarchical overrides for page-level design deviations?

You need hierarchical overrides for page-level deviations when specific pages require unique layouts outside the standard design system. This allows individual pages to adapt component patterns and spacing rules while maintaining the overall design workflow.