🇺🇸English
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
- ALWAYS call tools before giving design advice
- NEVER invent design values - use only what tools return
- Reference specific values from results (hex codes, font names, style names)
- If tools return empty, suggest broadening the query
- 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:
- Pattern - Landing page structure (hero-centric, testimonial-driven, etc.)
- Style - Visual direction (glassmorphism, minimalism, etc.) with hex colors
- Colors - Primary, secondary, accent, background, text colors
- Typography - Heading font + body font with weights and line heights
- Effects - Shadows, borders, animations, glassmorphism values
- 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:
- When building a specific page (e.g., "dashboard"), first check
design-system/pages/dashboard.md
- If page file exists, its rules override the Master file
- 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 textfocus-states: Visible focus rings on all interactive elementsalt-text: Descriptive alt text for meaningful imagesaria-labels: Required for icon-only buttonskeyboard-nav: Tab order matches visual orderform-labels: Use label with for attribute
Touch & Interaction:
touch-target-size: Minimum 44x44px touch targetscursor-pointer: Add to all clickable/hoverable elementshover-feedback: Clear visual feedback (color, shadow, border)loading-buttons: Disable during async operationserror-feedback: Clear error messages near problem
Performance:
image-optimization: Use WebP, srcset, lazy loadingreduced-motion: Check prefers-reduced-motion media querycontent-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 |
When to Use Each Domain
Start withproduct: Get industry-specific design direction
getProductRecommendations("voice ai analytics dashboard")
Returns: Primary style, landing pattern, dashboard style, key considerations
Follow withstyle: Get detailed visual direction
getStyleRecommendations("fintech minimal professional")
Returns: Style category, hex colors, effects, complexity rating, checklist
Addtypography: Get font pairings
getTypographyRecommendations("professional corporate modern")
Returns: Heading + body fonts, weights, line heights, use cases
Includechart: For data visualization
getChartRecommendations("time series trend comparison")
Returns: Chart types, secondary options, color guidance, libraries
Checkux: 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 in light mode |
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)
Weekly Installs
62
Repository
gracebotly/flowetic-app
First Seen
Jan 31, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode62
codex62
github-copilot61
cline61
gemini-cli61
cursor61
