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.