ui-ux-pro-max

Generates a Master design-system document and page-specific overrides from UI/UX guidelines.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/hamza-sahin/pawbalance --skill ui-ux-pro-max-hamza-sahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/hamza-sahin/pawbalance/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/hamza-sahin/pawbalance --skill ui-ux-pro-max-hamza-sahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill aggregates UI/UX guidelines into a comprehensive, reusable design-system workflow to accelerate design decisions and ensure consistency across projects.

Core Features & Use Cases

  • 67 styles, 96 color palettes, 57 font pairings, 25 chart types, and 13 technology stacks to accelerate design planning and systematization.
  • Priority-based UX guidelines, accessibility checks, and cross-framework compatibility for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.
  • Use cases include designing systems, auditing components for consistency, and generating implementation-ready design specs.

Quick Start

Use this Skill to generate a design system by invoking the design-system workflow with a 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 generate a design system for a React and Tailwind project?▼

To generate a design system for React and Tailwind, invoke the design-system workflow with your project name to produce a Master design-system document and optional page-specific overrides. It applies cross-framework compatibility checks for your stack.

Can I use this to audit existing UI components for accessibility and consistency?▼

You can audit UI components for accessibility and consistency by applying priority-based UX guidelines across your interface. The workflow evaluates components against established style, color, and typography patterns to ensure systematization.

What technology stacks does the design-system workflow support?▼

The design-system workflow supports React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. It applies cross-framework compatibility checks to ensure your UI components meet priority-based UX guidelines.

How do I find the right font pairing and color palette for my web app?▼

To find the right font pairing and color palette, search across 96 color palettes and 57 font pairings using the built-in BM25 search across style, color, and typography domains. This accelerates design planning by matching your project requirements.

What's the best way to plan a design system for both web and mobile?▼

The best way to plan a design system for web and mobile is aggregating UI/UX guidelines into a reusable workflow. This produces a Master design-system document implementing cross-framework compatibility for web technologies and mobile stacks like SwiftUI and Flutter.

Do I need any specific dependencies to start using the UI/UX design workflow?▼

You do not need any specific dependencies to start using the UI/UX design workflow. It operates independently to aggregate guidelines and generate implementation-ready design specs for your chosen technology stack.