Agent Skills: UI/UX Pro Max Skill

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: | Need | Domain | Example Query | |------|--------|---------------| | Alternative styles | style | "brutalism bold high-contrast" | | More font options | typography | "elegant luxury serif" | | Chart variations | chart | "funnel conversion visualization" | | UX validation | ux | "mobile touch targets animation" | | Industry patterns | product | "healthcare HIPAA compliance" |

Quick Reference by Priority

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

| Priority | Category | Impact | Key Rules | |----------|----------|--------|-----------| | 1 | Accessibility | CRITICAL | 4.5:1 contrast, focus states, alt text, aria-labels, keyboard nav | | 2 | Touch & Interaction | CRITICAL | 44x44px targets, cursor-pointer, hover feedback, loading states | | 3 | Performance | HIGH | WebP images, lazy loading, reduced-motion, no content jumping | | 4 | Layout & Responsive | HIGH | Mobile-first, 16px min font, no horizontal scroll, z-index scale | | 5 | Typography & Color | MEDIUM | 1.5-1.75 line height, 65-75 char lines, font pairing | | 6 | Animation | MEDIUM | 150-300ms duration, transform/opacity only, skeleton screens |

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:

| Domain | Use For | Example Keywords | Tool | |--------|---------|------------------|------| | product | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty | getProductRecommendations | | style | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | getStyleRecommendations | | typography | Font pairings, Google Fonts | elegant, playful, professional, modern | getTypographyRecommendations | | color | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech | getStyleRecommendations | | chart | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | getChartRecommendations | | ux | Best practices, anti-patterns | animation, accessibility, z-index, loading | getUXGuidelines |

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

| Rule | ✅ Do | ❌ Don't | |------|-------|----------| | No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | | Stable hover states | Use color/opacity transitions on hover | Use scale transforms that shift layout | | Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths | | Consistent icon sizing | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |

Interaction & Cursor

| Rule | ✅ Do | ❌ Don't | |------|-------|----------| | Cursor pointer | Add cursor-pointer to all clickable/hoverable cards | Leave default cursor on interactive elements | | Hover feedback | Provide visual feedback (color, shadow, border) | No indication element is interactive | | Smooth transitions | Use transition-colors duration-200 | Instant state changes or too slow (>500ms) |

Light/Dark Mode Contrast

| Rule | ✅ Do | ❌ Don't | |------|-------|----------| | Glass card light mode | Use bg-white/80 or higher opacity | Use bg-white/10 (too transparent) | | Text contrast light | Use #0F172A (slate-900) for text | Use #94A3B8 (slate-400) for body text | | Muted text light | Use #475569 (slate-600) minimum | Use gray-400 or lighter for body text | | Border visibility | Use border-gray-200 in light mode | Use border-white/10 (invisible) |

Layout & Spacing

| Rule | ✅ Do | ❌ Don't | |------|-------|----------| | Floating navbar | Add top-4 left-4 right-4 spacing | Stick navbar to top-0 left-0 right-0 | | Content padding | Account for fixed navbar height | Let content hide behind fixed elements | | Consistent max-width | Use same max-w-6xl or max-w-7xl | Mix different container widths per page |

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)