skills.rest
TranVanTienDat
TranVanTienDatCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design system recommendations and searches UI/UX guidelines via a BM25-powered CLI.

Updated Mar 26, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#ux guidelines#bm25 search
One-click install
npx skills add https://github.com/TranVanTienDat/Milkyway --skill ui-ux-pro-max-tranvantiendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/TranVanTienDat/Milkyway/tree/main/apps/storefront/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/TranVanTienDat/Milkyway --skill ui-ux-pro-max-tranvantiendat

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 is time-consuming and error-prone. This Skill provides a searchable design knowledge base and an automated design system generator so UI decisions are grounded in documented rules rather than guesswork. ## Core Features & Use Cases - BM25 Search Engine: Query 11 domains (style, color, chart, landing, product, ux, typography, icons, react, web, google-fonts) across CSV datasets covering 50+ styles, 161 color palettes, 57 font pairings, and 99 UX guidelines. - Design System Generator: Run --design-system to aggregate multi-domain search results with reasoning rules into a complete recommendation covering pattern, style, colors, typography, effects, and anti-patterns. - Persistence (Master + Overrides): Save generated systems to design-system/<project>/MASTER.md with optional per-page override files. - Use Case: Ask for a design system for a "fitness tracking app" and receive a prioritized style, a 16-token color palette, font pairing with Google Fonts URL, key effects, and a pre-delivery checklist. ## Quick Start Ask the AI to generate a design system for your product type, for example: "Generate a design system for a SaaS dashboard using the ui-ux-pro-max search script."

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

Run the search.py CLI with the --design-system flag and a query describing your product, such as "SaaS dashboard". The tool aggregates product, style, color, typography, and landing pattern searches, applies reasoning rules, and outputs a complete recommendation in ASCII or Markdown format.

What design resources does the UI/UX search database include?▼

The database contains over 50 design styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types. It also includes icon libraries, Google Fonts metadata, React performance rules, and web accessibility guidelines.

Which frameworks and platforms are supported by the design guidelines?▼

Guidelines cover React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind CSS, shadcn/ui, and plain HTML/CSS. Stack-specific searches are available through the --stack flag, with react-native currently configured.

How do I persist a design system across multiple pages?▼

Use the --persist flag with --design-system to write a MASTER.md file under design-system/<project>/. Add --page <name> to create page-specific override files in the pages/ subdirectory, which take precedence over the master rules for that page.

What are the requirements to run the UI/UX search CLI?▼

Only Python 3 is required; the scripts use standard library modules (csv, json, argparse, pathlib) with no external packages. Verify installation with python3 --version before running search.py.

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

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

Related Skills

Explore More Design & Creative Skills→
claudeforgeclaudeforge
39

project-planning

Plan software projects by guiding discovery, requirements gathering, and scoping into a structured plan.

Official
Advanced
majiayu000majiayu000
258

ui-ux-pro-max

Generate design systems and pre-delivery UI/UX reviews for web and mobile stacks.

Community
Advanced
loveconnorloveconnor

typography

Define and validate typographic systems with WCAG 2.2 contrast compliance.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate