/ui-ux-pro-max

name: ui-ux-pro-max
description: "UI/UX rules and checklists: layout, color, typography, charts, a11y. TRIGGER when: planning or reviewing UI/UX, choosing palettes/fonts, improving accessibility. SKIP: MUI specifics (use mui-styling); React code (use react-patterns); distinctive look for new landing pages (use frontend-design)."
context: fork
agent: general-purpose

UI/UX Pro Max - Design Intelligence

Design guide for web and mobile applications: prioritised UX rules (accessibility, touch, performance, layout, typography, animation, style, charts), common mistakes that make a UI look unprofessional, and a pre-delivery checklist. Everything is in this file; there is no CLI or dataset to install.

Capabilities

• **Actions**: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code.
• **Projects**: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, `.html`, `.tsx`, `.vue`, `.svelte`.
• **Elements**: button, modal, navbar, sidebar, card, table, form, chart.
• **Styles**: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design.
• **Topics**: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
• **Stacks**: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and more.
• **Integrations**: shadcn/ui MCP for component search and examples.

When to Apply

Reference these guidelines when:

• Designing new UI components or pages
• Choosing color palettes and typography
• Reviewing code for UX issues
• Building landing pages or dashboards
• Implementing accessibility requirements

Rule Categories by Priority

| Priority | Category | Impact | |----------|----------|--------| | 1 | Accessibility | CRITICAL | | 2 | Touch & Interaction | CRITICAL | | 3 | Performance | HIGH | | 4 | Layout & Responsive | HIGH | | 5 | Typography & Color | MEDIUM | | 6 | Animation | MEDIUM | | 7 | Style Selection | MEDIUM | | 8 | Charts & Data | LOW |

Quick Reference

1. Accessibility (CRITICAL)

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

2. Touch & Interaction (CRITICAL)

• `touch-target-size` - Minimum 44x44px touch targets
• `hover-vs-tap` - Use click/tap for primary interactions
• `loading-buttons` - Disable button during async operations
• `error-feedback` - Clear error messages near problem
• `cursor-pointer` - Add cursor-pointer to clickable elements

3. Performance (HIGH)

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

4. Layout & Responsive (HIGH)

• `viewport-meta` - width=device-width initial-scale=1
• `readable-font-size` - Minimum 16px body text on mobile
• `horizontal-scroll` - Ensure content fits viewport width
• `z-index-management` - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

• `line-height` - Use 1.5-1.75 for body text
• `line-length` - Limit to 65-75 characters per line
• `font-pairing` - Match heading/body font personalities

6. Animation (MEDIUM)

• `duration-timing` - Use 150-300ms for micro-interactions
• `transform-performance` - Use transform/opacity, not width/height
• `loading-states` - Skeleton screens or spinners

7. Style Selection (MEDIUM)

• `style-match` - Match style to product type
• `consistency` - Use same style across all pages
• `no-emoji-icons` - Use SVG icons, not emojis

8. Charts & Data (LOW)

• `chart-type` - Match chart type to data type
• `color-guidance` - Use accessible color palettes
• `data-table` - Provide table alternative for accessibility

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

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 | | **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 |

---

Pre-Delivery Checklist

Before delivering UI code, verify these