/ui-ux-pro-max

name: ui-ux-pro-max
description: Use when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset and Python search runtime.

UI/UX Pro Max

Overview

Use this skill when the user wants strong UI/UX guidance inside NextClaw:

• generate a design system for a product or page,
• search styles, color palettes, typography, landing patterns, charts, or UX guidelines,
• review an existing UI for design or accessibility issues,
• or retrieve stack-specific frontend guidance for React, Next.js, Vue, Svelte, Astro, React Native, Flutter, and more.

This marketplace skill is adapted from the upstream `nextlevelbuilder/ui-ux-pro-max-skill` project and bundles the required local assets directly into the installed skill directory.

Be explicit about the boundary:

• This skill owns explanation, readiness checks, workflow selection, and safe usage guidance.
• The bundled local Python scripts own actual search and design-system generation.
• Do not pretend this is a built-in NextClaw design engine with no runtime boundary. It depends on local `python3`.

Install Boundary: NextClaw Marketplace vs Upstream CLI

Always distinguish these paths:

• NextClaw marketplace skill install:

`nextclaw skills install ui-ux-pro-max --workdir <workspace>`

• Installed NextClaw skill assets:

`<workspace>/skills/ui-ux-pro-max/`

• Upstream standalone installer:

`uipro init --ai codex`

For NextClaw users, prefer the marketplace-installed skill assets already bundled under `skills/ui-ux-pro-max/`.

Do not ask the user to install `uipro-cli` unless they explicitly want the upstream standalone ecosystem outside NextClaw.

What This Skill Covers

• local searchable UI style guidance,
• color palette and typography discovery,
• landing page and conversion pattern guidance,
• chart and dashboard design recommendations,
• UX and accessibility review guidance,
• stack-specific implementation guidance,
• complete design-system generation,
• optional persistence of generated design-system files into a target directory.

What This Skill Does Not Cover

• generating pixel-perfect final code by itself,
• claiming that a search result is automatically correct for the user's product without judgment,
• silently writing design files into the repo,
• replacing an existing design system without explicit user intent,
• inventing stacks, domains, or commands that the bundled runtime does not support.

Deterministic First-Use Workflow

When the user wants to use this skill, follow this order.

Step 0: Verify the skill assets exist

Check:

test -f skills/ui-ux-pro-max/scripts/search.py
test -f skills/ui-ux-pro-max/data/styles.csv

If either check fails, the skill is not correctly installed in the current workspace.

Step 1: Verify `python3`

Run:

command -v python3
python3 --version

If `python3` is missing, stop and guide the user to install Python 3 first.

Do not continue to the real task until `python3` exists.

Step 2: Run one read-only readiness smoke

Run:

python3 skills/ui-ux-pro-max/scripts/search.py "fintech dashboard accessibility" --domain ux

Success means:

• the command exits `0`,
• it returns at least one result or a normal empty search response,
• and there is no missing-file or import error.

Step 3: Choose the right workflow

Choose exactly one of these based on the user goal:

• design system generation,
• domain search,
• stack-specific guidance,
• UX review,
• persisted design-system output.

Do not jump to `--persist` if the user only asked for advice or exploration.

Step 4: Execute the smallest matching command

Prefer read-only workflows first.

Examples:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -f markdown
python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism saas" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "focus state keyboard navigation" --domain ux
python3 skills/ui-ux-pro-max/scripts/search.py "pricing table empty state" --stack react
python3 skills/ui-ux-pro-max/scripts/search.py "fintech charts accessibility" --domain chart

Step 5: Ask before persistence writes

`--persist` writes files such as `design-system/<project>/MASTER.md`.

Only use it when the user explicitly wants generated design-system files saved into a project.

Recommended explicit form:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system --persist -p "Serenity Spa" -o .

Or choose an explicit target directory:

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system --persist -p "Serenity Spa" -o <target-project-root>

Search Modes

Design system generation

Use when the user wants a full design direction for a new product, page, or redesign.

Command:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system -f markdown

Domain search

Use when the user wants a focused answer.

Available domains:

• `style`
• `color`
• `chart`
• `landing`
• `product`
• `ux`
• `typography`
• `icons`
• `react`
• `web`
• `google-fonts`

Command:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain>

Stack guidance

Use when the user needs implementation-aware guidance for a specific stack.

Available stacks:

• `react`
• `nextjs`
• `vue`
• `svelte`
• `astro`
• `swiftui`
• `react-native`
• `flutter`
• `nuxtjs`
• `nuxt-ui`
• `html-tailwind`
• `shadcn`
• `jetpack-compose`
• `threejs`
• `angular`
• `laravel`

Command:

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack>

Safe Usage Rules

• Treat search and non-persisted design-system generation as read-only.
• Treat `--persist` as a write action and ask for explicit confirmation unless the user already asked to save output.
• When w