ui-ux-pro-max

Searches a local UI/UX design database to generate design systems, palettes, and stack guidelines.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill ui-ux-pro-max-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/ui-ux-pro-max
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill ui-ux-pro-max-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing styles, color palettes, typography, and UX patterns for a new page or app often relies on guesswork. This Skill replaces that with a searchable local database of 84 styles, 192 color palettes, 74 font pairings, 98 UX guidelines, and stack-specific rules across 22 frameworks, so design decisions come with reasoning and anti-patterns to avoid. ## Core Features & Use Cases - Design System Generation: Run a single query to get a full recommendation covering layout pattern, style, semantic color tokens, font pairings, effects, and anti-patterns, with optional persistence to a MASTER.md plus per-page override files. - Domain Search: Query specific domains such as color, typography, icons, charts, GSAP motion presets, landing page structure, and UX guidelines using a BM25-ranked search script. - Stack Guidelines: Retrieve do/don't rules with code examples for React, Next.js, Vue, Svelte, Angular, SwiftUI, Flutter, React Native, Tailwind, shadcn/ui, and more. - Use Case: When asked to build an analytics dashboard in Next.js, generate a design system with density and motion dials, then pull Next.js-specific performance guidelines before writing any component code. ## Quick Start Ask the AI to design a new page or review existing UI, for example: generate a design system for a beauty spa landing page and apply it to my Next.js 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 design system for a new web page?▼

Run the search script with the --design-system flag and a query describing product type, industry, and tone. It searches product, style, color, landing, and typography domains in parallel and returns pattern, colors, fonts, effects, and anti-patterns with reasoning.

What UI design guidelines exist for React and Next.js?▼

Use the --stack react or --stack nextjs flag to query stack-specific guidelines covering rerendering, memoization, Suspense, bundle splitting, and server components. Each rule includes do/don't guidance with good and bad code examples.

Does the search tool require external Python packages?▼

No external dependencies are required. The search engine implements BM25 ranking using only the Python 3 standard library, reading local CSV data files for styles, colors, typography, charts, icons, and UX guidelines.

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

Yes, add --persist with --output-dir pointed at your project root to write a MASTER.md file as the global source of truth. Page-specific overrides go in a pages subfolder, and existing files are skipped unless you pass --force.

What should I do when a design search returns zero results?▼

Retry once with broader or differently worded keywords, splitting product and style terms. If still empty, fall back to the built-in priority table and explicitly tell the user the recommendation came from defaults rather than a database match.

When should I not use this UI design database?▼

Skip it for pure backend logic, API or database design, non-visual performance work, and infrastructure tasks. It applies only when the work changes how something looks, feels, moves, or is interacted with.