Using the ui-ux-pro-max skill: method, commands and outcomes

Author: Aniket Shukla Date: 4 September 2026 Subject: How the ui-ux-pro-max AI skill was evaluated and used to produce a monitoring-product landing page, and what the method is worth repeating.

---

Repository contents

Path	What it is
README.md	This document — the method, commands and measured findings. §11 is a copy-pasteable prompt appendix for Cursor.
docs/retrofit-playbook.md	Applying the same tool to an existing dashboard. Different workflow.
tools/contrast-audit.py	Reusable WCAG contrast auditor for CSS custom properties. Exits non-zero, so it drops into CI.
examples/kymo-landing.html	The landing page produced by the method in §6–8. Self-contained, no build step.

Quick start:

python3 tools/contrast-audit.py path/to/globals.css
open examples/kymo-landing.html

---

1. Purpose and scope

This document records the exact process used to evaluate the open-source ui-ux-pro-max skill and apply it to a real design deliverable. It is written so a colleague can reproduce the work without re-deriving any of the research.

Two deliverables came out of the session:

Deliverable	What it is
Kymo landing page	A marketing landing page for a fictional observability product. This is the build documented in detail below.
Dashboard Retrofit Playbook	A separate reference doc for improving an existing monitoring dashboard. Different workflow; summarised in §9.

A note on terminology: the artifact produced was a landing page for a monitoring product, not a monitoring dashboard. The retrofit playbook is the piece that addresses an actual dashboard UI.

Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT, ~125k stars, actively maintained — last commit 3 September 2026)

---

2. What the skill is

A local, offline design catalogue queried through a Python script. It is not a model or an API. It ships CSV data and a BM25 keyword search over it:

• 192 product colour palettes
• 79 visual styles (50 active)
• 74 font pairings + 1,934 Google Fonts with metadata
• 119 UX guidelines
• 25 chart types
• 34 landing-page patterns
• 22 technology stacks

The scripts are standard-library Python only. They were audited before use: no subprocess, no eval, no network calls, no filesystem writes outside the explicit --persist flag.

---

3. Installation

3.1 Cursor

npm install -g ui-ux-pro-max-cli

cd /path/to/project
uipro init --ai cursor          # writes .cursor/skills/
uipro init --ai cursor --global # or ~/.cursor/skills/ for every project

Package-name warning. Two npm packages install a binary called uipro. ui-ux-pro-max-cli is current (2.15.0, published 2026-08-13). uipro-cli is stale (2.2.3, published 2026-01-29). Installing the wrong one fails silently — you get answers, just seven months out of date.

Python 3 must be on PATH. Confirm the skill is actually firing before trusting anything it says:

uipro search "dialog focus trap" --stack shadcn

Expect CSV fields — Guideline, Do, Don't, Severity, Docs URL. If those are missing, the agent is improvising rather than querying the catalogue.

The CLI also targets Windsurf, Copilot, Codex, Gemini CLI, Continue and others via --ai <name>; run uipro init --help for the full list.

3.2 Weight

Seven skills install, not one. Their approximate context cost:

ui-ux-pro-max  ~130 always-on / ~3.9k on-invoke   <- the only one worth keeping
design         ~170 / ~3.1k
ui-styling     ~130 / ~2.5k
banner-design  ~120 / ~1.6k
design-system   ~80 / ~1.8k
brand           ~50 / ~800
slides          ~40 / ~360
                ~709 tok always-on for the full set

To trim in Cursor, delete the unused directories under .cursor/skills/ after uipro init. The figures above were read from the plugin inventory of an equivalent install; treat them as indicative rather than exact for Cursor.

Provenance note. The measurements throughout this document were captured against the same catalogue and the same search.py, installed through Claude Code's plugin system rather than the Cursor CLI. The data files and the script are identical between the two, so the numbers carry over; only the install path and the invocation wrapper differ.

---

4. Skill selection

The plugin installs seven skills. Only one was used.

Skill	Used?	Reasoning
ui-ux-pro-max	Yes	The searchable catalogue. The only component with real data behind it.
ui-styling	No	shadcn/Tailwind implementation help; the deliverable was hand-written CSS.
design-system	No	Token architecture; overlapped with what --design-system already emits.
design, brand, slides, banner-design	No	Logo/CIP/slide/banner generation — out of scope.

4.1 The judgement layer — not supplied by this skill

A second, separate design-quality process was applied before any HTML was written. ui-ux-pro-max supplied data; that process supplied judgement. Neither substitutes for the other, and the distinction is the single most important thing in this document.

In the original session this came from Anthropic's artifact-design skill, which is not available in Cursor. There is no drop-in equivalent, so in Cursor it has to be applied as explicit practice. Its substance is short enough to state in full:

1. Write a design plan before any code — palette as 4–6 named hex values, two or more type roles, and a one-sentence layout concept. Build only from the plan.
2. Ground every choice in the subject. Distinctive decisions come from the subject's own world — its instruments, materials and vocabulary — not from a catalogue of styles.
3. Review the plan for genericness before building. If a part of it is what you would produce for any similar page, revise that part and note why.
4. Structure both themes at token level. Light palette on bare :root; dark redefines only the tokens. Never declare a colour solely inside a media query.
5. Reject the known generic AI looks, which is what the catalogue will hand you: near-black with a lone acid-green accent; warm cream with a serif display and terracotta; purple-to-blue gradient heroes; Inter or Space Grotesk as the safe face.

Paste those five points into your Cursor prompt. Step 3 and step 5 are the ones that stop you shipping the catalogue's median answer.

---

5. Phase 1 — Calibration

The catalogue was measured before being trusted. This step is the most reproducible value in the whole exercise and is recommended before adopting the tool on any project.

5.1 Stack coverage

Ten realistic component queries were run against each stack and hits counted.

Stack	Hit rate	Interpretation
shadcn	10/10	Densest stack file. 68 rows organised per component.
html-tailwind	6/10	Good for layout and utility questions.
react-native	6/10	51 rows. No coverage of safe areas, insets or bottom sheets.
react	2/10	Not a gap — that file is React idioms and performance, not components.

Routing conclusion:

• component behaviour → --stack shadcn
• layout / utilities → --stack html-tailwind
• rerenders, memo, effects → --stack react

5.2 Colour data quality

All 192 palettes were extracted and every foreground/background pair scored for WCAG contrast.

1,344 text pairs checked — 0 below 4.5:1 (100% pass)

This is the strongest evidence for the tool. The palettes are genuinely validated, not generated by feel. Example: for an emerald primary it specifies black on #059669 (5.57:1) where the intuitive white would fail at 3.77:1.

5.3 Where the colour data stops

Non-text contrast (WCAG 1.4.11, 3:1 for UI boundaries) is not validated:

Border on Background : 173/173 below 3:1   median 1.22:1   best in set 2.39:1
Border on Card       : 173/173 below 3:1   median 1.26:1
Ring   on Background :   0/192 below 3:1   median 5.31:1

Read precisely: a hairline divider is decorative and legitimately exempt, and the focus-ring result shows the authors deliberately validated non-text contrast where the standard strictly requires it. But wherever a border is the only thing separating two data rows or marking a control edge, the catalogue default will not survive a bright room. Raise those specific borders manually.

5.4 Retrieval behaviour

The search is lexical BM25, not semantic. It matches vocabulary, not meaning.

Query	Result
"FlatList"	Hit
"list performance"	0 results — same row
"toast notification"	Hit
"alert notification urgency"	0 results — nothing in the corpus covers alerting

Practical rules: two to five concrete terms, one intent per query, always pass --domain or --stack explicitly, retry once narrower on a miss then stop.

Its best property: on zero results it returns an explicit "did not hit the database" and instructs the agent not to fabricate. Hold your agent to that.

---

6. Phase 2 — Generation

6.1 The command

The CLI wraps the search script, so in Cursor the invocation is:

uipro search "observability monitoring developer tool infrastructure" \
  --design-system --variance 8 --motion 4 --density 6 -p "Landing"

To call the script directly — useful when scripting or when you want the agent to show raw output — it sits under the skill directory that uipro init created:

.cursor/skills/ui-ux-pro-max/scripts/search.py

SKILL.md recommends always invoking by full path rather than relying on the working directory.

The three dials are the highest-leverage flags in the tool:

Dial	Range	Effect
--variance	1 centred/minimal → 10 bold/asymmetric	Biases style category
--motion	1 subtle → 10 complex	Attaches a matching GSAP snippet
--density	1 spacious → 10 dense/dashboard	Rewrites the spacing scale

6.2 What it returned

PATTERN     FAQ/Documentation Landing
            (Hero with search bar / Popular categories / FAQ accordion / Contact CTA)
STYLE       Brutalism
COLORS      Primary    #1E293B   Accent  #22C55E
            Background #0F172A   Notes: "Code dark + run green"
TYPOGRAPHY  JetBrains Mono / IBM Plex Sans

6.3 Assessment of that output — the central finding

At its boldest setting (--variance 8) the tool returned the single most templated developer-tool aesthetic in existence: near-black plus acid green plus JetBrains Mono. The page pattern was also misrouted — an FAQ/documentation structure was returned for a product landing page.

