domains / design / ui-ux-design-system / ui-ux-pro-max

ui-ux-pro-max

Skill card

combined

The three copies overlap on the core task (turning a UI request into a design system and implementation guidance) but each contains material steps or constraints the others lack. The first copy provides a detailed priority-based rule table and a specific CLI workflow with a fixed script path. The second copy adds a triage step, a different deliverable structure, and a different script (design_system.py) with different output standards. The third copy adds a persistence workflow (--persist), a different script path variable, an additional stack (jetpack-compose), and explicit safety rules. Because they disagree on the primary script, path, and workflow, crowning one would hide real alternatives.

Repositories

Other copies

Combined skill

---
name: ui-ux-pro-max
description: "Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues."
---

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

## When to Use
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

## Core Workflow

### 1. Triage and Infer Request Shape
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.
- **Target platform**: web / iOS / Android / desktop
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`

If the user's request is vague, ask only what is necessary to avoid wrong work (e.g., accessibility level, brand vibe).

### 2. Generate Design System (REQUIRED)
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:

```bash
python3 <script_path> "<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 to select best matches
3. Returns complete design system: pattern, style, colors, typography, effects
4. Includes anti-patterns to avoid

If the work spans multiple turns or pages, persist the design system:

```bash
python3 <script_path> "<query>" --design-system --persist -p "Project Name"
python3 <script_path> "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

### 3. Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:

```bash
python3 <script_path> "<keyword>" --domain <domain> [-n <max_results>]
```

**Supported domains:** `product`, `style`, `color`, `typography`, `landing`, `chart`, `ux`

### 4. Stack Guidelines (Default: html-tailwind)
Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.

```bash
python3 <script_path> "<keyword>" --stack html-tailwind
```

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

### 5. Synthesize Before Implementation
After gathering the design system, convert it into:
- layout structure,
- component rules,
- visual tokens,
- interaction rules,
- accessibility constraints,
- implementation notes for the chosen stack.

Do not dump raw search output into the final answer. Use it to justify a coherent design direction.

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

## Safety Rules

- Do not hardcode a design language without connecting it to the product type.
- Do not use emoji as primary UI iconography.
- Do not weaken text contrast for visual flair.
- Do not scale interactive cards on hover if it destabilizes layout.
- Do not use animation that violates `prefers-reduced-motion`.
- Do not invent unsupported helper scripts or datasets; use the bundled `search.py` and `data/ui-reasoning.csv` only.

## Output Standards
- Default to ASCII-only tokens/variables unless the project already uses Unicode.
- Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.
- Always cover: empty/loading/error, keyboard navigation, focus states, contrast.