UI UX Pro Max

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

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
# macOS: brew install python3
# Ubuntu: sudo apt install python3

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:

# 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

Step 2: Domain-Specific Searches (As Needed)

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Step 3: Stack-Specific Guidelines

# 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

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

# 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

Pre-Delivery Visual Checklist

Before delivering UI code, verify:

Visual Quality

• No emojis used as icons (use SVG: Heroicons, Lucide)
• All icons from consistent icon set
• Hover states don't cause layout shift
• For Angular: using daisyUI semantic tokens, not raw hex

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions 150–300ms
• Focus states visible for keyboard navigation

Contrast & Accessibility

• Light mode text >= 4.5:1 contrast ratio
• Glass/transparent elements visible in light mode
• prefers-reduced-motion respected
• Touch targets >= 44px (Angular) / 48dp (Flutter)

Layout

• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile
• No content hidden behind fixed navbars

Rule Priority

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 tokens
• flutter-mobile — Flutter 3.41.x implementation with ThemeData tokens
• tailwind-patterns — Tailwind v4 CSS-first config patterns
• design-system — token enforcement for Angular + Flutter
• accessibility-audit — WCAG 2.1 AA compliance audit (deeper than this skill's checklist)