ui-ux-pro-max

Generate design systems with styles, palettes, typography, and UX guidelines.

7|10|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/RanNahmany/mamad-challenge-skills --skill ui-ux-pro-max-rannahmany
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/RanNahmany/mamad-challenge-skills/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/RanNahmany/mamad-challenge-skills --skill ui-ux-pro-max-rannahmany

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, and best practices to create user-friendly and visually appealing interfaces for web and mobile applications.

Core Features & Use Cases

  • Design System Generation: Automatically generates a complete design system based on project requirements.
  • Style & Color Recommendations: Offers 50+ styles and numerous color palettes tailored to specific product types.
  • UX Best Practices: Enforces critical guidelines for accessibility, interaction, and performance.
  • Stack-Specific Guidance: Provides implementation details for various technology stacks like React, Vue, and Tailwind CSS.
  • Use Case: When starting a new SaaS dashboard project, use this Skill to generate a cohesive design system, select an appropriate color palette, choose typography, and ensure adherence to accessibility standards.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a 'fintech mobile app'.

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 new web or mobile application?

You can generate a complete design system by providing your project requirements. The system automatically outputs cohesive color palettes, typography pairings, and UX guidelines tailored to your specific product type and technology stack.

What is the best way to choose a color palette and typography for a SaaS dashboard?

The best way to choose colors and typography is matching them to your product style. This skill offers 50+ styles and numerous color palettes with font pairings specifically tailored for SaaS dashboards to ensure visual appeal and accessibility.

Does this UI/UX design guidance work with React and Tailwind CSS?

Yes, this UI/UX design guidance works directly with React and Tailwind CSS. It provides stack-specific implementation details and enforces best practices across 9 technology stacks to ensure seamless integration of your design system.

How do I ensure my interface meets accessibility and performance best practices?

To ensure accessibility and performance, apply the built-in UX guidelines during style selection and color palette application. The system automatically enforces critical interaction and accessibility standards across your web and mobile interfaces.

Can I use this for a fintech mobile app design system?

Yes, you can use this for a fintech mobile app by inputting that specific context. It will generate a cohesive design system with appropriate color palettes, typography recommendations, and UX rules tailored to financial technology requirements.