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

Accessibility (CRITICAL) - Must be met for compliance and usability
Touch & Interaction (CRITICAL) - Essential for functionality
Performance (HIGH) - Impacts user retention and SEO
Layout & Responsive (HIGH) - Core structural integrity
Typography & Color (MEDIUM) - Brand and readability
Animation (MEDIUM) - Delight and feedback (progressive enhancement)
Style Selection (MEDIUM) - Aesthetic direction
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.

bash

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

bash

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)

bash

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:

bash

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:

Direct Code: CSS variables, Tailwind configs, simplified component structures.
Implementation Plans: Checklist items for accessibility and performance.
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

Rule	Do	Don't
Stroke weight	Match icon stroke to text weight (usually 1.5px or 2px)	Use filled icons next to outlined ones (inconsistent)
Sizing	Use 4px increments (16, 20, 24, 32)	Arbitrary sizes (17px, 23px)
Alignment	Optical alignment for play buttons/triangles	Strict geometric center

Interaction & Cursor

Rule	Do	Don't
Clickable	`cursor: pointer` on EVERYTHING clickable	Leave default arrow cursor on buttons/divs
Disabled	`cursor: not-allowed` + opacity 0.5	Hide disabled elements completely (usually)

Light/Dark Mode Contrast

Rule	Do	Don't
Text	High contrast (Slate-900 / Slate-50)	Pure black on pure white (eye strain)
Borders	Subtle (Slate-200 / Slate-800)	Thick, dark borders in light mode

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

ui-ux-pro-max

NPX Install

SKILL.md Content

UI/UX Pro Max - Design Intelligence

When to Apply

Rule Categories by Priority

Quick Reference

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)

How to Use This Skill

Step 1: Analyze User Requirements

Step 2: Generate Design System (REQUIRED)

Step 3: Supplement with Detailed Searches (as needed)

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

Search Reference

Available Domains

Available Stacks

Example Workflow

Step 1: Analyze Requirements

Step 2: Generate Design System (REQUIRED)

Step 3: Supplement with Detailed Searches (as needed)

Step 4: Stack Guidelines

Output Formats

Tips for Better Results

Common Rules for Professional UI

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Visual Quality

Interaction

Light/Dark Mode

Layout

Accessibility