UI/UX Pro Max - Design Intelligence

Overview

Systematic design guide with priority-based UX rules, accessibility requirements, and pre-delivery checklists. Use alongside @designing-frontends for creative direction.

Core principle: Apply rules by priority (CRITICAL → HIGH → MEDIUM → LOW) and verify with checklist before delivery.

When to Use

• Building UI components that need accessibility compliance
• Reviewing code for UX issues (touch targets, focus states, contrast)
• Implementing responsive layouts
• Adding animations and interactions
• Preparing UI for production delivery
• Choosing typography, colors, or chart types systematically

Use @designing-frontends for: Creative direction, bold aesthetics, unique visual identity

Use @ui-ux-pro-max for: Systematic rules, accessibility, checklists, production polish

Quick Reference - Rules by Priority

CRITICAL - Always Apply

HIGH - Apply for Production

MEDIUM - Apply for Polish

LOW - Apply When Relevant

Common Professional UI Rules

Interaction & Cursor

/* All clickable elements */
.clickable {
  cursor: pointer;
  transition: colors 200ms;
}

Light/Dark Mode Contrast

Layout & Spacing

• Floating elements: Use top-4 left-4 right-4 not top-0 left-0 right-0
• Content width: Use max-w-6xl or max-w-7xl for readability
• Responsive breakpoints: Test at 375px, 768px, 1024px, 1440px

Pre-Delivery Checklist

Run through before delivering any UI code:

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons from consistent icon set (Heroicons/Lucide)
• Brand logos verified (use Simple Icons for tech logos)
• Hover states don't cause layout shift
• 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

Light/Dark Mode

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

Layout

• Floating elements have proper spacing from edges
• No content hidden behind fixed navbars
• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Design Reference Data

This skill includes comprehensive design databases in the data/ folder:

Available References

• data/styles.md - 68 design styles with colors, effects, CSS implementation
• data/colors.md - 96 color palettes by product type (SaaS, e-commerce, healthcare, etc.)
• data/typography.md - 57 font pairings with Google Fonts imports and Tailwind config

How to Use

When building UI, read the relevant data file for recommendations:

• Need a style? → Read data/styles.md for Glassmorphism, Neubrutalism, Bento Grid, etc.
• Need colors? → Read data/colors.md for product-specific palettes
• Need fonts? → Read data/typography.md for curated pairings with imports

Example Workflow

1. User asks for "fintech dashboard"
2. Read data/colors.md → Find "Financial Dashboard" palette
3. Read data/styles.md → Find "Data-Dense Dashboard" or "Executive Dashboard" style
4. Read data/typography.md → Find "Financial Trust" or "Dashboard Data" pairing
5. Apply the recommendations with the UX rules from this skill

Tips for Better Results

1. Be specific - "healthcare SaaS dashboard" > "app"
2. Check accessibility first - CRITICAL rules before polish
3. Test both modes - Light and dark before delivery
4. Use the checklist - Run through every item before shipping

Common Mistakes

Source

Adapted from nextlevelbuilder/ui-ux-pro-max-skill - contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types.