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.