---
name: ui_ux_pro_max
description: UI/UX design intelligence for web and mobile applications. Use for design systems, style selection, color palettes, typography, charts, UX review, and stack-specific implementation guidance.
metadata: {"openclaw":{"homepage":"https://uupm.cc","requires":{"bins":["python3","python"]}}}
---

# UI/UX Pro Max

Use `{baseDir}/scripts/search.py` as the entrypoint for every task.

## What It Covers

- Design system generation for new pages, products, dashboards, and mobile apps.
- Style, color, typography, landing-page, product, UX, chart, and icon research.
- Stack-specific guidance for implementation and performance.
- Persisted design systems using `design-system/MASTER.md` and page overrides.

## When To Use

- "Build a landing page for a SaaS product"
- "Choose a color palette for a fintech app"
- "Review this UI for UX issues"
- "What typography works for a premium wellness brand?"
- "Give me stack guidance for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, HTML + Tailwind, shadcn/ui, or Jetpack Compose"

## Workflow

1. Identify product type, audience, tone, and stack.
2. Run the design-system generator first.
3. Deep-dive any uncertain dimension with domain searches.
4. Use stack search for implementation-specific guidance.
5. Apply the pre-delivery checklist before final output.

## Commands

Design system:

```bash
python3 {baseDir}/scripts/search.py "<query>" --design-system -p "Project Name"
```

Persisted design system:

```bash
python3 {baseDir}/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard"]
```

Domain search:

```bash
python3 {baseDir}/scripts/search.py "<query>" --domain style|color|typography|ux|landing|chart|product|prompt|icons|web|google-fonts
```

Stack search:

```bash
python3 {baseDir}/scripts/search.py "<query>" --stack <stack>
```

JSON output:

```bash
python3 {baseDir}/scripts/search.py "<query>" --json
```

## Available Domains

- `style`
- `color`
- `typography`
- `landing`
- `product`
- `ux`
- `chart`
- `prompt`
- `icons`
- `web`
- `google-fonts`

## Available Stacks

The bundled stack data is discovered from `data/stacks/*.csv` at runtime. The current skill bundle includes:

- `astro`
- `flutter`
- `html-tailwind`
- `jetpack-compose`
- `nextjs`
- `nuxt-ui`
- `nuxtjs`
- `react`
- `react-native`
- `shadcn`
- `svelte`
- `swiftui`
- `vue`

## Output Guidance

- Prefer the design system result over ad hoc taste.
- Keep recommendations specific to the request and stack.
- Call out accessibility, motion, responsive behavior, and contrast issues explicitly.
- Use the generated persisted design-system files when the user wants repeated work across sessions.

## Pre-Delivery Checklist

- No emojis used as icons.
- All interactive elements have clear hover or pressed feedback.
- Contrast is at least 4.5:1 for body text.
- Focus states are visible and keyboard-friendly.
- Motion respects reduced-motion preferences.
- Layout works at small-phone and desktop widths.
- No content is hidden behind fixed headers or footers.

## Notes

- Python 3 is required for the bundled search script.
- If the user is on Windows, `python` may be the usable command instead of `python3`.
- If you need a persisted design system, keep the generated `design-system/` directory with the project, not inside the skill bundle.
