ui-ux-pro-max

Generate design systems with styles, color palettes, and font pairings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires csv, re, pathlib, math, collections, json, os, datetime, argparse, sys, io, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering guidance and best practices across various domains to create effective and user-friendly interfaces for web and mobile applications.

Core Features & Use Cases

  • Design System Generation: Creates a complete design system based on project requirements, including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers implementation best practices for various technology stacks (e.g., React, Next.js, Tailwind CSS).
  • UX Best Practices: Provides critical guidance on accessibility, performance, and interaction design.
  • Use Case: When starting a new project, use this Skill to generate a robust design system tailored to your product type and target audience, ensuring consistency and adherence to modern UX standards.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a new e-commerce website.

Frequently Asked Questions about ui-ux-pro-max

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What chart types and design styles are supported for data visualization in a design system?

Data visualization in a design system is supported through 25 chart types and over 50 design styles. These options assist in the design and implementation of diverse, performant data representations for your interfaces.

How do I generate a complete design system for a new web application?

To generate a design system, define project requirements and target audience to receive tailored patterns, styles, 97 color palettes, 57 font pairings, and typography. This ensures consistency and adherence to modern UX standards across your web application.

What is the best way to ensure UI accessibility when building a Tailwind CSS frontend?

Ensuring UI accessibility involves applying critical UX best practices for interaction design and performance. Tailwind CSS implementation guidelines provide specific stack-based instructions to refine layouts and maintain accessibility standards.

Can I use shadcn/ui with React and Next.js for my mobile interface project?

Yes, you can use shadcn/ui with React and Next.js, as specific framework guidance is provided for 9 technology stacks. The skill offers implementation best practices for both web and mobile applications using these frameworks.

How do I choose the right typography and color palettes for an e-commerce website?

Choosing typography and color palettes for an e-commerce website involves leveraging 97 available color palettes and 57 font pairings. You can generate a robust, tailored design system that fits your specific product type and audience.

What chart types and design styles are supported for data visualization in a design system?

Data visualization in a design system is supported through 25 chart types and over 50 design styles. These options assist in the design and implementation of diverse, performant data representations for your interfaces.