Visual inspiration, not a benchmark. An author-supplied project recorded before this skill existed; its UI contains Vietnamese. Historical footage, not an English demo or a runtime test of the skill — see media provenance.
The flagship feature of v2.0 is the Design System Generator - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.
119 UX Guidelines - Best practices, anti-patterns, accessibility rules, resilient text layout, compact labels, and cancellable interactions
192 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)
Resilient Text and Compact UI
The guidance now covers common production failures around headings, long tokens,
chips, badges, and interrupted micro-interactions:
Balanced heading wrapping is a progressive enhancement, not a guarantee that a
specific word will remain on the last line. Designs must still work with natural
wrapping across widths, fonts, and locales.
Essential text must reflow without clipping at narrow widths, browser zoom, text
scaling, and user spacing overrides. Long URLs and identifiers may wrap safely.
Chip and tag collections should wrap or use an operable +n disclosure. A compact
label should remain whole when practical; unavoidable truncation needs an accessible
full-value path for keyboard, pointer, and touch users.
Badge meaning cannot rely on color alone. Interactive chips need native semantics,
visible focus, and programmatic state; live counts need meaningful context.
Rapid interactions may cancel animation, but the final semantic state, focus, and
content must remain correct. Timing is selected for the platform and component,
with reduced-motion preferences respected.
Style Taxonomy
The catalog contains 79 searchable styles backed by stable IDs and aliases:
Status
Count
Search behavior
Active
50
Included in normal recommendations and shown by default in the gallery
Supplemental
29
Returned for exact or explicit variant/system intent; available through the gallery status filter
Deprecated
9
Excluded from normal ranking; legacy names redirect to a canonical style or landing pattern
The active set covers 43 general visual families, 2 mobile-specific styles, 3 official platform/design systems, 1 platform material, and 1 core analytics style. Current official systems include Fluent 2, Shopify Polaris, and Adobe Spectrum; Liquid Glass is scoped as an Apple platform material, Material 3 Expressive remains a mobile Material variant, and Spectrum 2 is supplemental. Landing-page structures live in the separate 34-pattern landing dataset rather than competing with visual styles in BM25 ranking.
See styles.csv for the full taxonomy and provenance-aware metadata.
💎 Basic vs. Premium Version Comparison
Many users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow.
🟢 Basic Version (This Repository)
Fully Open Source: Perfect for individual developers, hobbyists, and standard projects.
Core UI/UX Intelligence: Full access to 79 searchable UI styles (50 active), 192 product types, color palettes, and curated font pairings.
Smart Recommendations: Built-in BM25 search engine for highly accurate design matching.
The npm package is ui-ux-pro-max-cli; it still installs the uipro command. Older uipro-cli releases are stale and should not be used for current assets.
Global Install (Available for All Projects)
uipro init --ai claude --global # Install to ~/.claude/skills/
uipro init --ai cursor --global # Install to ~/.cursor/skills/
uipro init --ai zcode --global # Install to ~/.zcode/skills/
uipro init --ai universal --global # Install to ~/.agents/skills/
Other CLI Commands
uipro versions # List available versions
uipro update # Refresh skill files from installed CLI package
uipro update --global # Refresh global skill files from installed CLI package
uipro init --offline # Compatibility flag; installs bundled templates
uipro init --dry-run # Preview install actions without writing files
uipro uninstall # Remove skill (auto-detect platform)
uipro uninstall --ai claude # Remove specific platform
uipro uninstall --global # Remove from global install
Prerequisites
Python 3.x is required for the search script (standard library only — the scripts install nothing and make no network calls).
Check if Python is installed:
python3 --version
If it is missing, install it yourself from python.org or with your OS package manager (Homebrew, apt, winget). These install steps are for you, the human user — AI agents using this skill should never install software on your machine; they are instructed to ask you instead.
The skill activates automatically when you request UI/UX work. Just chat naturally:
Build a landing page for my SaaS product
Trae: Switch to SOLO mode first. The skill will activate for UI/UX requests.
Workflow Mode (Slash Command)
Supported: Kiro, Roo Code, KiloCode
Use the slash command to invoke the skill:
/ui-ux-pro-max Build a landing page for my SaaS product
Example Prompts
Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce
Build a fintech banking app with dark theme
How It Works
You ask - Request any UI/UX task (build, design, create, implement, review, fix, improve)
Design System Generated - The AI automatically generates a complete design system using the reasoning engine
Smart recommendations - Based on your product type and requirements, it finds the best matching styles, colors, and typography
Code generation - Implements the UI with proper colors, fonts, spacing, and best practices
Pre-delivery checks - Validates against common UI/UX anti-patterns
Supported Stacks
The skill provides stack-specific guidelines for:
Category
Stacks
Web (HTML)
HTML + Tailwind (default)
React Ecosystem
React, Next.js, shadcn/ui
Vue Ecosystem
Vue, Nuxt.js, Nuxt UI
Angular
Angular
PHP
Laravel (Blade, Livewire, Inertia.js)
Other Web
Svelte, Astro, Three.js
Desktop
JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP
iOS
SwiftUI
Android
Jetpack Compose
Cross-Platform
React Native, Flutter
Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.
Examples
Before/after: ops dashboard
A plain ops dashboard (before) restyled using only the design system UI UX Pro Max generated for it (after), from search.py "internal operations dashboard" --design-system --density 8 --motion 3 --variance 4.
Illustrative, community-contributed example; not an official demo, benchmark, or runtime test of the skill.
Design System Command (Advanced)
For direct access to the design system generator:
Note: If you installed via Continue, replace .claude/skills/ with .continue/skills/ in the commands below. For Droid (Factory), use .factory/skills/. For ZCode, use .zcode/skills/. For Amazon Q Developer, use .amazonq/skills/ (Amazon Q only auto-loads the rule at .amazonq/rules/ui-ux-pro-max.md; the data and scripts under .amazonq/skills/ are files the rule points to).
Web-stack search is version-aware. Queries without an older major return current,
active guidance. Explicit legacy terms or older majors (for example, Svelte 4
or Next.js 15) return only curated legacy rows, labeled by Status and
Applies To; when no matching legacy guidance is curated, search returns no
results instead of mixing framework generations.
Persist Design System (Master + Overrides Pattern)
Save your design system to files for hierarchical retrieval across sessions:
# Generate and persist to design-system/myapp/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# Also create a page-specific override file
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
This creates a design-system/ folder structure:
design-system/
└── myapp/ # One folder per project (slug of -p "MyApp")
├── MASTER.md # Global Source of Truth (colors, typography, spacing, components)
└── pages/
└── dashboard.md # Page-specific overrides (only deviations from Master)
How hierarchical retrieval works:
When building a specific page (e.g., "Checkout"), first check design-system/[project-slug]/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/[project-slug]/MASTER.md exclusively
Context-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/[project-slug]/MASTER.md.
Also check if design-system/[project-slug]/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
Architecture & Contributing
For Users
The codebase has been restructured to use a template-based generation system. All platform-specific files (.cursor/, .windsurf/, .kiro/, .factory/, etc.) are now generated dynamically by the CLI.
This ensures you get the latest templates bundled with the installed CLI package and the correct file structure for your AI assistant. Update the npm package first when a new release is published.
For Contributors
If you want to contribute to this project:
# 1. Clone the repository
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
# 2. Understand the structure
src/ui-ux-pro-max/ # Source of truth (data, scripts, templates)
cli/ # CLI installer (generates files from templates)
.claude/ # Local dev/test for Claude Code skill
.factory/ # Local dev/test for Droid (Factory) skill
# 3. Make changes in src/ui-ux-pro-max/
# - data/*.csv → Database files
# - scripts/*.py → Search engine & design system
# - templates/ → Platform-specific templates
# 4. Sync to CLI and test locally
cd cli
npm run sync:assets
npm run check:assets
npm run verify:data
npm run typecheck
# 5. Build and test CLI
# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.
npm run build
node dist/index.js init --ai claude --offline # Test in a temp folder
node dist/index.js init --ai claude --dry-run # Preview install actions (no writes)
# 6. Create PR (never push directly to main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create
See CLAUDE.md for detailed development guidelines.
Catalog provenance and refresh
The committed catalog summary currently records 1,934 approved Google Fonts
plus 8 review exclusions that are not promoted without matching official
license metadata. The icon guidance remains 105 curated rows (100 direct
Phosphor web imports plus React Native/fallback guidance); the separate
1,512-icon upstream Phosphor manifest validates names,
weights, and React/SSR imports without flooding search results with the entire
upstream package.
Ordinary development and pull-request CI are network-independent. Run the full
offline gate, including snapshot hashes and generated count validation, with:
npm --prefix cli run verify:data
# Or check only the generated catalog summary:
npm --prefix cli run validate:catalog-summary
Refresh normalization can also be exercised entirely offline against the
committed fixtures. Outputs go to a temporary candidate directory and never
replace canonical data:
Live upstream refresh is intentionally isolated in the refresh-catalogs.yml
workflow, scheduled for Mondays at 03:17 UTC and also available on demand.
Configure GOOGLE_FONTS_API_KEY as a GitHub Actions secret, then run and
download its review artifact:
gh workflow run refresh-catalogs.yml
run_id="$(gh run list --workflow refresh-catalogs.yml --limit 1 --json databaseId --jq '.[0].databaseId')"
gh run watch "$run_id"
gh run download "$run_id" --name "catalog-refresh-review-$run_id"
The workflow reads the Google Fonts Developer API and pinned official Phosphor
packages, writes candidates and unified diffs to an artifact, and has read-only
repository permissions. It never commits, pushes, opens a PR, or merges. Review
the change reports, exclusions, licenses, relevance metrics, and offline gate
before manually promoting candidate files into src/ui-ux-pro-max/data/.
Automated Releases
This repository uses semantic-release with Conventional Commits to create GitHub releases automatically:
dev branch creates beta GitHub prereleases such as 2.6.0-beta.1.
main branch creates official stable GitHub releases such as 2.6.0.
Release notes and CHANGELOG.md are generated from Conventional Commit messages. Version numbers are synchronized across skill.json, .claude-plugin/plugin.json, .claude-plugin/marketplace.json, cli/package.json, and cli/package-lock.json during release preparation.
Use these commit types for correct version bumps:
fix: -> patch release
feat: -> minor release
feat!: or BREAKING CHANGE: -> major release
The release workflow uses the default GITHUB_TOKEN for GitHub releases and the repository NPM_TOKEN secret to publish ui-ux-pro-max-cli to npm.
Troubleshooting
Claude Code reports response exceeded the ... output token maximum
This is a limit on a single Claude Code response, not an error in the UI/UX Pro Max installer or search scripts. First, ask Claude to split the task into smaller steps and write large results to files incrementally.
If you genuinely need a larger single response and the active model supports it, set Claude Code's output-token limit before starting a new session. For example:
# macOS, Linux, or WSL
export CLAUDE_CODE_MAX_OUTPUT_TOKENS="64000"
claude
# Windows PowerShell
$env:CLAUDE_CODE_MAX_OUTPUT_TOKENS = "64000"
claude
Shell environment changes only apply to programs launched from that shell, so restart Claude Code after setting the variable. Claude Code clamps values above the active model's output limit; model and provider caps vary. Increasing this value can also increase latency and usage, and reduces the effective context available before auto-compaction. See the official Claude Code environment-variable reference.
uipro: unknown command 'uninstall' or unknown command 'update'
Your installed version of ui-ux-pro-max-cli is outdated. Update it and retry:
uipro uninstall says "No installed AI skill directories detected"
The skill was installed in a different directory than where you're running the command. Either:
# Option A — run from the project root where you originally installed it
cd /path/to/your/project
uipro uninstall
# Option B — remove the global install
uipro uninstall --global
# Option C — remove manually
rm -rf .claude/skills/ui-ux-pro-max # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max # Antigravity / Codex
Claude.ai's "Upload a skill" dialog says "Zip contains too many files (maximum 200)"
Do not upload the full GitHub repository ZIP. It is a development checkout that includes source code, CLI assets, documentation, previews, and multiple bundled skills, so it exceeds Claude's 200-file upload limit. It is not a Claude skill upload artifact, and this project does not currently publish a separate manual-upload ZIP for Claude.ai.
Claude Marketplace install fails with "Zip file contains a symbolic link"
This is a known issue with versions prior to v2.5.1. The repository used symlinks internally which some installation tools can't handle. Fix: use the CLI installer instead:
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
Or wait for the next release where this is resolved.
npm install -g ui-ux-pro-max-cli fails with permission error
Use a Node version manager (recommended), or skip the global install entirely:
# npx without installing globally
npx ui-ux-pro-max-cli init --ai claude
Python not found when running design system commands
The search scripts require Python 3.x. Install it manually from python.org or with your OS package manager (Homebrew, apt, winget). AI agents should not install it for you — they are instructed to ask you instead.
Design system output is cut off / fields truncated
Human-readable output truncates long fields at 300 characters. Use --json to get the full, untruncated data:
