UI/UX Pro Max – Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.

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 data visualizations

Rule Categories by Priority

1. Accessibility (CRITICAL) – Must be met for compliance and usability
2. Touch & Interaction (CRITICAL) – Essential for functionality
3. Performance (HIGH) – Impacts user retention and SEO
4. Layout & Responsive (HIGH) – Core structural integrity
5. Typography & Color (MEDIUM) – Brand and readability
6. Animation (MEDIUM) – Delight and feedback (progressive enhancement)
7. Style Selection (MEDIUM) – Aesthetic direction
8. Charts & Data (LOW) – Specific visualization needs

Quick Reference

1. Accessibility (CRITICAL)

• Contrast: Text/Background ratio > 4.5:1 (AA) or 7:1 (AAA).
• Target Size: Touch targets > 44x44px (mobile).
• Alt Text: All images must have alt description.
• Focus: Visible focus ring for keyboard users.
• Labels: All form inputs must have associated labels.

2. Touch & Interaction (CRITICAL)

• Feedback: Immediate visual response on active/pressed states.
• Thumb Zone: Primary actions in bottom 50% of mobile screen.
• Hit Area: Buttons should have padding (min 12px).
• Gestures: Support swipe for carousels/drawers.

3. Performance (HIGH)

• Images: Use WebP/AVIF. Lazy load off-screen images.
• CLS: Define width/height for all media elements to prevent shifts.
• Fonts: Use font-display: swap. limit weights to 2-3.

4. Layout & Responsive (HIGH)

• Mobile First: Design for 375px width first, then scale up.
• Grid: Use 4-column (mobile), 8-column (tablet), 12-column (desktop).
• Spacing: Use 4px base scale (4, 8, 12, 16, 24, 32…).

5. Typography & Color (MEDIUM)

• Scale: Use modular scale (e.g., Major Third 1.250).
• Line Height: Variables by usage (Headings: 1.1-1.2, Body: 1.5).
• Colors: Limit strict palette to Primary, Secondary, Neural, Danger/Success.
• Dark Mode: Avoid pure black (#000000), use dark grey (#121212).

6. Animation (MEDIUM)

• Duration: Micro-interactions (100-200ms), Transitions (300-500ms).
• Easing: Use ease-out for entering, ease-in for exiting.
• Purpose: Only animate to guide attention or show state change.

7. Style Selection (MEDIUM)

• Consistency: Stick to one distinct style (e.g., Glassmorphism) per app.
• Brand: Align style with brand voice (Playful vs. Corporate).

8. Charts & Data (LOW)

• Clarity: Remove chart junk (borders, heavy grids).
• Color: Use distinct colors for categories (accessible for color blind).
• Legends: Place legends close to data.

How to Use This Skill

Step 1: Analyze User Requirements

Identify what the user wants to build and the constraints.

• Type: Web App, Mobile, Dashboard, Landing Page?
• Vibe: Professional, Playful, Futuristic, Minimal?
• Tech: React, Vue, SwiftUI, Tailwind?

Step 2: Generate Design System (REQUIRED)

ALWAYS run the design_system.py script to generate a cohesive design system (colors, typography, spacing, radius, shadows) tailored to the requirements.

python .agent/skills/ui-ux-pro-max/scripts/design_system.py \
  --vibe="[style_name]" \
  --color="[primary_color]" \
  --stack="[technology_stack]"

• --vibe: e.g., “modern_clean”, “cyberpunk”, “luxury”, “playful”
• --color: e.g., “blue-500”, “#FF5733”, “emerald”
• --stack: e.g., “html-tailwind” (default), “react-shadcn”, “swiftui”

Output: The script will output CSS variables, Tailwind config, or specialized tokens. Copy this output into your implementation plan or directly into the project configuration.

Step 3: Supplement with Detailed Searches (as needed)

If you need specific components or patterns not covered by the high-level system, use search.py.

python .agent/skills/ui-ux-pro-max/scripts/search.py --query "[term]" --category "[category]"

• --query: “login form”, “bar chart”, “pricing card”
• --category: “charts”, “colors”, “icons”, “ui-patterns”, “ui-reasoning”, “ux-guidelines”, “web-interface”

Step 4: Stack Guidelines (Default: html-tailwind)

If no stack is specified, assume HTML + Tailwind CSS.

• Use flex and grid for layout.
• Use rem for sizing.
• Use lucide-react or heroicons for icons.

Search Reference

Available Domains

The search.py script searches across these CSV data files:

• charts.csv: Best practices for data viz (bar, line, pie, etc.)
• colors.csv: Curated palettes (light/dark modes)
• icons.csv: Icon system recommendations
• ui-patterns.csv: Component implementation guides (modals, cards, navs)
• ui-reasoning.csv: “Why” behind design decisions (psychology)
• ux-guidelines.csv: Usability rules and accessibility checks
• web-interface.csv: Layout templates (dashboard, landing page)

Available Stacks

The design_system.py script supports:

• html-tailwind (Web Standard) – DEFAULT
• react-shadcn (Modern Web)
• react-native (Mobile)
• swiftui (iOS)
• flutter (Cross-platform)
• vue-tailwind
• svelte-tailwind
• ios-uikit
• android-compose

Example Workflow

User: “Build a modern dashboard for a fintech app using React and Tailwind.”

Step 1: Analyze Requirements

• Type: Dashboard (High density, charts)
• Vibe: Trustworthy, Clean, Modern (Fintech)
• Tech: React + Tailwind

Step 2: Generate Design System (REQUIRED)

python .agent/skills/ui-ux-pro-max/scripts/design_system.py --vibe="modern_clean" --color="slate" --stack="react-shadcn"

Result: Returns a globals.css with CSS variables for colors, radius, fonts.

Step 3: Supplement with Detailed Searches (as needed)

I need a chart for revenue:

python .agent/skills/ui-ux-pro-max/scripts/search.py --query "line chart" --category "charts"

Result: Returns guidelines: “Use minimal grid lines, distinct colors for datasets, smooth curves (monotone).”

Step 4: Stack Guidelines

Apply the generated system. Use Shadcn UI components for cards and tables.

Output Formats

The skill provides outputs optimized for:

1. Direct Code: CSS variables, Tailwind configs, simplified component structures.
2. Implementation Plans: Checklist items for accessibility and performance.
3. Design Review: Criteria to critique existing UIs.

Tips for Better Results

• Be Specific with “Vibe”: “Cyberpunk” yields very different results from “Corporate”.
• Don’t skip the Design System: It acts as the “source of truth” to prevent inconsistent UIs.
• Check Mobile: The guidelines prioritize mobile-responsiveness.

Common Rules for Professional UI

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

• No emojis used as icons (use SVG instead)
• All icons from consistent icon set (Heroicons/Lucide)
• Brand logos are correct (verified from Simple Icons)
• 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