ui-ux-pro-max

Generate design-system rules and UI/UX pattern recommendations for web and mobile stacks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams spend extensive time researching patterns, color combinations, and typography rules to create cohesive interfaces. This Skill automates guidance and generates reusable design-system rules to accelerate discovery and execution.

Core Features & Use Cases

  • Aggregates multi-domain UI/UX guidance (style, color, typography, landing patterns) to produce cohesive design-system recommendations.
  • Generates master and page-specific design rules and provides actionable patterns for components, layouts, and interactions.
  • Aligns color palettes, typography moods, and accessibility considerations across popular stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS).

Quick Start

Ask the AI to generate a complete design-system recommendation for a given project name.

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 React or Next.js project?

To generate a design system, aggregate UI/UX guidance to produce cohesive style rules, color palettes, and typography moods. The system outputs reusable design rules and actionable component patterns directly consumable by React, Next.js, and Tailwind projects.

What is the best way to audit existing UI components for accessibility and typography?

Auditing UI components involves evaluating existing layouts against accessibility considerations and typography rules. This process generates actionable patterns and structured style recommendations to align your current interface with standard design requirements.

Does this UI/UX design guidance work with mobile frameworks like SwiftUI and Flutter?

Yes, the UI/UX design guidance works with mobile frameworks like SwiftUI and Flutter, alongside React Native. It aligns color palettes, typography moods, and functional design patterns across both web and mobile application stacks.

How do I map color palettes and typography moods to specific landing page patterns?

Mapping color palettes and typography moods involves applying structured style recommendations to your interface. This generates cohesive, reusable design-system rules that align specific landing page patterns with your desired visual mood and functional requirements.

Can I use this to generate design rules for shadcn/ui and Tailwind CSS?

Yes, you can generate master and page-specific design rules for shadcn/ui and Tailwind CSS. It provides actionable patterns for components and layouts, ensuring your design system outputs are directly consumable by these specific stacks.

What formats do the UI/UX design system recommendations output?

The UI/UX design system recommendations output as reusable Design System files and ASCII or Markdown reports. These formats document the generated style rules, color palettes, and component patterns for easy integration into your workflow.