UI UX Pro Max

UI/UX Pro Max Skill

Overview

This skill provides access to a comprehensive design database via native Mastra tools. All design recommendations MUST come from tool queries - never from LLM memory.

Available Tools

getStyleRecommendations

Search 67+ UI styles by product type, industry, and keywords.

Query examples:

• "fintech dashboard minimal"
• "healthcare monitoring dark"
• "startup saas bold"
• "enterprise corporate professional"
• "voice ai cyber glass"

Returns: Style category, colors (hex), effects, complexity rating, implementation checklist.

getTypographyRecommendations

Search 57+ font pairings by style, mood, and use case.

Query examples:

• "professional corporate"
• "modern tech startup"
• "friendly approachable"
• "premium luxury"

Returns: Font pairings (heading + body), weights, line heights, use cases.

getChartRecommendations

Search 25+ chart types by data pattern and visualization goal.

Query examples:

• "time series trend"
• "comparison categories"
• "part-to-whole percentage"
• "geographic distribution"

Returns: Chart type, secondary options, color guidance, accessibility notes, library recommendations.

getProductRecommendations

Search industry-specific design patterns.

Query examples:

• "crm dashboard"
• "voice ai analytics"
• "workflow automation"
• "healthcare monitoring"

Returns: Primary style recommendation, landing page pattern, dashboard style, key considerations.

getUXGuidelines

Search 98+ UX best practices by category and platform.

Query examples:

• "mobile navigation"
• "form validation"
• "accessibility wcag"
• "dashboard layout"

Returns: Guideline, do/don't examples, code samples, severity rating.

Usage Rules

1. ALWAYS call tools before giving design advice
2. NEVER invent design values - use only what tools return
3. Reference specific values from results (hex codes, font names, style names)
4. If tools return empty, suggest broadening the query
5. Combine multiple tool results for comprehensive recommendations

Data Sources

• styles.csv: 67 UI styles with colors, effects, complexity
• typography.csv: 57 font pairings with weights, use cases
• charts.csv: 25 chart types with accessibility notes
• products.csv: Industry-specific design patterns
• ux-guidelines.csv: 98 UX best practices

Design System Workflow

Generate Complete Design System

Always start by generating a complete design system before individual domain searches:

Query Pattern:

getProductRecommendations("<product_type> <industry>")
+ getStyleRecommendations("<product_type> <style_keywords>")
+ getTypographyRecommendations("<style_keywords>")
+ getChartRecommendations("<data_type>") [if dashboard]
+ getUXGuidelines("<platform> <category>")

Example:

User: "Create a fintech dashboard with dark mode"

1. getProductRecommendations("fintech dashboard")
   → Returns: Industry-specific design direction

2. getStyleRecommendations("fintech dark minimal professional")
   → Returns: Style category, hex colors, effects, complexity

3. getTypographyRecommendations("professional modern corporate")
   → Returns: Font pairings, weights, line heights

4. getChartRecommendations("time series trend comparison")
   → Returns: Chart types, color palettes, libraries

5. getUXGuidelines("dashboard layout dark mode accessibility")
   → Returns: Best practices, anti-patterns, code samples

Design System Output Structure

A complete design system includes:

1. Pattern - Landing page structure (hero-centric, testimonial-driven, etc.)
2. Style - Visual direction (glassmorphism, minimalism, etc.) with hex colors
3. Colors - Primary, secondary, accent, background, text colors
4. Typography - Heading font + body font with weights and line heights
5. Effects - Shadows, borders, animations, glassmorphism values
6. Anti-patterns - What to avoid for this product type

Persist Design System (Master + Overrides Pattern)

For multi-page projects, persist the design system for consistency:

Concept:

• design-system/MASTER.md → Global Source of Truth (all design rules)
• design-system/pages/ → Page-specific overrides (deviations from Master)

Hierarchical Retrieval Logic:

1. When building a specific page (e.g., "dashboard"), first check design-system/pages/dashboard.md
2. If page file exists, its rules override the Master file
3. If page file doesn't exist, use design-system/MASTER.md exclusively

When to Create Master:

