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