ui-ux-pro-max

Generate complete design systems with accessibility guidance for web and mobile stacks.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/AnXueHua/auto-research --skill ui-ux-pro-max-anxuehua
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/AnXueHua/auto-research/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/AnXueHua/auto-research --skill ui-ux-pro-max-anxuehua

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill streamlines and accelerates UI/UX decision-making by generating complete, prioritized design systems and actionable implementation guidance so teams avoid inconsistent visuals, accessibility regressions, and slow design-to-code handoffs.

Core Features & Use Cases

  • Design System Generation: Produces pattern libraries, style guidelines, color palettes, typography pairings, and anti-patterns tailored to product type and industry.
  • Implementation Guidance: Provides stack-specific best practices and accessibility checks for html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn.
  • Persistence & Retrieval: Supports persisting a MASTER design system with page-level overrides for hierarchical retrieval across sessions.
  • Use Case: Create an accessible SaaS dashboard design system with responsive layouts, accessible color contrasts, and Tailwind-ready component recommendations to hand to engineering.

Quick Start

Generate a complete design system for a SaaS dashboard with a modern minimal style, accessible color palette, typography pairings, and Tailwind implementation.

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 SaaS dashboard?

To generate a SaaS dashboard design system, provide your product type and desired style to get prioritized pattern libraries, accessible color palettes, typography pairings, and anti-patterns tailored to your industry. This delivers actionable style guidelines and component recommendations ready for engineering handoff.

Can I use this to create accessible color contrasts and typography pairings for React?

Yes, you can create accessible color contrasts and typography pairings for React. The guidance provides stack-specific best practices and accessibility checks tailored for React, Next.js, and shadcn, ensuring your UI components meet visual and compliance standards.

Does it support generating UI component patterns for mobile apps using SwiftUI and Flutter?

Yes, it supports generating UI component patterns for mobile apps using SwiftUI and Flutter. The system covers responsive layout rules and implementation guidance across web and mobile stacks, ensuring consistent design patterns for your mobile applications.

What's the best way to maintain consistent UI rules across multiple pages?

The best way to maintain consistent UI rules is by persisting a MASTER design system with page-level overrides. This supports hierarchical retrieval across sessions, allowing you to enforce global styles while adapting specific page layouts without breaking overall consistency.

How do I avoid accessibility regressions when building Tailwind components?

To avoid accessibility regressions when building Tailwind components, use the generated design system's accessible color contrast checks and anti-pattern guidelines. It provides stack-specific best practices for html-tailwind to ensure your component patterns meet accessibility requirements.

Do I need to manually specify design tokens to get a complete style guideline?

No, you do not need to manually specify design tokens to get a complete style guideline. By providing the product type and a brief style description, the system automatically generates the necessary color palettes, typography pairings, and component patterns.