skills.rest
xiaobuliukun
xiaobuliukunCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems with color, typography, and accessibility guidelines across web and mobile stacks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design teams struggle to establish and maintain a scalable, consistent UI/UX design system across multiple products and stacks.

Core Features & Use Cases

  • Central design system generation and recommendations for color, typography, spacing, and layout.
  • Cross-stack support (html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui MCP) with accessibility and performance guidelines.
  • Component library planning and design guidance for websites, dashboards, landing pages, and mobile apps.

Quick Start

Describe your product, audience, and tech stack, and have the AI generate a complete design system with patterns, colors, typography, and accessibility guidelines.

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 UI design system across multiple frameworks?▼

To create a consistent UI design system across multiple frameworks, you can define a central set of rules for color, typography, and spacing, then apply stack-aware guidelines for React, Vue, Svelte, and Flutter to ensure cross-platform consistency.

Can I generate accessibility guidelines for a React Native component library?▼

Yes, you can generate accessibility guidelines for a React Native component library by defining your product audience and stack, which produces accessibility checks and pattern recommendations tailored for mobile app components.

What's the best way to plan typography and color palettes for a web dashboard?▼

The best way to plan typography and color palettes for a web dashboard is to use a structured design-system workflow that generates central color systems and typography rules while enforcing layout consistency for dashboard components.

Does this UI/UX design guidance support shadcn/ui and Tailwind CSS?▼

Yes, this UI/UX design guidance supports shadcn/ui and Tailwind CSS, providing stack-aware component planning, cross-stack design recommendations, and accessibility performance guidelines for HTML and React implementations.

How do I enforce layout and spacing consistency for a SwiftUI mobile app?▼

You can enforce layout and spacing consistency for a SwiftUI mobile app by applying a structured design-system workflow that generates pattern recommendations and spacing rules specifically tailored for SwiftUI component libraries.

Why do my cross-platform apps struggle with UI design consistency?▼

Cross-platform apps struggle with UI design consistency when they lack a central design system to unify color palettes, typography, and component patterns across different tech stacks like Flutter, React Native, and Vue.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
first-flukefirst-fluke
218

ui-ux-pro-max

Generates design systems and reviews UI/UX patterns for accessible web and mobile interfaces.

Official
Advanced
2nth-ai2nth-ai
1

tech/design

Provide design tools and principles for UI and product design.

Official
Advanced