This is structural, not a defect. The tool is a convergence engine: a catalogue lookup over 192 palettes and 34 patterns necessarily returns the median, validated answer. A lookup table cannot produce a distinctive concept. Asking it for originality is asking it for the one thing its architecture excludes.

Operating conclusion: use it as a checker, not a generator.

6.4 What was kept and what was rejected

Kept from the skill	Rejected
on-* token discipline (every accent ships a validated foreground)	Its palette — a known generic AI look
WCAG contrast thresholds	Its font pairing — the safe default
"Never rely on colour alone" (from --domain chart)	Its page pattern — misrouted and wrong for the brief
prefers-reduced-motion, visible-focus requirements	Its section order and CTA placement

---

7. Phase 3 — Design decisions taken independently

With the skill's aesthetic output rejected, a design plan was written first, per the judgement-layer process set out in §4.1.

Concept. Monitoring rendered as a paper chart recorder (kymograph), rather than a dark console. The hero is a live HTML Canvas trace that runs flat and occasionally spikes — the product's thesis in one moving line, instead of the customary dashboard screenshot.

Colour. Instrument paper #E9EBE6, graphite ink #1A1D19, oxblood trace #A32218. Chart recorders use red ink, so red is the brand colour. Severity is therefore encoded in mark shape — circle, diamond, triangle — not a second colour. This both matches how paper recorders work and satisfies the rule that semantic state must stay separate from the accent hue.

Type. Archivo 900 (industrial display) / Newsreader (serif body) / IBM Plex Mono (readouts). The serif body is the deliberate risk: no developer-tool landing page uses one, but instrument documentation does.

Structure. Sections are spined on timestamps (03:14:07, 03:14:16, 03:19:52, 09:00:00) rather than 01/02/03, because an incident timeline is the true structure of the content — the numbering encodes real information.

Dark theme was authored as a full token set, not an inversion.

---

8. Phase 4 — Verification

Nothing was assumed to work. Each item below was measured.

Contrast, computed before building:

LIGHT   all text pairs >= 4.5:1
DARK    all text pairs >= 4.5:1
--on-trace on --trace   light 7.50:1   dark 6.15:1
focus ring on paper     light 6.25:1   dark 6.15:1

ink3 was darkened from #66717F to #5E6875 because it measured 4.45:1 — just under threshold.

Rendered checks (local HTTP server, viewport emulation at 1280 and 375):

• Canvas trace drawing live with visible excursions — confirmed
• Dark palette flipping correctly — confirmed
• document.scrollWidth === clientWidth at 375px — no horizontal overflow
• Newsreader and Archivo actually loading, not silently falling back — confirmed
• All four timeline entries rendering with their 120px gutter — confirmed

