ui-ux-pro-max

Generate design systems with colors, typography, and accessibility guidelines for web and mobile stacks.

2|Updated Oct 12, 2025
One-click install
npx skills add https://github.com/haotool/app --skill ui-ux-pro-max-haotool
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/haotool/app/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/haotool/app --skill ui-ux-pro-max-haotool

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The UI/UX Pro Max design intelligence provides comprehensive, scalable design guidance and a centralized design-system workflow to accelerate product delivery while maintaining accessibility and consistency.

Core Features & Use Cases

  • 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).
  • Searchable database with priority-based recommendations and anti-patterns to guide design decisions.
  • End-to-end workflow: analyze requirements, generate a design system with design-system tooling, persist overrides, and perform domain-specific refinements.

Quick Start

Provide a product type, style keywords, and target stacks to generate a complete design system with recommended patterns, colors, typography, and accessibility guidelines.

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 complete UI/UX design system for multiple frameworks?

To generate a UI/UX design system, provide a product type, style keywords, and target stacks. The intelligence outputs recommended patterns, colors, typography, and accessibility guidelines across 9 technology stacks including React, Next.js, Vue, and Flutter.

Can I use this to create accessible color palettes and font pairings for mobile apps?

Yes, you can create accessible color palettes and font pairings for mobile apps. The system applies to mobile projects using SwiftUI, React Native, and Flutter, ensuring interfaces remain consistent and accessible across platforms.

What's the best way to scale component library consistency across web projects?

Scaling component library consistency requires a centralized design workflow with explicit guardrails. This system provides a searchable database of 99 UX guidelines and anti-patterns to guide design decisions and persist overrides across web projects.

Does the generated design system support Tailwind and shadcn/ui?

Yes, the generated design system supports Tailwind and shadcn/ui. It provides multi-stack guidance across 9 technology stacks, applying style recommendations and component patterns specifically for these frameworks.

Why do I need a searchable database for UX guidelines when building interfaces?

A searchable database for UX guidelines provides priority-based recommendations and anti-patterns to guide design decisions. It prevents inconsistent interfaces by applying explicit guardrails during the creation of your design system.

Are there limitations when applying custom typography overrides to a generated design system?

Custom typography overrides are supported through a workflow that persists your changes. The system starts with 57 font pairings and performs domain-specific refinements to satisfy explicit guardrails without losing accessibility consistency.