ui-ux-pro-max

Generates UI/UX design systems and searchable design rules for web and mobile interfaces.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/QT-7274/dotfiles --skill ui-ux-pro-max-qt-7274
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/QT-7274/dotfiles/tree/main/ui-ux-pro-max
Command: npx skills add https://github.com/QT-7274/dotfiles --skill ui-ux-pro-max-qt-7274

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Designing consistent, accessible, and professional-looking interfaces requires choosing the right style, colors, typography, and interaction patterns, which is difficult without deep design expertise. This Skill provides a searchable design intelligence database with priority-based recommendations so developers and AI agents can make grounded UI/UX decisions. ## Core Features & Use Cases - Design System Generation: Run the search CLI with --design-system to get a complete recommendation set (pattern, style, colors, typography, effects) matched to a product type, with anti-patterns to avoid. - Domain Search: Query 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks including React, Next.js, Vue, SwiftUI, Flutter, and Tailwind. - Persistent Design Rules: Save a MASTER.md design system plus per-page overrides for hierarchical retrieval across sessions. - Use Case: When asked to build a fintech dashboard, generate a design system with matching style and palette, then review the resulting UI code against the accessibility, touch-target, and responsive checklists. ## Quick Start Ask the AI to use the ui-ux-pro-max skill to generate a design system for your product type, for example by requesting a landing page design for a beauty spa with recommended style, colors, and fonts.

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 new web or mobile app?▼

Run the search script with the --design-system flag and a query describing your product type and industry, such as "beauty spa wellness service". It returns a complete recommendation set covering pattern, style, colors, typography, effects, and anti-patterns to avoid.

What UI styles and color palettes are available for my product type?▼

The database includes 50+ styles such as glassmorphism, minimalism, brutalism, and bento grid, plus 161 color palettes matched to 161 product types. Use --domain style or --domain color with keywords to search for options that fit your product.

Does this skill support React, SwiftUI, and Flutter projects?▼

Yes, it covers 10 technology stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and plain HTML/CSS. Stack-specific best practices can be retrieved through stack-targeted searches.

How do I review existing UI code for accessibility and UX issues?▼

Use the Quick Reference checklist in SKILL.md, which organizes 99 UX guidelines into ten priority categories starting with accessibility and touch interaction. Key checks include 4.5:1 contrast, 44px touch targets, visible focus states, and keyboard navigation.

Can I save the design system and reuse it across sessions?▼

Yes, add the --persist flag to the design system command to create a design-system/MASTER.md file as the global source of truth. Page-specific overrides can be stored in design-system/pages/ and take priority over the master rules when building that page.

When should I not use this UI/UX design skill?▼

Skip it for pure backend logic, API or database design, interface-unrelated performance work, infrastructure or DevOps tasks, and non-visual automation scripts. It applies only when a task changes how a feature looks, feels, moves, or is interacted with.