---
name: ui-ux-pro-max
description: "UI/UX intelligence for web and mobile — 50+ styles, 161 color palettes, motion patterns, a11y baked in. End-to-end UI/UX skill: 50+ visual styles (glassmorphism, neo-brutalism, swiss, editorial), 161 production-tested color palettes, type scales, motion patterns, accessibility (WCAG 2.2 AA), and the cross-platform handoff to React Native / SwiftUI / Compose."
license: MIT
---

# UI/UX Pro Max

A design-intelligence skill that turns vague UI requests into specified, buildable interfaces. It carries a working library of 50+ visual styles, 161 production-tested color palettes, type and spacing scales, motion patterns, and WCAG 2.2 AA accessibility rules — then maps the result into React Native, SwiftUI, or Jetpack Compose. Built for frontend, iOS, and Android engineers who can ship code but want senior-level design decisions made for them, and for designers who want their system expressed as real tokens.

## When to use it

- You're starting a screen or app and need a coherent style picked (glassmorphism, neo-brutalism, Swiss, editorial) with matching palette, type scale, and elevation.
- You have a rough component and want it re-spec'd against a named palette plus contrast-checked color pairings.
- You're porting one design across platforms and need the same tokens expressed for web, RN, SwiftUI, and Compose.
- You need motion specs (durations, easing curves, enter/exit choreography) instead of guessing.

## How it works

Ask for a style by name or describe a vibe; the skill resolves it to a concrete spec. Each palette ships with foreground/background pairings already validated against the 4.5:1 (text) and 3:1 (large text / UI) AA thresholds, so contrast isn't an afterthought. Type scales come as modular ratios (e.g. 1.250 major third) with line-height and tracking. Motion patterns are emitted as duration + cubic-bezier easing tokens you can drop into `transition`, RN `Animated`/Reanimated, SwiftUI `.animation`, or Compose `animate*AsState`. Cross-platform handoff translates the same token set into CSS custom properties, an RN `StyleSheet` theme object, a SwiftUI `Color`/`Font` set, and Compose `MaterialTheme` values.

## Example

```
> Use UI/UX Pro Max. Give me a "neo-brutalism" dashboard card:
  pick a palette, type scale, hover motion, and emit Compose + CSS tokens.
```

The skill returns the palette name, hex tokens with verified contrast ratios, an 8pt spacing scale, a 150ms ease-out hover spec, and parallel token blocks for each requested platform.

## Tips & gotchas

- Always name your target platform up front — token output differs (CSS vars vs. `StyleSheet` vs. `MaterialTheme`), and the skill won't assume.
- Palettes are referenced by name; ask it to list candidates for a mood before locking one in.
- Glassmorphism and heavy-blur styles can fail AA over busy backgrounds — request the contrast check explicitly for overlay text.
- Motion tokens are values, not animation libraries; you still wire them into Reanimated/Compose yourself.

## FAQ

**Does it generate components or just specs?** It produces specs plus token code you paste in; it doesn't replace your component framework.

**Are the palettes accessible by default?** The pairings are pre-validated to WCAG 2.2 AA, but verify final contrast in context since backgrounds and opacity change results.

**Can it match an existing brand color?** Yes — give it a seed hex and it builds a palette and pairings around it.