• User confirms a design system for the entire project
• Multiple pages will share the same design language

When to Create Page Override:

• User requests page-specific style (e.g., "Make checkout page simpler")
• Page has different density/spacing requirements
• Page has different color emphasis (e.g., success green for confirmation)

Content Structure:

MASTER.md:

# [Project Name] Design System

## Style
- Category: Glassmorphism
- Primary: #667eea
- Effects: backdrop-blur-md, bg-white/10
- Dark mode primary: #818cf8

## Typography
- Heading: Inter Bold (700, 800)
- Body: Inter Regular (400, 500)
- Line height: 1.5

## Spacing
- Density: Comfortable
- Card padding: p-6
- Section gaps: space-y-8

## Components
- Border radius: rounded-xl
- Shadow: shadow-lg
- Hover: scale-105, transition-300ms

pages/dashboard.md:

# Dashboard Page Overrides

## Spacing (OVERRIDE)
- Density: Compact (data-heavy)
- Card padding: p-4
- Section gaps: space-y-4

## Components (OVERRIDE)
- Border radius: rounded-lg (sharper for data tables)
- Charts: Use consistent color palette from MASTER

Supplement with Domain Searches

After establishing the design system, use domain searches for specific needs:

When to Search Additional Domains:

Quick Reference by Priority

When designing or reviewing UI, apply these guidelines in priority order:

Critical Rules (Always Check)

Accessibility:

• color-contrast: Minimum 4.5:1 ratio for normal text
• focus-states: Visible focus rings on all interactive elements
• alt-text: Descriptive alt text for meaningful images
• aria-labels: Required for icon-only buttons
• keyboard-nav: Tab order matches visual order
• form-labels: Use label with for attribute

Touch & Interaction:

• touch-target-size: Minimum 44x44px touch targets
• cursor-pointer: Add to all clickable/hoverable elements
• hover-feedback: Clear visual feedback (color, shadow, border)
• loading-buttons: Disable during async operations
• error-feedback: Clear error messages near problem

Performance:

• image-optimization: Use WebP, srcset, lazy loading
• reduced-motion: Check prefers-reduced-motion media query
• content-jumping: Reserve space for async content

Domain Search Guide

Use these domains to get specific design recommendations:

When to Use Each Domain

Start with product: Get industry-specific design direction

getProductRecommendations("voice ai analytics dashboard")
Returns: Primary style, landing pattern, dashboard style, key considerations

Follow with style: Get detailed visual direction

getStyleRecommendations("fintech minimal professional")
Returns: Style category, hex colors, effects, complexity rating, checklist

Add typography: Get font pairings

getTypographyRecommendations("professional corporate modern")
Returns: Heading + body fonts, weights, line heights, use cases

Include chart: For data visualization

getChartRecommendations("time series trend comparison")
Returns: Chart types, secondary options, color guidance, libraries

Check ux: For best practices

getUXGuidelines("mobile navigation accessibility")
Returns: Guidelines, do/don't examples, code samples, severity rating

Common Anti-Patterns (DO NOT DO)

Professional UI avoids these frequently overlooked issues:

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Before delivering UI code, verify ALL items:

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons from consistent set (Heroicons/Lucide/Simple Icons)
• Brand logos are correct (verified from Simple Icons)
• Hover states don't cause layout shift (no scale transforms)
• Use theme colors directly (bg-primary) not var() wrapper

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation
• Loading states disable buttons during async

Light/Dark Mode

• Light mode text has sufficient contrast (4.5:1 minimum)
• Glass/transparent elements visible in light mode (bg-white/80+)
• Borders visible in both modes
• Test both modes before delivery

Layout

• Floating elements have proper spacing from edges (top-4, not top-0)
• No content hidden behind fixed navbars
• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have descriptive alt text
• Form inputs have associated labels
• Color is not the only indicator of state
• prefers-reduced-motion respected for animations
• Minimum 44x44px touch targets on mobile

Performance

• Images optimized (WebP, lazy loading, srcset)
• No content layout shift (CLS)
• Animations use transform/opacity (not width/height)