ui-ux-pro-maxDesign intelligence database for UI/UX work — 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines. Flutter has a dedicated stack file. Angular uses html-tailwind stack. BM25 search engine via Python scripts. Use when selecting design direction, palettes, typography, chart types, or getting stack-specific UX guidelines before writing UI code.
Independent GitHub snapshot · Automated classification · Original documentation governs
RUN --design-system FIRST before writing any UI code — it searches 5 domains in parallel and returns a complete design system. For Angular: use html-tailwind stack. For Flutter: use flutter stack. Scripts require Python 3.
Searchable design knowledge database with BM25 search engine. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25+ chart types. Stacks: Angular (html-tailwind), Flutter, SwiftUI.
angular-spa or flutter-mobile for thatdesign-system for thataccessibility-audit for that| Workspace Stack | Script Stack Flag | Notes |
|---|---|---|
| Angular 21.x + Tailwind v4 | --stack html-tailwind | No dedicated Angular CSV — html-tailwind covers Tailwind utilities, responsive, a11y |
| Flutter 3.41.x | --stack flutter | Dedicated flutter.csv with Riverpod, GoRouter, PopScope, ThemeData patterns |
| iOS/SwiftUI | --stack swiftui | SwiftUI-specific guidelines |
Angular gap documented:
data/stacks/html-tailwind.csvcovers Tailwind patterns and responsive design but does not include Angular-specific patterns (Signals, daisyUI,@defer). For Angular-specific patterns, loadangular-spaalongside this skill.
Python 3 required to run the search scripts:
python3 --version
# macOS: brew install python3
# Ubuntu: sudo apt install python3
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <keywords>" --design-system [-p "Project Name"]
This searches 5 domains in parallel (product, style, color, landing, typography) and returns:
Angular examples:
# SaaS dashboard
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "saas dashboard analytics enterprise" --design-system -p "Dashboard"
# Dark admin panel
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "admin panel dark data management professional" --design-system -p "Admin"
Flutter examples:
# Health/wellness app
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "health wellness meditation calm" --design-system -p "Wellness App" --stack flutter
# Fintech mobile
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking secure trust professional" --design-system -p "FinApp" --stack flutter
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
| Domain | Use For | Example |
|---|---|---|
style | 50+ named styles (Glassmorphism, Brutalism, Aurora UI, etc.) | --domain style "glassmorphism dark modern" |
color | 97 palettes by product type | --domain color "saas enterprise blue" |
typography | 57 font pairings | --domain typography "elegant serif luxury" |
chart | 25+ chart types | --domain chart "real-time dashboard trend" |
ux | 99 UX guidelines | --domain ux "animation accessibility loading" |
landing | Landing page structure | --domain landing "hero social-proof conversion" |
product | Product-type patterns | --domain product "healthcare SaaS dashboard" |
# Angular (html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive form focus" --stack html-tailwind
# Flutter
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "theming riverpod state" --stack flutter
1. Run --design-system to get style + palette + typography
2. Load frontend-design skill → apply DFII scoring to recommended style
3. Load angular-spa skill → implement with daisyUI semantic tokens
4. Cross-check: are the palette hex values mappable to daisyUI semantic names?
(e.g., primary color → bg-primary, surface → bg-base-100)
5. Run /lint-design-system to verify no hardcoded hex values slipped in
1. Run --design-system with --stack flutter
2. Load mobile-design skill → apply MFRI scoring
3. Load flutter-mobile skill → implement with ThemeData + AppSpacing tokens
4. Cross-check: are palette colors mapped to colorScheme roles?
(primary, secondary, surface, onPrimary, etc.)
5. Run /lint-design-system to verify no Color(0xFF...) literals
# ASCII box (default) — best for terminal
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system
# Markdown — best for documentation
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -f markdown
Before delivering UI code, verify:
cursor-pointerprefers-reduced-motion respected| Priority | Category | Impact |
|---|---|---|
| 1 | Accessibility (contrast, focus, ARIA) | CRITICAL |
| 2 | Touch & Interaction (44px targets, feedback) | CRITICAL |
| 3 | Performance (image optimization, reduced-motion) | HIGH |
| 4 | Layout & Responsive (viewport, readable font) | HIGH |
| 5 | Typography & Color (line-height, font pairing) | MEDIUM |
| 6 | Animation (150–300ms timing, transform-based) | MEDIUM |
| 7 | Style Selection (match product type) | MEDIUM |
| 8 | Charts & Data (chart type match, alt table) | LOW |
frontend-design — design direction methodology (DFII scoring, Design Thinking Phase). Load after this skill to apply DFII scoring to the recommended style.angular-spa — Angular 21.x implementation with daisyUI v5.5.5 tokensflutter-mobile — Flutter 3.41.x implementation with ThemeData tokenstailwind-patterns — Tailwind v4 CSS-first config patternsdesign-system — token enforcement for Angular + Flutteraccessibility-audit — WCAG 2.1 AA compliance audit (deeper than this skill's checklist)