skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and UX patterns for a new interface is slow and inconsistent without a structured reference. This Skill provides a searchable design intelligence database so AI agents and developers can make grounded UI/UX decisions for web and mobile projects. ## Core Features & Use Cases - Design System Generation: Run the search CLI with --design-system to get a complete recommendation (pattern, style, colors, typography, effects, anti-patterns) for a product type, optionally persisted as a MASTER.md plus per-page override files. - Domain Search: Query 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across domains like style, color, typography, chart, ux, and product. - Stack-Specific Guidelines: Search best practices for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. - Use Case: When asked to build a fintech dashboard, generate a design system with reasoning-based style and color choices, then review the resulting UI code against the 99-rule UX checklist covering accessibility, touch targets, animation, and forms. ## Quick Start Ask the AI to generate a design system for your product, for example: "Use the ui-ux-pro-max skill to create a design system for a beauty spa booking app called Serenity Spa."

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 app?▼

Run the search CLI with the --design-system flag and a product query, for example python3 scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa". It searches product, style, color, landing, and typography domains, applies reasoning rules, and returns a complete recommendation with anti-patterns.

What design data does this UI/UX search tool include?▼

The database contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types. It also includes stack-specific guideline files for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.

How do I save a design system for use across sessions?▼

Add the --persist flag to the design system command to write a design-system/MASTER.md file as the global source of truth. Use --page "dashboard" to also create a page-specific override file under design-system/pages/ that takes priority over the master rules.

Does the search CLI require external Python packages?▼

No external packages are required. The search engine implements BM25 ranking using only the Python standard library (csv, re, math, pathlib), so any Python 3 installation can run it directly.

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 work, and non-visual automation scripts. It only applies when a task changes how an interface looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
MaizeCobraMaizeCobra

ui-ux-pro-max

Generate design systems with styles, palettes, typography, and UX guidelines.

Community
Advanced
istinataFTSistinataFTS
2

ckm:ui-styling

Build accessible React UIs with Radix UI, Tailwind CSS, and canvas-based design.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced