Iron Law
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.
UI/UX Pro Max — Design Intelligence Database
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.
When to Use
- Choosing design style/aesthetic for a new Angular or Flutter UI
- Selecting a color palette for a specific product type (SaaS, health, fintech, etc.)
- Finding font pairings for a design direction
- Getting UX best practices (animation, z-index, accessibility, loading states)
- Recommending chart types for data visualization
- Getting stack-specific implementation guidelines
When NOT to Use
- For implementing Angular or Flutter code — use
angular-spa or flutter-mobile for that
- For design token enforcement — use
design-system for that
- For WCAG compliance audit — use
accessibility-audit for that
Workspace Stack Mapping
| 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.csv covers Tailwind patterns and responsive design but does not include Angular-specific patterns (Signals, daisyUI, @defer). For Angular-specific patterns, load angular-spa alongside this skill.
Prerequisites
Python 3 required to run the search scripts:
python3 --version
Step 1: Generate Design System (Always Start Here)
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:
- Recommended style + rationale
- Color palette with hex values
- Font pairing with rationale
- Effects and animation guidelines
- Anti-patterns to avoid
Angular examples:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "saas dashboard analytics enterprise" --design-system -p "Dashboard"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "admin panel dark data management professional" --design-system -p "Admin"
Flutter examples:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "health wellness meditation calm" --design-system -p "Wellness App" --stack flutter
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking secure trust professional" --design-system -p "FinApp" --stack flutter
Step 2: Domain-Specific Searches (As Needed)
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" |
Step 3: Stack-Specific Guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive form focus" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "theming riverpod state" --stack flutter
Workflow: Angular SPA Design
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
Workflow: Flutter App Design
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
Output Formats
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -f markdown
Pre-Delivery Visual Checklist
Before delivering UI code, verify:
Visual Quality
Interaction
Contrast & Accessibility
Layout
Rule Priority
| 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 |
Related Skills
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)