Two false alarms worth recording. Mojibake (·, â€") and a collapsed list on mobile both appeared during local testing. Neither was a CSS defect: the local server lacked the charset and viewport meta tags that the publishing wrapper supplies. innerWidth reported 980 instead of 375, which identified it. The lesson is to verify the diagnosis before fixing — the real page was correct and the test rig was not.

One genuine fix from looking: the hero originally consumed the entire fold, pushing the Canvas trace — the whole point of the page — below it. Type scale and vertical rhythm were reduced until the recorder was visible on load.

Not verified: the published artifact could not be opened in an unauthenticated browser. Final visual verification was performed on a local copy wrapped to match the publishing skeleton.

---

9. The other workflow — retrofitting an existing dashboard

Improving a dashboard that already exists is a different job and should not use the greenfield flow above. Recommended order:

1. Audit before generating. Run a WCAG contrast audit on the current globals.css. This converts "it doesn't look good" into a list of measured defects.
2. Generate a target with the dials. --density 8 --variance 3 --motion 2.
3. Take the tokens, discard the page structure. --design-system always emits a marketing narrative, even for an internal console.
4. Use --persist. The --space-* spacing scale appears only in the persisted MASTER.md — not in stdout, despite what SKILL.md claims. Verified across all three output formats.
5. Migrate tokens, not screens. shadcn components read the CSS variables, so one token change propagates everywhere. Screen-by-screen redesigns strand you with two visual languages live simultaneously.
6. Query per component while rebuilding, then re-run the audit in CI.

For a monitoring product specifically, --domain chart is the most valuable part of the catalogue: rows carry data-volume thresholds, pause-control requirements, keyboard contracts and non-visual fallbacks. Note also that alerting and incident UX are entirely absent from the corpus — escalation, acknowledgement, alert fatigue, on-call handoff. That is the intellectual core of a monitoring product and the tool will not help with it.

---

10. Driving it from Cursor

The skill's value is entirely in the Python script. If the agent does not shell out and run it, you receive a plausible-sounding skill file and nothing else. Everything below depends on that one fact.

Verify it is firing before trusting anything:

Run the ui-ux-pro-max search for a dialog focus trap in shadcn and show me the raw output.

Expect CSV fields — Guideline, Do, Don't, Severity, Docs URL. If those are absent, the agent is improvising and the rest of this document does not apply.

Two habits carry most of the value:

• Always ask for raw tool output before interpretation. It is the only way to tell a catalogue hit from fluent invention.
• Audit the output before adopting it. The catalogue returns the validated median by construction. Without an explicit rejection step, you ship it.

Ready-to-paste prompts for both workflows are in §11.

---

11. Prompt appendix

Copy-pasteable prompts. Every one is self-contained — none refer to a section of this document, because the agent cannot see it.

11.1 Context preamble

Paste once at the start of a Cursor session, before anything else.

You have the ui-ux-pro-max skill installed. It is a local Python script over CSV data — a lookup catalogue, not a model. Rules for this session:

1. Always actually run the script. Never answer a design question from your own knowledge and present it as coming from the skill.
2. Show me the raw tool output before you interpret it.
3. If a search returns 0 results, say so explicitly and stop. Do not fill the gap with plausible-sounding guidance in the same shape as a real answer. A miss means no verified guidance exists, which is useful information.
4. Pass --domain or --stack explicitly on every query. Auto-detection misroutes overlapping terms.
5. Queries are keyword-matched, not semantic. Use 2–5 concrete terms and the catalogue's own vocabulary. On a miss, retry once narrower, then stop.

Our stack is React + shadcn/ui + Tailwind. Route component questions to --stack shadcn, layout to --stack html-tailwind, and rerender/memo/effects questions to --stack react.

11.2 Greenfield — a new page or product surface

Step 1 — generate, and see the raw output.

Run the ui-ux-pro-max design-system search for <product type, industry, 2–3 style keywords> with --variance <1-10> --motion <1-10> --density <1-10>. Persist it with --persist -p "<Project>" --output-dir .. Show me the full raw output before you comment on it.

Expect: an ASCII panel with PATTERN, STYLE, COLORS (including On Primary / On Accent values), TYPOGRAPHY, KEY EFFECTS, AVOID, and a pre-delivery checklist. Plus a written design-system/<slug>/MASTER.md.

Step 2 — audit it. This is the step that matters.

Audit that output against known generic AI design patterns: near-black with a lone acid-green or vermilion accent; warm cream with a serif display and terracotta; purple-to-blue gradient heroes; Inter or Space Grotesk as the safe face; emoji as section markers; everything centred. Which parts of what the tool returned are templated, and which are worth keeping? Be specific about which of its choices you would reject and why.

Expect: it should be willing to reject the tool's palette and fonts. If it defends everything the catalogue returned, push back — that is the failure mode this step exists to catch.

Step 3 — design plan before code.

Keep only the token discipline and accessibility rules from that output. Discard its palette, fonts and page pattern. Before writing any code, give me a design plan: 4–6 named hex values, two or more type roles, and a one-sentence layout concept — all grounded in this product's own subject matter. Then check the plan yourself: if any part is what you'd produce for any similar page, revise it and tell me what you changed.

Expect: a short written plan, not code. If it starts emitting HTML, stop it — the plan is what prevents the generic result.

Step 4 — build with contrast computed first.

Build it. Before you write any CSS, compute the WCAG contrast ratio for every foreground/background pair in the plan and show me the table. Adjust any text pair below 4.5:1 and any UI-boundary pair below 3:1, keeping the hue. Define the light palette on bare :root and redefine only the tokens for dark — never declare a colour solely inside a media query. Every accent needs a paired on-* foreground; do not hardcode white on a themed background.

Step 5 — verify by looking.

Serve it and screenshot at 1280 and 375. Confirm: no horizontal overflow (document.documentElement.scrollWidth === clientWidth), the custom fonts are actually loading rather than falling back to a system face, and the dark theme renders as a complete set rather than one theme's text on the other's ground.

11.3 Retrofit — an existing dashboard

Use this instead of 11.2 when the UI already exists. The order matters: audit before you generate, or you will argue about taste instead of defects.

Step 1 — measure what is actually wrong.

Run tools/contrast-audit.py against our globals.css and show me the full output for both light and dark. For each failure, propose a replacement hex that keeps the hue and clears the threshold, and show the new ratio. Do not change anything yet.

Expect: a pass/fail table per theme. Failures usually cluster in one or two muted tokens rather than being scattered.

Step 2 — generate a target system for an ops console.

Run the ui-ux-pro-max design-system search for "infrastructure monitoring dashboard ops console" with --density 8 --variance 3 --motion 2 --persist -p "Ops" --output-dir .. Show me the raw output, then open the generated MASTER.md and show me its Spacing Variables section specifically.

Expect: the Real-Time / Operations Landing pattern, a dark technical palette, and a --space-* table of roughly 2/4/8/12/16/24/32px. The spacing table appears only in MASTER.md, never in stdout — if the agent says there is no spacing scale, it did not open the file.

Step 3 — separate the tokens from the sales pitch.

That output includes a marketing page structure — a hero, a trial CTA, a conversion narrative. We are building an internal console, so discard all of that. Keep only the colour tokens, typography, spacing scale and anti-patterns. List exactly what you are keeping and what you are throwing away.

Step 4 — plan the token migration.

Diff our current CSS variables against MASTER.md. Produce a migration table: current value, proposed value, and every component affected. Flag any token we have that MASTER.md lacks, and any on-* foreground pair we are missing entirely. Do not edit files yet.

Expect: missing on-* pairs are the common finding. A hardcoded #fff on a themed accent is the classic dark-mode contrast bug.

Step 5 — migrate tokens, not screens.

Apply the migration by changing the CSS variables only. Do not restyle components individually — shadcn reads the variables, so the change should propagate. Then re-run the contrast audit and show me that it passes in both themes.

Step 6 — per-component work, then lock it in.

For each of these, run a --stack shadcn search and show the raw rows before you change code: chart accessibility, collapsible sidebar, data table, skeleton loading states. Then add the contrast audit to CI so it fails the build on a regression.

11.4 Monitoring-specific queries worth running

Run --domain chart for "real-time monitoring time series" and show me the full rows, including the When-NOT-to-use, data volume threshold, accessibility fallback and keyboard contract fields for each result.

Expect: the richest rows in the whole catalogue. Adopt the "do not rely on colour alone" rule verbatim — encode severity in mark shape as well as hue.

Do not bother asking it about alerting, escalation, acknowledgement, alert fatigue or on-call handoff. Measured: those return zero results. The corpus does not cover them, and a well-behaved agent will tell you so.

11.5 Recognising a miss

Signal	Meaning
CSV field names in the output (Guideline, Do, Don't, Severity, Docs URL)	Real catalogue hit
Fluent prose with no field names	The agent is improvising
"did not hit the database"	A genuine miss — correct behaviour, trust it
Advice on alerting or incident UX	Necessarily invented; nothing in the corpus covers it

If you see the second row, stop and re-run with the context preamble from 11.1.

---

12. Command reference

# install — Cursor
npm install -g ui-ux-pro-max-cli
uipro init --ai cursor            # .cursor/skills/
uipro init --ai cursor --global   # ~/.cursor/skills/

# confirm the skill is really firing (expect CSV fields, not prose)
uipro search "dialog focus trap" --stack shadcn

# generate a design system, persisted
uipro search "<product> <industry> <keywords>" --design-system \
  --variance <1-10> --motion <1-10> --density <1-10> \
  --persist -p "Project" --output-dir .

# targeted domains
uipro search "real-time monitoring time series" --domain chart
uipro search "dashboard analytics dense data"   --domain color
uipro search "editorial authoritative"          --domain typography
uipro search "error summary validation"         --domain ux

# stack guidance
uipro search "dialog focus trap"    --stack shadcn
uipro search "chart accessible"     --stack shadcn
uipro search "responsive breakpoint" --stack html-tailwind

Available domains: style, color, chart, landing, product, ux, typography, google-fonts, icons, gsap, react, web.

---

13. Summary judgement

Adopt it — as a checker. The colour data is genuinely validated (1,344/1,344 text pairs pass AA), the chart domain carries real operational engineering, and the tool refuses to fabricate on a miss. For React + shadcn + Tailwind it is at its strongest.

Do not expect it to design. It converges on the validated median by construction. Every distinctive decision in the landing page — the chart-recorder concept, the oxblood palette, the serif body, the timestamp spine — came from outside the tool. What the tool contributed was the discipline that kept those decisions accessible and consistent.

The most transferable practice from this session is not any command. It is turning the tool's own standard back on your existing work — which is how six real contrast defects were found in an unrelated production codebase in about a minute, including a primary button at 2.42:1 in dark mode.

Re-check the measurements after any uipro update. The catalogue is actively maintained; every stack row currently carries a verification date of August 2026.