ui-ux-pro-max

Generate design systems with styles, palettes, typography, charts, and stacks.

1|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Elliot-TangS/EliteChain --skill ui-ux-pro-max-elliot-tangs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Elliot-TangS/EliteChain/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Elliot-TangS/EliteChain --skill ui-ux-pro-max-elliot-tangs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design teams often struggle with maintaining consistency across products and projects. This Skill provides a centralized, searchable library of styles, palettes, typography, charts, and multi-stack guidance to accelerate design decisions and ensure cohesive user interfaces.

Core Features & Use Cases

  • Extensive design system catalog: 67 styles, 96 palettes, 57 font pairings, 25 chart types, and 13 technology stacks to speed up UI decisions.
  • Guidance across critical UX domains: accessibility, layout, color, typography, spacing, animation, and interaction patterns with practical checklists and examples.
  • Searchable, reusable design workflows: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code across web and mobile platforms.
  • Real-world use cases: websites, dashboards, admin panels, landing pages, SaaS apps, portfolios, blogs, and mobile experiences across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and more.
  • Integrations: MCP-powered component search and examples to speed up component discovery.

Quick Start

Create a complete design system for a SaaS dashboard by defining your project goals, palettes, typography, and layout patterns.

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 create a consistent design system for a SaaS dashboard?

You can establish a single source of truth for UI consistency by generating styles, palettes, typography, and layout patterns with an actionable implementation checklist and master/override workflow.

Can I use this design system generator with React Native and Flutter?

Yes, the design system generator supports cross-platform mobile app development by providing UI/UX guidelines and pattern libraries specifically tailored for React Native, Flutter, and SwiftUI tech stacks.

What is the best way to maintain typography and color palette consistency across web apps?

The best way to maintain typography and color palette consistency is to use a searchable library offering 96 palettes and 57 font pairings, ensuring cohesive user interfaces across various web app projects.

Does the UI/UX catalog include accessibility and interaction pattern guidelines?

Yes, the UI/UX catalog includes comprehensive guidance across critical UX domains such as accessibility, interaction patterns, spacing, and animation, complete with practical checklists and examples.

How do I implement a master/override workflow for design tokens?

You can implement a master/override workflow by defining core design tokens for styles and palettes as a master baseline, then applying localized overrides for specific web or mobile app contexts.

When should I not use a static design system catalog for UI development?

You should avoid relying solely on a static catalog when your project requires highly custom, dynamic theming outside of predefined styles, or when integrating tech stacks beyond the 13 supported frameworks.