ui-ux-pro-max

Generate UI/UX design recommendations from CSV knowledge for web and mobile products.

1|Updated May 24, 2026
One-click install
npx skills add https://github.com/gavin100305/traffic --skill ui-ux-pro-max-gavin100305
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/gavin100305/traffic/tree/main/agents/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/gavin100305/traffic --skill ui-ux-pro-max-gavin100305

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you make professional UI/UX decisions by systematically applying accessibility, interaction, layout, typography, color, and data-viz guidelines to modern web and mobile interfaces.

Core Features & Use Cases

  • UI/UX quality control: Review screens and components for UX issues, interaction problems, and accessibility gaps (contrast, focus, keyboard support, labels).
  • Design system generation: Produce a cohesive design direction (pattern/sections, style priority, color strategy, typography mood, and key effects) for a target product type and platform context.
  • Style, color, typography, and charts: Retrieve recommendations across 50+ styles, large color-palette coverage, font pairings, landing patterns, and 25+ chart types aligned to your scenario.
  • Cross-stack implementation guidance: Get supporting best practices for common stacks such as React/Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.

Quick Start

Use the UI/UX Pro Max skill to generate a complete design system for a "SaaS dashboard" project by running: python3 skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system -p "My Project".

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 web or mobile product?

To generate a design system, provide a target product type and platform context, and the tool queries curated knowledge to output style priority, color strategy, typography mood, and key visual effects for your product.

What is the best way to validate accessibility and interaction patterns in a UI component?

Validating accessibility involves reviewing screens for contrast, focus, keyboard support, and labels, which this tool performs by applying established interaction guidelines to catch inconsistent or unprofessional interface decisions.

Can I get cross-stack implementation guidance for React, Vue, Flutter, and Tailwind?

Yes, you can get cross-stack implementation guidance that provides supporting best practices for common stacks including React/Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.

How do I choose the right chart design and color palettes for a data visualization scenario?

Choosing the right chart design involves matching 25+ chart types and large color palettes to your specific scenario by retrieving recommendations that align data-viz guidelines with your target product context.

Does this UI/UX guidance tool work without external dependencies?

Yes, it works without external dependencies, running a local Python script that queries curated CSV knowledge using BM25 retrieval to produce structured design recommendations and optionally persisting results into page override files.

When should I use a dedicated design system generator instead of manual UI/UX decisions?

Use a design system generator when you need to systematically reduce inconsistent or unprofessional interface decisions across multiple pages, applying structured guidelines for layout, typography, and accessibility rather than relying on ad-hoc choices.