Dev Ui Ux

---
name: dev-ui-ux
description: "Use when the user asks to design or review a UI, build landing pages or dashboards, or pick colors, typography, design systems."
version: 0.2.0
---

# UI/UX Pro Max

Use this skill to turn a vague UI request into a **concrete design system plus implementation guidance**.

## Role

This skill is for:
- design-system selection,
- palette and typography choices,
- UX review and remediation,
- stack-aware frontend implementation guidance,
- lightweight design-system persistence for multi-page work.

It is **not** a replacement for product strategy or user research. Use it to make execution sharper after the product direction is already roughly known.

## Core workflow

### 1. Infer the request shape

Extract the minimum design signals first:
- product type,
- industry,
- style keywords,
- target platform,
- implementation stack.

If the user does not specify a stack, default to `html-tailwind`.

### 2. Generate the design system first

Use the helper script to produce a compact design recommendation:

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "<product_type> <industry> <keywords>" --design-system -p "Project Name"
```

This produces:
- recommended style direction,
- palette family,
- typography direction,
- interaction / visual effects,
- landing or layout bias,
- anti-patterns to avoid.

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

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "<query>" --design-system --persist -p "Project Name"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

This creates:
- `design-system/MASTER.md`
- optional page-level override notes under `design-system/pages/`

### 3. Pull targeted guidance only when needed

Use a focused search instead of loading everything at once:

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "animation accessibility" --domain ux
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "real-time dashboard" --domain chart
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "elegant luxury serif" --domain typography
```

Supported domains:
- `product`
- `style`
- `color`
- `typography`
- `landing`
- `chart`
- `ux`

### 4. Add stack-specific guidance before coding

```bash
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py <!--ACAT-GOVERNANCE: 上游脚本未随本仓库集成，不可直接调用-->" "forms table responsive" --stack html-tailwind
```

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

## Default output shape

A good response should usually include:
1. product and UI framing,
2. recommended style system,
3. palette and typography,
4. component and layout rules,
5. accessibility and interaction checks,
6. stack-aware implementation notes.

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

## References

Load only what is needed:
- `references/USAGE.md` - recommended command patterns and retrieval flow
- `data/ui-reasoning.csv` - compact product-to-design heuristics used by the helper script
- `scripts/search.py` - deterministic helper for design-system, domain, and stack lookup