skills.rest
asubota
asubotaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate cohesive design systems with styles, colors, typography, and UX guidance.

Updated May 10, 2024
Search Tags:#typography#design#ui#ux#design-system#color-palette
One-click install
npx skills add https://github.com/asubota/lets --skill ui-ux-pro-max-asubota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/asubota/lets/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/asubota/lets --skill ui-ux-pro-max-asubota

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Designers and teams often struggle to maintain consistency across complex web and mobile projects. ui-ux-pro-max consolidates 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks into a single design system, enabling rapid, high-quality UI decisions with clear governance and accessibility considerations.

Core Features & Use Cases

  • Comprehensive design guidance across multiple technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS).
  • Step-by-step workflows for page design, component refactors, color/typography systems, and UX reviews.
  • Pattern-driven recommendations for layout, typography, color, and motion to improve consistency, accessibility, and perceived quality.

Quick Start

Generate a complete design system for a SaaS dashboard.

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 cohesive design system for a SaaS dashboard?▼

Generate a design system by aggregating style, color, typography, and UX guidance into a cohesive structure. The system applies pattern-driven recommendations to ensure consistency and accessibility across your SaaS dashboard.

Does this UI/UX design guidance work with React Native and Flutter?▼

Yes, the UI/UX design guidance supports React Native and Flutter. It provides comprehensive design recommendations across ten stacks including SwiftUI, Vue, Svelte, and Tailwind for both web and mobile products.

How do I select a color palette and font pairing for a web product?▼

Select a color palette and font pairing by leveraging 161 color palettes and 57 font pairings within the design system. The system applies reasoning-based pattern selection to match your specific product type and stack.

What's the best way to validate UX patterns across multiple technology stacks?▼

The best way to validate UX patterns is using 99 UX guidelines aggregated across 10 stacks. The system applies a Master and Overrides structure to provide cross-stack guidance and page-specific overrides for consistent validation.

Can I apply page-specific overrides to a base design system?▼

Yes, you can apply page-specific overrides using the Master and Overrides structure. This allows you to maintain a cohesive base design system while adapting layout, typography, and color recommendations for individual pages.

What are the limitations of relying on an automated design system generator?▼

An automated design system generator consolidates predefined styles and guidelines but requires manual implementation of the generated patterns. You must still execute the component refactors and layout adjustments within your specific codebase.

Related Skills

Explore More Design & Creative Skills→
AesopScottAesopScott
1

design-experience-plus-plus

Generate website and product surface designs using MAPS M8 Experience Design.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced