# UI UX Pro Max Skill

> UI/UX design intelligence for web and mobile: recommends styles, colour palettes, font pairings, layouts, and chart types, plus stack-specific implementation guidance (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Use when designing, building, reviewing, or refining a UI — landing pages, dashboards, admin panels, SaaS, e-commerce, portfolios, mobile apps — or when choosing palettes, typography, components, spacing, animation, or accessibility fixes. Not for backend-only code, 3D (blender), text-to-image (comfyui), or diagrams (mermaid-diagrams).

- Skill: `dreamlab-ai/ui-ux-pro-max-skill` (Agent Skill, multi-file: 76 files)
- Install (CLI): `npx skillmds@latest add dreamlab-ai/ui-ux-pro-max-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dreamlab-ai/ui-ux-pro-max-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: dreamlab-ai (https://skillmd.com/u/dreamlab-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dreamlab-ai/ui-ux-pro-max-skill

---


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

This directory also ships the upstream project's vendored multi-platform scaffold (`.cursor/`, `.windsurf/`, `.kiro/`, `.roo/`, `.agent/`, `.github/`, `.claude-plugin/`, `cli/`, its own `CLAUDE.md`). That scaffold is upstream packaging for the standalone `uipro init` CLI installer and is not agentbox wiring — agentbox discovers and loads this skill via `SKILL.md` directly, never via that installer or the `.shared/` symlink layout it describes.

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

**Trigger vocabulary** (folded here from the routing description so nothing is lost):
- **Actions**: plan, build, create, design, implement, review, fix, improve, optimise, enhance, refactor, check UI/UX code.
- **Projects / files**: 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.
- **Integrations**: shadcn/ui MCP for component search and examples.
- **Scale**: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 9 technology stacks.

## When Not To Use

- For backend-only code with no user interface -- this skill is UI/UX-specific
- For 3D modelling and rendering -- use the blender skill instead
- For AI image generation from text prompts -- use the comfyui skill instead
- For comprehensive report generation with LaTeX -- use the report-builder skill instead
- For diagram creation (flowcharts, ER models) -- use the mermaid-diagrams skill instead

## 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-optimisation` - 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 **on-screen UI body text** (dashboards, apps, responsive web copy read up close on a screen). This is a distinct scope from the `typography` skill's 120-145% (1.2-1.45) rule, which covers print/typeset body copy set at a fixed point size — see `typography/SKILL.md` for that scope. Don't apply the tighter print range to responsive UI 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.

---

## Prerequisites

`uiux-search` is a compiled Rust binary (no Python, no install step) built from
`services/skill-tools` in the agentbox repo. Check it's on `PATH`:

```bash
uiux-search --help
```

---

## How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

### Step 1: Analyze User Requirements

Extract key information from user request:
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
- **Industry**: healthcare, fintech, gaming, education, etc.
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`

### Step 2: Generate Design System (REQUIRED)

**Always start with `--design-system`** to get comprehensive recommendations with reasoning:

```bash
uiux-search "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

This command:
1. Searches 5 domains in parallel (product, style, color, landing, typography)
2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
3. Returns complete design system: pattern, style, colors, typography, effects
4. Includes anti-patterns to avoid

**Example:**
```bash
uiux-search "beauty spa wellness service" --design-system -p "Serenity Spa"
```

### Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for **hierarchical retrieval across sessions**, add `--persist`:

```bash
uiux-search "<query>" --design-system --persist -p "Project Name"
```

This creates:
- `design-system/MASTER.md` — Global Source of Truth with all design rules
- `design-system/pages/` — Folder for page-specific overrides

**With page-specific override:**
```bash
uiux-search "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

This also creates:
- `design-system/pages/dashboard.md` — Page-specific deviations from Master

**How hierarchical retrieval works:**
1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
2. If the page file exists, its rules **override** the Master file
3. If not, use `design-system/MASTER.md` exclusively

**Context-aware retrieval prompt:**
```
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
```

### Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

```bash
uiux-search "<keyword>" --domain <domain> [-n <max_results>]
```

**When to use detailed searches:**

| Need | Domain | Example |
|------|--------|---------|
| More style options | `style` | `--domain style "glassmorphism dark"` |
| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
| UX best practices | `ux` | `--domain ux "animation accessibility"` |
| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
| Landing structure | `landing` | `--domain landing "hero social-proof"` |

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

Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.

```bash
uiux-search "<keyword>" --stack html-tailwind
```

Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`

---

## References (load on demand)

- **[references/search-reference.md](references/search-reference.md)** — full domain table, stack table, output formats, and search tips.
- **[references/example-workflow.md](references/example-workflow.md)** — worked end-to-end example (analyse → design system → supplement → stack).
- **[references/common-rules.md](references/common-rules.md)** — Common Rules for Professional UI (icons, interaction, light/dark contrast, layout) and the Pre-Delivery Checklist.