ui-ux-pro-max

Overview

What is ui-ux-pro-max?

ui-ux-pro-max is a UI/UX design intelligence skill that helps you make better design decisions for web and mobile interfaces. Instead of guessing layouts, colors, typography, or interaction patterns, the skill draws from a structured dataset of:

• 50+ visual styles
• 161 color palettes
• 57 font pairings
• 161 product types with reasoning rules
• 99 UX guidelines
• 25 chart types
• Coverage for 10 stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS

The skill is built to act as a design decision layer: it helps pick patterns, justify design choices, and maintain UX quality while you design and build.

Who is ui-ux-pro-max for?

ui-ux-pro-max is a good fit for:

• Product designers & UI/UX designers who want systematic guidance for layouts, color systems, typography, and interaction patterns.
• Frontend engineers working in React, Next.js, Vue, Svelte, React Native, or Tailwind who need design-aware suggestions while implementing UI.
• Founders and solo devs who do not have a dedicated design team but still want modern, consistent UI/UX.
• Design-system maintainers who want a reference layer for styles, chart patterns, and UX guidelines aligned with multiple stacks.

It is especially helpful when you are:

• Designing or reviewing landing pages, dashboards, admin panels, SaaS apps, e-commerce, and mobile apps.
• Choosing between styles (glassmorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, etc.).
• Aligning components like buttons, modals, navbars, sidebars, cards, tables, forms, and charts with best practices.

What problems does ui-ux-pro-max solve?

ui-ux-pro-max is designed to reduce design ambiguity and inconsistent UX by providing:

• Reasoned design choices: Uses product type and context to recommend colors, typography, and layout patterns.
• UX quality control: 99 UX guidelines help catch interaction and usability issues before they reach production.
• Cross-stack guidance: Maps design decisions to concrete implementation considerations across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.
• Faster ideation: Quickly combine style directions, palettes, and font pairings that are already curated and compatible.

This makes ui-ux-pro-max useful when you need clarity on how to design something and why a specific direction is better for your product type and platform.

When is ui-ux-pro-max a good or bad fit?

Good fit when:

• You are deciding page layouts, navigation structure, or interaction flows.
• You are choosing color palettes, typography, and spacing systems for a new or existing product.
• You are implementing UI in React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, or shadcn/ui and want design-aware guidance.
• You want a systematic way to review UI/UX quality for dashboards, landing pages, or mobile screens.

Not ideal when:

• You only need generic frontend engineering help (complex state management, backend integration, or devops) without design decisions.
• You already have a rigid, fully defined design system and only need code-level refactors.
• You are working on purely text-based interfaces with minimal visual or interactive elements.

If your main need is visual direction, interaction patterns, or UX quality control, ui-ux-pro-max is likely a strong addition.

How to Use

1. Installation steps

To install ui-ux-pro-max as a skill in a compatible agent environment, use:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

After install, locate the skill files under the `.claude/skills/ui-ux-pro-max` directory in the upstream repository structure. The key artifacts are:

- `SKILL.md` – main skill definition and usage intent
- `data/` – the design intelligence datasets (styles, palettes, UX guidelines, chart types, etc.)
- `scripts/` – helper logic for searching or interpreting the design data

Your environment may mount or mirror these paths differently, but these are the core pieces the skill relies on.

### 2. Files to review first
After installation, start with these files to understand how ui-ux-pro-max behaves:

#### `SKILL.md`

- Describes the high-level purpose: UI/UX design intelligence for web and mobile.
- Explains the scope: 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, 25 chart types.
- Clarifies **When to Apply** and **Must Use** scenarios so the skill is invoked only when design decisions are required.

This file is your primary reference for what the skill will prioritize and how it should be triggered.

#### `data/`

- Contains the structured datasets that power ui-ux-pro-max.
- Includes references to product types, color systems, typography options, UX guidelines, and chart types.
- Allows the agent to search and select recommendations based on context (e.g., SaaS dashboard vs. e-commerce checkout).

You do not usually edit these files during installation; you rely on them as the knowledge base.

#### `scripts/`

- Provides helper scripts that read and interpret the data.
- Enables priority-based recommendations and structured lookups (e.g., choose palette → font pairing → layout pattern).

If you extend or integrate the skill into custom workflows, this is where you would look for hooks or logic to reuse.

### 3. Typical workflows

#### Designing a new page or screen
Use ui-ux-pro-max when planning:

- **Landing pages** and marketing sites
- **Dashboards and admin panels**
- **SaaS apps and e-commerce flows**
- **Mobile app screens**

A common workflow is:

