Ui ux pro max

Skill alebgl77/claude-inc/skills/ui-ux-pro-max

Builds an end-to-end UI system for a product — design tokens (color scale, type scale, spacing, radii, shadows), a component inventory covering every interaction state, a layout grid, and WCAG contrast checks — emitted as CSS variables plus a component spec doc. Use when the user says "set up a design system", "create design tokens", "make my app consistent", "define the visual foundation", or before any build that spans more than one screen.From its SKILL.md

Install

npx -y skills add alebgl77/claude-inc --skill ui-ux-pro-max

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.8 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

UI UX Pro Max — Design Lead

"Full UI/UX system"

When to use

A product is about to be built or rebuilt and needs its foundation first — "set up the design system for our app".
Screens disagree on colors, sizes or spacing — "make everything consistent".
Tokens are requested explicitly — "give me design tokens / CSS variables for this brand".
A component library is planned — "spec our buttons, inputs and cards with all their states".
Downstream skills (frontend-design, web-artifacts) need a system to consume.

Workflow

Interrogate the product. Capture audience, platform (web/mobile/both), information density (dashboard-dense vs marketing-airy), three mood adjectives, and one product it must NOT resemble. If a BRAND.md exists, inherit its palette and type — never invent parallel ones.
Build the color system. From the brand hue derive a 10-step scale (50–900), plus temperature-tinted neutrals (never flat gray) and semantic sets for success, warning, danger, info. Then map role tokens onto steps: --color-surface, --color-text, --color-accent.
Set the type scale. Two families max (display + text). Pick a modular ratio — 1.2 for dense products, 1.25 for marketing — and define seven roles (display, h1–h3, body, small, mono), each with size, weight, line-height and letter-spacing.
Define space, radius, elevation. Spacing on a 4px base (4/8/12/16/24/32/48/64), three radius tokens (sm/md/full), three shadows tied to meaning: raised, overlay, modal.
Inventory components. List every component the product needs. For each interactive one, spec all seven states: default, hover, focus, disabled, error, loading, empty.
Fix the layout grid. 12 columns desktop, 4 mobile; container max-widths; gutter tokens; named breakpoints (sm 640, md 768, lg 1024, xl 1280).
Run the contrast pass. Every text/background pair must hit WCAG AA — 4.5:1 body, 3:1 large text and UI borders. Repair failures by shifting scale steps, never by one-off hex tweaks.
Emit deliverables. Write tokens.css and COMPONENTS.md. No token may exist in one file and not the other.

Output format

/* tokens.css — generated by ui-ux-pro-max */
:root {
  /* color scale */
  --teal-50: #f0fdfa;  /* ...steps 100-800... */  --teal-900: #134e4a;
  /* color roles — components reference ONLY these */
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-accent: var(--teal-600);
  --color-danger: var(--red-600);
  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Inter", system-ui, sans-serif;
  --text-h1: 600 2.44rem/1.15 var(--font-display);
  /* space / radius / shadow */
  --space-4: 1rem;
  --radius-md: 8px;
  --shadow-overlay: 0 8px 24px rgb(16 24 40 / 0.12);
}

# COMPONENTS.md (excerpt)
## Text input — text | search | password
| State | Spec |
|---|---|
| default | border --gray-300, bg --color-surface, radius --radius-md |
| hover | border --gray-400 |
| focus | 2px ring --teal-400, border --teal-600 |
| disabled | bg --gray-100, text --gray-400, cursor not-allowed |
| error | border --red-600, 13px message in --red-700 below |
| loading | right-slot spinner during async validation |
| empty | placeholder in --gray-500 — a hint, never the label |

Quality bar

Every text/background pair passes WCAG AA (4.5:1 body, 3:1 large text and UI borders)
Components reference role tokens only — no raw hex, no naked scale steps
Every interactive component specs all seven states, including loading and empty
Two type families max; every size sits on the declared modular scale
All spacing divisible by 4 — zero magic numbers anywhere
tokens.css and COMPONENTS.md agree perfectly — no orphan tokens in either direction

Example

Invocation: "Set up the UI system for a B2B analytics dashboard — dense but calm, and it must not look like Linear."

Produces: tokens.css (~70 variables: slate-tinted neutrals, a teal accent scale, 1.2-ratio type on IBM Plex Sans + Plex Mono, 4px spacing, three shadows) and COMPONENTS.md speccing twelve components — button, input, select, table, card, tabs, toast, modal, badge, tooltip, sidebar nav, empty state — each with seven states and AA-verified contrast pairs.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.