ui-ux-pro-max

---
name: ui-ux-pro-max
description: Use when designing distinctive web or mobile UI — a curated bank of 50+ visual styles, 161 color palettes, 57 font pairings, 99 UX heuristics, and 25 chart types, with built-in shadcn/ui MCP integration.
source: https://github.com/lst97/ui-ux-pro-max
generated: 2026-05-09T00:37:58.682Z
category: tool
audience: creators
---

## When to use

- Picking a coherent visual style (glassmorphism, brutalism, bento grid, neumorphism, claymorphism…) for a new product
- Choosing a color palette + font pairing that match a defined brand mood instead of random hex/Google Fonts
- Auditing or refactoring existing UI against accessibility, layout, animation, and interaction-state heuristics
- Generating distinctive interfaces that avoid the generic AI-default aesthetic on landing pages, dashboards, SaaS, e-commerce, portfolios

## Key concepts

### Style library

50+ named visual styles with concrete rules (palette ranges, surface treatments, type weight, motion). Examples: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, skeuomorphism, flat design, responsive. Pick a style first; everything else (palette, type, spacing) cascades from it.

### Color + type bank

161 curated color palettes and 57 font pairings, indexed by mood and product type. The expectation is that you select from the bank rather than generating from scratch — distinctive results come from curated combinations, not LLM-improvised hex values.

### UX heuristics

99 guidelines covering accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Used as a checklist during review/refactor passes — not all apply to every screen, but each one is a known failure mode.

### Stack + project matrix

Maps 161 product types (landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app…) onto 10 supported stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). The skill writes code in the stack you specify, not a generic stack.

### Action verbs

The skill is invoked with one of: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check. Each verb maps to a different output shape — review/check produce a critique, plan produces a layout sketch, build/implement produce code.

### shadcn/ui MCP integration

When the target stack is shadcn/ui, the skill calls the shadcn MCP for component search and live examples instead of recalling component APIs from training data. Reduces hallucinated prop names and outdated APIs.

## API reference

```
Invocation: action + element + style
```

The expected prompt shape — name the action verb, the element (button, modal, navbar, sidebar, card, table, form, chart) or full project (website, landing page, dashboard, SaaS), and a style hint. The skill resolves palette/type/spacing from there.

```
build a brutalism landing page in Next.js + Tailwind with the 'editorial-noir' palette
```

```
Element catalog
```

Built-in element types the skill knows how to compose: button, modal, navbar, sidebar, card, table, form, chart. Each has style-specific variants — a brutalist card looks nothing like a claymorphism card.

```
Project archetypes
```

Built-in project archetypes: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Each archetype carries a default information architecture so you don't start from a blank page.

```
Chart types
```

25 chart types across the supported stacks — pick by data shape (time series, distribution, composition, relationship) rather than by chart name first.

## Gotchas

- The skill biases toward distinctive aesthetics — for conservative/enterprise products call it with 'minimalism' or 'flat design' explicitly, otherwise you'll get brutalism or claymorphism by default.
- Color palettes and font pairings are starting points, not brand systems — verify against existing brand guidelines before shipping.
- Style choices must match product audience: brutalism on a fintech checkout erodes trust; glassmorphism on a docs site hurts readability.
- When the stack is shadcn/ui the skill defers to the MCP — without MCP access it falls back to recalled APIs which may be stale.
- Animation and interaction-state heuristics assume a pointer device; mobile-first builds need an explicit gesture/touch pass.

---
Generated by SkillMake from https://github.com/lst97/ui-ux-pro-max on 2026-05-09T00:37:58.682Z.
Verify against source before relying on details.

File: ~/.claude/skills/ui-ux-pro-max/SKILL.md