ui-ux-pro-max

Generate design systems with style, palette, font, and chart recommendations.

1|Updated Mar 9, 2026

Search Tags:#react #design system #ui/ux #tailwind css #web design #frontend development #mobile app design

Ready to run

npx skills add https://github.com/docaohieu2808/claude-skills --skill ui-ux-pro-max-docaohieu2808

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/docaohieu2808/claude-skills/tree/main/ui-ux-pro-max
Command: npx skills add https://github.com/docaohieu2808/claude-skills --skill ui-ux-pro-max-docaohieu2808

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design guidance, helping users create visually appealing, user-friendly, and accessible interfaces across various technology stacks.

Core Features & Use Cases

Design System Generation: Creates tailored design systems based on project requirements.
Style & Palette Recommendations: Offers 50+ styles and 21 palettes.
Font Pairing & Chart Suggestions: Provides 50 font pairings and 20 chart types.
Stack-Specific Guidelines: Covers 9 technology stacks including React, Next.js, Vue, and Tailwind CSS.
Use Case: A developer needs to design a new dashboard for a SaaS product. They can use this Skill to get recommendations on the best style, color palette, typography, and layout patterns, along with specific implementation advice for their chosen stack (e.g., React with Tailwind CSS).

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a 'SaaS dashboard' project.

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 web application?▼

You can create a tailored design system by inputting your project requirements, which triggers recommendations for 50+ styles, 21 color palettes, and 50 font pairings suited to your React or Tailwind CSS stack.

What's the best way to choose a color palette and typography for a SaaS dashboard?▼

The best way to choose palettes and typography for a SaaS dashboard is to use design intelligence tools that provide tailored style recommendations, ensuring visually appealing and accessible interfaces based on project needs.

Can I get UI/UX design guidelines for mobile app development using Tailwind CSS?▼

Yes, this tool supports mobile app design by offering stack-specific guidelines and UI element recommendations for technologies including Tailwind CSS, React, and Next.js.

How does design intelligence handle chart and data visualization recommendations?▼

Design intelligence handles data visualization by suggesting 20 specific chart types and layout patterns based on your project requirements, ensuring optimal data representation for your frontend development stack.

Do I need a specific frontend framework to implement these UI/UX recommendations?▼

No specific frontend framework is required, as the tool supports 9 technology stacks including Vue, Next.js, and React, providing implementation advice adaptable to your chosen web design environment.

When should I not use automated style recommendations for web design?▼

You should not use automated style recommendations when your project requires highly bespoke, brand-specific visual identities that deviate significantly from standard 50+ styles and 21 palettes offered by the system.