1. Describe the product type, target audience, and platform (e.g., “B2B SaaS analytics dashboard in React with Tailwind”).
2. Ask the agent (with ui-ux-pro-max available) to propose:
   - Overall layout structure and navigation
   - Recommended style (e.g., minimalism, bento grid, dark mode)
   - Color palette and font pairing suited to the product type
   - Key interaction patterns and UX guidelines to follow
3. Have the skill suggest component-level patterns for buttons, modals, forms, tables, and charts.
4. If you are using React, Next.js, Vue, Svelte, React Native, Tailwind, or shadcn/ui, ask for implementation-focused guidance that respects the chosen design direction.

#### Improving or reviewing existing UI
When you already have a UI and want to improve it:

1. Describe the current design, pain points, and stack.
2. Use ui-ux-pro-max to:
   - Map issues against the 99 UX guidelines.
   - Recommend adjustments in spacing, hierarchy, color usage, and typography for clarity.
   - Suggest more suitable chart types (from the 25 chart patterns) for your data.
3. Request a before/after recommendation set, including rationale tied to product type and best practices.

#### Aligning with design systems and component libraries
If you are working with design systems (e.g., Tailwind setups or shadcn/ui):

- Use ui-ux-pro-max to decide **which patterns** and **token combinations** (colors, font sizes, spacing) you should lean on for a given product type.
- With shadcn/ui MCP integration available in the broader environment, you can:
  - Ask ui-ux-pro-max to identify the right component patterns.
  - Use MCP to look up concrete examples and code for those patterns.

This keeps design decisions and component choices in sync without manually sifting through documents.

### 4. When to invoke the skill explicitly
Following the upstream guidance from `SKILL.md`, ui-ux-pro-max is best invoked when the task involves:

- **UI structure** – page layout, content hierarchy, navigation patterns.
- **Visual design decisions** – styles, colors, typography, spacing, shadows, gradients.
- **Interaction patterns** – hover/focus states, loading states, error handling, micro-interactions.
- **UX quality control** – identifying friction points and applying UX guidelines.

For straightforward code-only tasks with no design implications, you can omit this skill to keep responses focused on engineering.


## FAQ

### What does ui-ux-pro-max actually contain?
ui-ux-pro-max ships with a curated design knowledge base: 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types mapped across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). These are stored as data and scripts that the agent can query to provide design-aware recommendations.

### How is ui-ux-pro-max different from a normal coding helper?
Normal coding helpers focus on syntax, APIs, and implementation details. ui-ux-pro-max focuses on **design decisions and UX quality**: which layout to pick, which palette suits your product, how to structure forms, what chart type to use, and how to avoid UX anti-patterns. It can then align those decisions with your frontend stack.

### Which tech stacks does ui-ux-pro-max support?
The skill is built to cover design guidance for:

- Web frameworks: **React, Next.js, Vue, Svelte**
- Mobile and app frameworks: **SwiftUI, React Native, Flutter**
- Styling and components: **Tailwind, shadcn/ui, and HTML/CSS**

You can still use it conceptually with other stacks, but these are the ecosystems it explicitly targets.

### Can I use ui-ux-pro-max with Tailwind or shadcn/ui?
Yes. ui-ux-pro-max is explicitly aware of Tailwind and shadcn/ui. It can help you choose design patterns, color systems, spacing, and typography that translate well into Tailwind utility classes or shadcn/ui components. With shadcn/ui MCP available, it can also lean on component search and examples.

### Does ui-ux-pro-max generate full UI code?
The skill is focused on **design intelligence first**, with implementation guidance as a second step. It can help you:

- Define the structure and behavior of UI components.
- Suggest how to implement them in React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, or HTML/CSS.

However, its primary value is **choosing and justifying design decisions**, not just generating code fragments.

### When should I not use ui-ux-pro-max?
Skip this skill when your task is:

- Purely backend or infrastructure related.
- A low-level refactor with no impact on UI or UX.
- A narrow algorithm or performance optimization problem.

In those cases, enabling ui-ux-pro-max adds little value because there are no design decisions to make.

### How do I start using ui-ux-pro-max effectively?
After installing the skill:

1. Read `SKILL.md` to understand its scope and suggested usage.
2. When creating or updating UI, clearly describe product type, target users, platform, and tech stack to the agent.
3. Ask for structured outputs: layout proposals, style direction, color and font recommendations, UX checklist items, and chart choices.
4. Iterate: refine the brief and have ui-ux-pro-max re-evaluate UX quality as you move toward implementation.

### Where can I see the underlying data and scripts?
Open the Files tab for the skill and inspect:

- `SKILL.md` for the high-level definition and application rules.
- `data/` for the structured design datasets.
- `scripts/` for helper logic that powers the recommendations.

These resources explain how ui-ux-pro-max reasons about UI/UX so you can trust and adapt its suggestions to your project.