/ui-ux-pro-max

name: ui-ux-pro-max
description: "Cross-stack UI/UX design intelligence: layout, color, typography, charts, accessibility. TRIGGER when: planning or reviewing UI/UX, choosing palettes/fonts, or improving accessibility. SKIP: Material-UI code specifics (use mui-styling); React component code (use react-patterns)."
context: fork
agent: general-purpose

UI/UX Pro Max - Design Intelligence

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

Capabilities

• **Actions**: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code.
• **Projects**: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, `.html`, `.tsx`, `.vue`, `.svelte`.
• **Elements**: button, modal, navbar, sidebar, card, table, form, chart.
• **Styles**: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design.
• **Topics**: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
• **Stacks**: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and more (13 total).
• **Database**: 67 styles, 96 palettes, 57 font pairings, 25 chart types, 99 UX guidelines.
• **Integrations**: shadcn/ui MCP for component search and examples.

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

Rule Categories by Priority

| Priority | Category | Impact | Domain | |----------|----------|--------|--------| | 1 | Accessibility | CRITICAL | `ux` | | 2 | Touch & Interaction | CRITICAL | `ux` | | 3 | Performance | HIGH | `ux` | | 4 | Layout & Responsive | HIGH | `ux` | | 5 | Typography & Color | MEDIUM | `typography`, `color` | | 6 | Animation | MEDIUM | `ux` | | 7 | Style Selection | MEDIUM | `style`, `product` | | 8 | Charts & Data | LOW | `chart` |

Quick Reference

1. Accessibility (CRITICAL)

• `color-contrast` - Minimum 4.5:1 ratio for normal text
• `focus-states` - Visible focus rings on interactive elements
• `alt-text` - Descriptive alt text for meaningful images
• `aria-labels` - aria-label for icon-only buttons
• `keyboard-nav` - Tab order matches visual order
• `form-labels` - Use label with for attribute

2. Touch & Interaction (CRITICAL)

• `touch-target-size` - Minimum 44x44px touch targets
• `hover-vs-tap` - Use click/tap for primary interactions
• `loading-buttons` - Disable button during async operations
• `error-feedback` - Clear error messages near problem
• `cursor-pointer` - Add cursor-pointer to clickable elements

3. Performance (HIGH)

• `image-optimization` - Use WebP, srcset, lazy loading
• `reduced-motion` - Check prefers-reduced-motion
• `content-jumping` - Reserve space for async content

4. Layout & Responsive (HIGH)

• `viewport-meta` - width=device-width initial-scale=1
• `readable-font-size` - Minimum 16px body text on mobile
• `horizontal-scroll` - Ensure content fits viewport width
• `z-index-management` - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

• `line-height` - Use 1.5-1.75 for body text
• `line-length` - Limit to 65-75 characters per line
• `font-pairing` - Match heading/body font personalities

6. Animation (MEDIUM)

• `duration-timing` - Use 150-300ms for micro-interactions
• `transform-performance` - Use transform/opacity, not width/height
• `loading-states` - Skeleton screens or spinners

7. Style Selection (MEDIUM)

• `style-match` - Match style to product type
• `consistency` - Use same style across all pages
• `no-emoji-icons` - Use SVG icons, not emojis

8. Charts & Data (LOW)

• `chart-type` - Match chart type to data type
• `color-guidance` - Use accessible color palettes
• `data-table` - Provide table alternative for accessibility

How to Use

Search specific domains using the CLI tool below.

---

Tool Availability

This skill ships with static design knowledge (styles, color palettes, font pairings, UX rules) as markdown tables embedded above. A richer interactive search is available **if** this skill is bundled with `scripts/core.py`, `scripts/search.py`, and `data/`. In this plugin distribution the scripts are not included, so the markdown-only fallback applies.

Mode A -- Full functionality (scripts/ present)

If `scripts/core.py` exists next to this SKILL.md, run:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system

See "How to Use This Skill" below for full workflow.

Mode B -- Markdown-only fallback (scripts/ missing)

If you are in a repo without `scripts/`, skip every `python3 .../search.py ...` command below. Use only the tables above ("Rule Categories by Priority", "Quick Reference") as your design reference. This mode is enough for most UI reviews and implementation tasks; you just lose the search CLI.

Detection snippet (agent should run this once before citing any CLI command):

if [[ -f "skills/ui-ux-pro-max/scripts/core.py" ]]; then
  echo "Mode A (full)"
else
  echo "Mode B (markdown-only)"
fi

**If Mode B: pomin wszystkie sekcje ponizej ktore odwoluja sie do `python3 skills/ui-ux-pro-max/scripts/...`. Uzyj wylacznie tabel referencyjnych z gory tego pliku.**

---

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

**macOS:**

brew install python3

**Ubuntu/Debian:**

sudo apt update && sudo apt install python3

**Windows:**

winget install Python.Python.3.12

---

How to Use This Skill