Jonathon's AI Wiki

UI/UX Pro Max Deep Dive

6 min read

Source: skill files (ui-ux-pro-max SKILL.md)

UI/UX Pro Max is a searchable design database with a Python CLI tool. It contains 67 styles, 96 palettes, 57 font pairings, 99 UX guidelines, 25 chart types, and implementation guides for 13 tech stacks. Think of it as a design encyclopedia that the skill queries on your behalf, returning targeted recommendations instead of generic defaults. The --design-system command is the single most efficient way to bootstrap a complete design system for a new project.

What It Contains

DomainCountExamples
Styles67Neo-Brutalism, Glassmorphism, Swiss Design, Retro-Futurism, Organic, Editorial
Palettes96Named palettes with hex values, contrast ratios, usage guidance
Font Pairings57Primary + secondary + monospace combinations with size scales
UX Guidelines99Interaction patterns, accessibility rules, cognitive load management
Chart Types25With data type requirements, interaction patterns, accessibility notes
Tech Stacks13Implementation-specific rules for React, Next.js, Vue, Svelte, Tailwind, etc.

Rule Categories by Priority

The database organizes rules by priority level. Higher priority rules cannot be overridden by lower ones:

  • P1 Accessibility (CRITICAL) --- WCAG contrast ratios, focus indicators, screen reader support, keyboard navigation. Never trade off.
  • P2 Touch/Interaction (CRITICAL) --- Minimum 44px touch targets, hover states, cursor-pointer on clickables, stable hover regions.
  • P3 Performance (HIGH) --- GPU-composited animations only, lazy loading, optimized assets, minimal JS for visual effects.
  • P4 Layout (HIGH) --- Responsive breakpoints, container queries, safe areas, scroll behavior.
  • P5 Typography/Color (MEDIUM) --- Type scale, contrast, font loading, color consistency.
  • P6 Animation (MEDIUM) --- Easing curves, duration ranges, reduced motion support.
  • P7 Style Selection (MEDIUM) --- Matching style to product type, user expectations, brand alignment.
  • P8 Charts (LOW) --- Chart type selection, data visualization best practices.

The CLI Workflow

Step 1: Analyze Requirements

Before querying the database, identify:

  • Product type (dashboard, landing page, SaaS app, e-commerce, portfolio)
  • Style keywords (minimal, bold, editorial, playful, enterprise)
  • Industry (fintech, health, creative, dev tools, education)
  • Tech stack (React + Tailwind, Next.js + shadcn, Vue, Svelte, vanilla)

Step 2: Generate Design System (REQUIRED FIRST)

/ui-ux-pro-max --design-system "fintech dashboard, minimal, professional"

This is always the first command. It searches 5 domains in parallel (style, typography, color, UX, landing) and returns a complete design system:

  • Color palette with semantic tokens
  • Typography scale with font pairing
  • Spacing scale
  • Component patterns
  • Interaction guidelines

Step 2b: Persist the Design System

/ui-ux-pro-max --design-system "fintech dashboard, minimal, professional" --persist

The --persist flag creates:

  • design-system/MASTER.md --- the canonical design system reference
  • design-system/page-*.md --- page-specific overrides for different views

This makes the design system available to all other skills and all future sessions.

Step 3: Supplement with Domain Searches

After the design system is established, query specific domains for deeper guidance:

/ui-ux-pro-max --domain style "neo-brutalism for developer tools"
/ui-ux-pro-max --domain chart "time series financial data"
/ui-ux-pro-max --domain ux "form validation patterns"
/ui-ux-pro-max --domain typography "editorial magazine style"
/ui-ux-pro-max --domain landing "SaaS conversion optimization"

Step 4: Get Stack-Specific Implementation

/ui-ux-pro-max --stack react
/ui-ux-pro-max --stack html-tailwind
/ui-ux-pro-max --stack nextjs
/ui-ux-pro-max --stack shadcn

Default stack is html-tailwind if not specified.

Available Domains

DomainWhat it searchesUse when
productProduct type patterns and conventionsStarting a new product type
styleVisual style definitions and examplesChoosing or refining aesthetic direction
typographyFont pairings, scales, hierarchy rulesFixing type choices
colorPalettes, contrast, semantic colorBuilding or refining a palette
landingConversion patterns, hero layouts, CTAsBuilding marketing/landing pages
chartData visualization types and guidelinesAdding charts or data displays
uxInteraction patterns, accessibility, flowsSolving UX problems
reactReact-specific component patternsBuilding React UIs
webGeneral web development best practicesHTML/CSS implementation questions
promptPrompt engineering for design generationMeta-level skill optimization

Available Tech Stacks

html-tailwind | react | nextjs | vue | svelte | swiftui | react-native | flutter | shadcn | jetpack-compose

Each stack includes framework-specific rules: component patterns, state management, styling approach, accessibility implementation, and performance optimization.

Common Professional UI Rules

The database enforces these rules regardless of style or stack:

  • No emoji icons --- use Phosphor Light, Heroicons, or Lucide SVG icons. Emoji are not professional UI elements.
  • Stable hover states --- hover effects must not shift layout. No size changes that push adjacent elements.
  • cursor-pointer on clickables --- every interactive element must show pointer cursor. Missing this feels broken.
  • Glass card opacity in light mode --- bg-white/80 minimum with backdrop-blur. Lower opacity makes text unreadable.
  • Floating navbar spacing --- top-4 left-4 right-4 (not edge-to-edge). Floating navbars need breathing room from viewport edges.
  • Text contrast minimums --- 4.5:1 for body text, 3:1 for large text (18px+ or 14px+ bold). Non-negotiable.

Pre-Delivery Checklist

Before considering a UI complete, the skill runs this checklist:

  • Visual quality --- Does it pass the AI Slop Test? No banned patterns?
  • Interaction --- Every clickable has hover/focus/active states? Feedback is immediate?
  • Light/dark mode --- Both themes tested? Contrast passes in both?
  • Layout --- Responsive at 320px, 768px, 1024px, 1440px? No horizontal overflow?
  • Accessibility --- Keyboard navigable? Focus visible? ARIA labels on non-text elements?

Tips for Better Results

  • Be specific with keywords. “minimal dashboard” gets better results than “dashboard.”
  • Search multiple times. Different keywords surface different parts of the database. “editorial” and “magazine” return different results.
  • Combine domains. A style search plus a UX search for the same project gives complementary guidance.
  • Always check the UX domain. Even when you think you only need style, the UX rules catch interaction issues early.
  • Use —persist on every project. The MASTER.md file becomes the single source of truth for design decisions across sessions.

Key Takeaways

  • Always run --design-system first --- it is the foundation that all other queries build on
  • The --persist flag saves the design system to files, making it available across sessions and skills
  • 10 searchable domains cover every aspect of UI design from style to data visualization
  • Priority levels (P1-P8) create a clear hierarchy: accessibility is never traded for aesthetics
  • 13 tech stacks provide framework-specific implementation guidance, not just generic CSS
  • The pre-delivery checklist catches the issues that make AI-generated UI feel unfinished
  • Be specific with search keywords and search multiple times for better coverage

Try It

  1. Open a project where you need UI and run: /ui-ux-pro-max --design-system "your product type, style keywords" --persist
  2. Review the generated MASTER.md --- it should have a complete palette, font pairing, and spacing scale
  3. Run a supplemental search: /ui-ux-pro-max --domain ux "the specific interaction pattern you need"
  4. Compare the recommended font pairing against what you would have picked by default --- it should be more distinctive
  5. Build with the design system active, then run /audit to verify the implementation matches the spec

Graph View

Backlinks