ui-ux-pro-max

Generate structured UI/UX design systems with color, typography, and components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provides a centralized, scalable source of UI/UX design rules and patterns to accelerate product design and development, ensuring consistency across platforms and tech stacks.

Core Features & Use Cases

  • 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.

  • Searchable, rule-based guidance combined with practical implementation notes for colors, typography, layout, components, and accessibility.

  • Designed to support design-to-code workflows in React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui, with actionable patterns and checklists.

  • Examples include generating design systems for web dashboards, landing pages, or mobile apps, and comparing style/typography options.

Quick Start

Generate a complete UI/UX design system for a dashboard project with a chosen style and color goals.

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/UX design system for a web dashboard?

A UI/UX design system provides centralized, scalable design rules and reusable patterns to ensure visual consistency across platforms. It combines color palettes, typography, components, and accessibility guidelines into a single source of truth for your project.

Can I generate design system components for React Native and SwiftUI?

Yes, you can generate UI/UX patterns and implementation guidelines for React Native and SwiftUI. The system provides actionable design-to-code workflows supporting nine stacks including React, Vue, Svelte, SwiftUI, Flutter, and Tailwind.

What's the best way to choose color palettes and font pairings for a mobile app?

The best way to choose color palettes and font pairings is by searching curated, rule-based options. You can compare 97 color palettes and 57 font pairings against your style goals to accelerate mobile app design and ensure visual consistency.

Does this UI/UX guidance include accessibility considerations for Tailwind and shadcn/ui?

Yes, the UI/UX guidance includes accessibility considerations for Tailwind and shadcn/ui. It provides practical implementation notes and checklists covering layout and component accessibility to ensure your design meets required standards.

How do I apply UX guidelines and chart types when planning component layouts?

Applying UX guidelines and chart types during component layout planning involves leveraging 99 UX guidelines and 25 chart types. These searchable rules provide structured guidance to accelerate layout planning and ensure consistent component implementation.

Why use a centralized design system instead of ad-hoc styling for cross-platform products?

Using a centralized design system instead of ad-hoc styling ensures consistent style across products and tech stacks. It provides a scalable source of reusable patterns and implementation guidelines, accelerating design and development without visual drift.