ui-ux-pro-max

Generates design system recommendations and searchable UI/UX guidelines from CSV databases.

Updated Jun 11, 2026
One-click install
npx skills add https://github.com/dylinmat/design-skills-plugin --skill ui-ux-pro-max-dylinmat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/dylinmat/design-skills-plugin/tree/main/plugins/design/skills/ui-ux-pro-max
Command: npx skills add https://github.com/dylinmat/design-skills-plugin --skill ui-ux-pro-max-dylinmat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for web and mobile interfaces requires extensive design knowledge, and reviewing UI code against accessibility and usability standards is time-consuming. ## Core Features & Use Cases - Design System Generation: Runs a BM25 search across product, style, color, landing, and typography databases to produce a complete design system with reasoning rules, anti-patterns, and a pre-delivery checklist. - Domain Search CLI: Queries 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types, plus stack-specific rules for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. - Persistence with Master + Overrides: Saves design systems to design-system/MASTER.md with per-page override files for hierarchical retrieval across sessions. - Use Case: When building a fintech dashboard, run the design-system command to get a recommended pattern, palette, font pairing, and effects, then search the ux domain to review accessibility and touch-target rules before shipping. ## Quick Start Ask the AI to generate a design system for your product type, for example: build a landing page for a beauty spa using the ui-ux-pro-max design recommendations.

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 project?

Run the search.py script with the --design-system flag and a query describing your product type and industry. It searches product, style, color, landing, and typography databases in parallel and returns a complete recommendation with pattern, palette, fonts, effects, and anti-patterns.

How do I search UI/UX guidelines by domain?

Use search.py with a keyword and the --domain flag set to style, color, typography, chart, ux, product, or landing. The script uses BM25 ranking over CSV data and returns the top matching rows with do/don't guidance and code examples.

Which frameworks and stacks does it cover?

It includes stack-specific guideline files for React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Nuxt, HTML with Tailwind, shadcn/ui, Jetpack Compose, Three.js, Angular, and Laravel. Query them with the --stack option.

Does it require any external Python packages?

No third-party packages are required. The scripts use only the Python standard library (csv, json, re, pathlib) and implement BM25 ranking internally, so any Python 3 installation works.

How do I persist a design system across sessions?

Add the --persist flag with a project name to write design-system/MASTER.md as the global source of truth. Use --page to create page-specific override files under design-system/pages/ that take priority over the master rules.

When should I not use this skill?

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