ui-ux-pro-max

Generate accessible design systems with color palettes, typography, and stack-specific guidelines.

103|36|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/yaomindong1996/forge-admin --skill ui-ux-pro-max-yaomindong1996
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/yaomindong1996/forge-admin/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/yaomindong1996/forge-admin --skill ui-ux-pro-max-yaomindong1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the common pain points of inconsistent user interface design, poor accessibility compliance, and time-consuming design system creation for web and mobile applications, helping teams deliver polished, user-friendly products faster.

Core Features & Use Cases

  • Comprehensive Design Intelligence: Access 67 UI styles, 96 color palettes, 57 font pairings, 25 chart types, and 99 UX guidelines tailored to different product types and industries.
  • Multi-Stack Implementation Support: Get stack-specific best practices for 13 technology stacks including React, Vue, Next.js, Svelte, Flutter, and Tailwind CSS.
  • Automated Design System Generation: Create complete, hierarchical design systems with global rules and page-specific overrides, including color variables, typography settings, component specs, and pre-delivery checklists.
  • Use Case: A frontend developer building a new SaaS admin panel can use this Skill to instantly get a matching design system, accessible color palette, and Vue 3 + Tailwind implementation guidelines, cutting design research time from hours to minutes.

Quick Start

Use the ui-ux-pro-max skill to generate a complete accessible design system for my new e-commerce checkout page, including color palettes, button styles, and form input guidelines for React and Tailwind CSS.

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 build a consistent and accessible UI design system for a React and Tailwind CSS application?

To build an accessible UI design system for React and Tailwind CSS, you can generate hierarchical global rules, color palettes, typography pairings, and component specs. This provides stack-specific implementation guidelines to ensure consistent user interface design across your web application.

What is the best way to find accessible color palettes and font pairings for a SaaS admin dashboard?

Finding accessible color palettes and font pairings for a SaaS admin dashboard involves searching centralized design intelligence that offers 96 color palettes and 57 font pairings. This ensures your dashboard meets accessibility compliance and functional style requirements.

Does this UI/UX design intelligence support Vue and Next.js technology stacks?

Yes, this UI/UX design intelligence supports Vue and Next.js technology stacks. It provides best practices and implementation guidelines for 13 different stacks, including React, Svelte, Flutter, and Tailwind CSS, ensuring multi-stack design consistency.

Can I get UX guidelines and chart type recommendations for an e-commerce checkout page?

You can get UX guidelines and chart type recommendations for an e-commerce checkout page by retrieving design intelligence tailored to different product types. It includes 25 chart types and 99 UX guidelines to optimize the user experience and accessibility of your e-commerce site.

How do I generate a complete design system with component specs and pre-delivery checklists?

To generate a complete design system with component specs and pre-delivery checklists, you apply automated design system generation. This creates hierarchical rules with global settings and page-specific overrides, including color variables and typography configurations.