ui-ux-pro-max

Generate design systems for web and mobile applications with UI/UX guidance.

21|4|Updated Mar 14, 2026

Search Tags:#accessibility #react #design system #ui/ux #web design #tailwind #mobile app

Ready to run

npx skills add https://github.com/HaipingXu/social-science-claude-scholar --skill ui-ux-pro-max-haipingxu

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive intelligence for designing and implementing professional, accessible, and performant user interfaces across various platforms and stacks, eliminating guesswork and ensuring best practices.

Core Features & Use Cases

Design System Generation: Creates detailed design systems based on product type, industry, and style keywords.
Component & Style Recommendations: Offers guidance on color palettes, typography, layouts, animations, and UI styles.
Stack-Specific Best Practices: Provides tailored advice for HTML/Tailwind, React, Vue, and more.
Use Case: When designing a new e-commerce website, use this Skill to generate a complete design system, including a professional color palette, elegant typography, and accessible UX guidelines, ensuring a cohesive and user-friendly experience.

Quick Start

Generate a design system for a "luxury hotel booking website" using the --design-system flag.

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 complete design system for a web or mobile application?▼

To generate a design system, provide your product type, industry, and style keywords. The Skill outputs comprehensive UI/UX intelligence covering over 50 styles, 21 palettes, and 50 font pairings for cohesive design planning.

Can I get UI component guidance tailored to my specific tech stack like React or Tailwind?▼

Yes, stack-specific UI component guidance is available for React, Tailwind, HTML, Vue, and other frameworks. The Skill provides tailored best practices for component building, code review, and aesthetic consistency across 9 technology stacks.

What's the best way to ensure my web design meets accessibility standards?▼

To ensure accessibility, the Skill integrates accessibility checks into its design planning and component building processes. It provides intelligent design guidance focused on performance and accessible UX guidelines across web and mobile applications.

Does this design intelligence tool integrate with shadcn/ui for component examples?▼

Yes, the tool integrates with shadcn/ui to facilitate component search and provide examples. This integration helps bridge the gap between design system recommendations and actual component implementation.

How do I choose the right color palette and typography for a new e-commerce website?▼

To choose color palettes and typography, use the design system generation feature with e-commerce context. It outputs professional color guidance from 21 palettes and elegant typography from 50 font pairings based on your specific industry and style keywords.

What are the limitations of using automated design system generation for mobile apps?▼

While automated design system generation covers 50 styles and 9 technology stacks, it focuses on providing design intelligence rather than rendering final pixel-perfect layouts. Users must manually implement the recommended color palettes, typography, and UX guidelines within their mobile app codebase.