ui-ux-pro-max

Generate design systems with styles, palettes, typography, and stack-specific guidance.

Updated May 7, 2025
One-click install
npx skills add https://github.com/IsaacAVazquez/Website --skill ui-ux-pro-max-isaacavazquez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/IsaacAVazquez/Website/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/IsaacAVazquez/Website --skill ui-ux-pro-max-isaacavazquez

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering guidance on styles, color palettes, typography, charts, and best practices across various technology stacks to ensure high-quality, user-friendly interfaces.

Core Features & Use Cases

  • Design System Generation: Creates detailed design systems based on project requirements, including patterns, styles, colors, and typography.
  • Stack-Specific Guidelines: Offers best practices for implementing designs in specific tech stacks like React, Next.js, Vue, and more.
  • UX Best Practices: Provides critical guidance on accessibility, performance, and interaction design.
  • Use Case: When starting a new web application, use this Skill to generate a complete design system, ensuring consistency, accessibility, and adherence to modern UX principles from the outset.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a new 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 comprehensive design system for a SaaS dashboard?

To generate a design system for a SaaS dashboard, define your project requirements and use the Skill to produce patterns, styles, color palettes, and typography pairings. It outputs comprehensive UI/UX guidelines ensuring consistency and accessibility across your application.

Can I use this to implement UI components with React and Tailwind?

Yes, you can implement UI components with React and Tailwind using this Skill. It provides stack-specific guidelines for 9 technology stacks including React, Next.js, and Tailwind, offering best practices for building buttons, modals, and forms.

What's the best way to ensure accessibility when creating a color palette and font pairing?

The best way to ensure accessibility in color palettes and font pairings is to follow UX best practices provided by the Skill. It evaluates 21 color palettes and 50 font pairings against accessibility standards to guarantee user-friendly interfaces.

Does the design intelligence support modern UI styles like glassmorphism and bento grid?

Yes, the design intelligence supports modern UI styles like glassmorphism, bento grid, claymorphism, neumorphism, and brutalism. It provides specific design guidelines and component examples for implementing these styles across your web and mobile applications.

How do I review and optimize existing UI/UX code for my web application?

To review and optimize existing UI/UX code, use the Skill's action commands like review, fix, improve, and refactor. It analyzes your current implementation against design best practices and outputs optimized code for better performance and interaction design.

What chart and component guidelines are available for admin panels?

For admin panels, the Skill provides guidelines on 20 chart types and core components like tables, sidebars, and navbars. It outputs specific implementation patterns to ensure data visualization and dashboard layouts adhere to modern UX principles.