skills.rest
yuyuxinli
yuyuxinliOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate stack-specific UI/UX design systems with Master and page override outputs.

1|1|Updated Mar 29, 2026
Search Tags:#typography#accessibility#react#tailwind#ui-ux#design-system#color-palette
One-click install
npx skills add https://github.com/yuyuxinli/moodcoco --skill ui-ux-pro-max-yuyuxinli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/yuyuxinli/moodcoco/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/yuyuxinli/moodcoco --skill ui-ux-pro-max-yuyuxinli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX Pro Max removes friction from design decision-making and implementation by providing a searchable design knowledge base, automated design-system generation, and stack-specific implementation guidance so teams can move from brief to production-ready UI faster and more consistently.

Core Features & Use Cases

  • Searchable BM25-backed style, color, typography, chart, landing and UX guideline datasets to find patterns that match product and style queries.
  • Automated design system generator that aggregates multi-domain search results, applies reasoning rules, and outputs a Master + page override hierarchy for persistent project design systems.
  • Stack-specific guidance and presets for html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, and shadcn to reduce translation gaps between design and code.
  • Use cases: generate a landing page design system for a beauty spa, pick accessible palettes and font pairings for a fintech dashboard, or review and produce component specs and pre-delivery checklists for handoff to engineers.

Quick Start

Run the design system generator for your project using the provided CLI and include a project name, for example: python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa".

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 React or Next.js web application?▼

To generate a design system for a React or Next.js web application, run the design system generator CLI with your project name and product query. It outputs a Master design system with page overrides, providing accessible color palettes, typography pairings, and component specs.

What's the best way to ensure UI components meet accessibility standards in Tailwind?▼

The best way to ensure accessible UI components in Tailwind is to use automated design system generation that applies accessibility reasoning rules. It produces accessible color palettes and typography pairings tailored for your specific interface components.

Can I get stack-specific UI component implementation guidance for SwiftUI and Flutter?▼

Yes, you can get stack-specific UI component implementation guidance for SwiftUI and Flutter. The system provides targeted code presets and component specs that reduce translation gaps between your design system and production code.

How does the design system generator handle page-specific UI overrides?▼

The design system generator handles page-specific UI overrides by applying a persistable Master plus page override hierarchy. It aggregates multi-domain search results into a Master system while allowing individual pages to specify distinct styling deviations.

Do I need CSV files to generate typography and color palette pairings for a dashboard?▼

You do not need CSV files to generate typography and color palette pairings, but the system can read CSV-backed datasets to match specific style queries. It uses a searchable BM25-backed dataset to find patterns aligning with your dashboard requirements.

What types of web interfaces are supported by this UI/UX design system tool?▼

This UI/UX design system tool supports web and mobile interfaces including landing pages, dashboards, admin panels, e-commerce sites, and SaaS products. It generates comprehensive component specs and design guidelines across multiple tech stacks.

Related Skills

Explore More Design & Creative Skills→
cchrisvcchrisv

ui-ux-pro-max

Search UI/UX design patterns, colors, and typography with BM25.

Community
Advanced
MjxOroMjxOro

ui-ux-pro-max

Generate UI/UX design systems with stack-specific implementation guidance.

Community
Advanced
Thanh-aperoThanh-apero
1

ui-styling

Build accessible user interfaces with shadcn/ui components and Tailwind CSS styling.

Community
Advanced
St0ff3lSt0ff3l
234

ui-ux-pro-max-zh

Search 67 UI styles, 161 color palettes, and 99 UX guidelines via BM25.

Community
Advanced