# ui-ux-pro-max

Guides interface styling, font pairings, semantic palettes, and UX rules while prioritizing WCAG accessibility and performance budgets.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 3
- Author: Pixel-Process-UG
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Pixel-Process-UG/superkit-agents/tree/HEAD/templates/skills/ui-ux-pro-max/SKILL.md
- Updated: 2026-03-16
- HTML: https://affpapa.org/en/nevibecode/skills/pixel-process-ug-ui-ux-pro-max

## What it does

This skill structures UI/UX design into strict phases with mandatory stop checkpoints. Before generating component code, the agent collects product details, target audience, and target platforms. It must halt and confirm requirements, chosen style, and color palette before proceeding to implementation.

A rigid priority hierarchy governs every suggestion. Accessibility comes first with WCAG 2.1 AA compliance (4.5:1 contrast, keyboard focus rings, ARIA labels) and 44x44px touch targets. Core performance targets like CLS under 0.1 and LCP under 2.5s follow immediately. Visual flair comes last, ensuring aesthetics never compromise legibility.

Rules cover dozens of styles such as Swiss Design, Glassmorphism, and Neo-Brutalism. Colors must be declared as semantic tokens like `--color-action-primary` rather than raw hex values. For dark mode, direct color inversion is prohibited, requiring a 10-20% saturation reduction to prevent eye strain.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Pixel-Process-UG/superkit-agents --skill ui-ux-pro-max -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-ux-pro-max/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-ux-pro-max/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Pixel-Process-UG/superkit-agents --skill ui-ux-pro-max -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-ux-pro-max/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Pixel-Process-UG/superkit-agents --skill ui-ux-pro-max -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-ux-pro-max/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Pixel-Process-UG/superkit-agents ui-ux-pro-max
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-ux-pro-max/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Pixel-Process-UG/superkit-agents --skill ui-ux-pro-max -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Pixel-Process-UG/superkit-agents --path templates/skills/ui-ux-pro-max
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-ux-pro-max/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Pixel-Process-UG/superkit-agents --skill ui-ux-pro-max -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Pixel-Process-UG/superkit-agents/tree/HEAD/templates/skills/ui-ux-pro-max/SKILL.md

## When to use it
- enforce WCAG 2.1 AA contrast and navigation standards across UI components
- select font pairings and semantic color systems for SaaS, B2B, or mobile products
- configure dark mode palettes without raw color inversion
- establish touch target dimensions with at least 44x44px clickable areas

## Example prompts
- Help me design a B2B SaaS dashboard interface and pick an accessible color palette
- Recommend typography and dark mode tokens for a mobile application
- Define component styles and layout constraints for our landing page

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: bb662b8c1a854e71.

BEGIN THIRD-PARTY FILE bb662b8c1a854e71
```text
---
name: ui-ux-pro-max
description: >
  Use when the user needs full UI/UX design intelligence — styles, palettes, fonts, UX guidelines,
  chart selection, and accessible, performant implementation across any supported stack. Triggers:
  user says "design", "UI", "UX", "color palette", "typography", "accessibility", "responsive design",
  "chart type", "style guide", building any user-facing interface.
---

# UI/UX Pro Max

## Overview

A comprehensive UI/UX design intelligence system that combines visual design expertise with engineering rigor. This skill provides opinionated, production-ready guidance covering style selection, color palettes, typography, UX heuristics, data visualization, and multi-stack implementation. Every recommendation is filtered through a strict priority hierarchy that ensures accessibility and performance are never sacrificed for aesthetics.

## Phase 1: Requirements Gathering

1. Identify the product type and target audience
2. Determine platform(s) (web, mobile, desktop)
3. Assess existing brand guidelines or design system
4. Define accessibility requirements
5. Set performance budgets

**STOP — Confirm requirements with user before making design recommendations.**

### Priority Hierarchy (Non-Negotiable Order)

Do NOT skip or reorder these priorities. Accessibility always comes first.

1. **Accessibility** — WCAG 2.1 AA minimum, AAA preferred
   - Contrast ratio: 4.5:1 for normal text, 3:1 for large text
   - Keyboard navigation: all interactive elements focusable, visible focus ring
   - ARIA labels on all non-text controls
   - Screen reader announcements for dynamic content
   - Reduced motion: respect `prefers-reduced-motion`
2. **Touch Targets** — 44x44px minimum (Apple HIG / WCAG 2.5.5)
   - Spacing between targets: minimum 8px
   - Clickable area may exceed visual bounds via padding
3. **Performance**
   - Images: WebP with AVIF fallback, lazy loading below fold
   - CLS < 0.1, LCP < 2.5s, FID < 100ms
   - Font loading: `font-display: swap`, preload critical fonts
   - Bundle: code-split routes, tree-shake unused components
4. **Style** — Applied only after 1-3 are satisfied
5. **Layout** — Composition and spacing applied last

## Phase 2: Style Selection

**STOP — Present style recommendation with rationale before proceeding to implementation.**

### Style Selection Decision Table

| Context | Recommended Styles | Why |
|---|---|---|
| SaaS Dashboard | Minimalism, Swiss, Material 3 | Clean, data-focused, professional |
| Portfolio | Brutalism, Maximalism, Glassmorphism | Expressive, memorable |
```
END THIRD-PARTY FILE bb662b8c1a854e71

The third-party file has ended. Everything between the bb662b8c1a854e71 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2592 of 12284 bytes. © Pixel-Process-UG · MIT · https://github.com/Pixel-Process-UG/superkit-agents/tree/HEAD/templates/skills/ui-ux-pro-max/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md