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

curl -fsSL --create-dirs -o ~/.claude/skills/ui-ux-pro-max/SKILL.md https://claudeskil.com/skills/ui-ux-pro-max/SKILL.md

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