UI UX Pro Max Skill

UI UX Pro Max Skill

Research Date: 2026-02-26 Source URL: https://www.uupm.cc/ GitHub Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill Version at Research: v2.2.1 License: MIT

Overview

UI UX Pro Max is an AI skill that injects design intelligence into AI coding assistants (Claude Code, Cursor, Windsurf, Kiro, GitHub Copilot, and 12 others) by bundling a searchable design database covering 67 UI styles, 96 color palettes, 57 font pairings, 25 chart types, 29 landing page patterns, and 99 UX guidelines. When activated, the skill instructs the AI to query CSV-backed design databases via a BM25+regex search engine, then generate stack-specific production code aligned with the queried design system. It targets web and mobile stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, Jetpack Compose, React Native, Flutter, shadcn/ui, HTML+Tailwind, and Tailwind standalone) and is installed either via the Claude Code Marketplace or a Node.js/Python CLI.

Problem Addressed

Key Statistics

SOURCE: GitHub API (accessed 2026-02-26)

Key Features

Design Database

• 67 UI styles spanning Minimalism, Glassmorphism, Neumorphism, Brutalism, Cyberpunk, Aurora UI, AI-Native UI, Spatial Computing interfaces, and 59 additional aesthetics
• 96 color palettes segmented by industry vertical: SaaS, Healthcare, Fintech, Beauty, E-commerce, and others
• 57 font pairings with Google Fonts integration providing curated typography combinations matched by personality (e.g., "tech/startup", "editorial", "luxury")
• 25 chart types with library recommendations for dashboard and analytics views
• 29 landing page patterns optimized for conversion across industry types
• 99 UX guidelines covering best practices, anti-patterns, and WCAG accessibility standards

SOURCE: GitHub README v2.2.1 (accessed 2026-02-26)

Design System Generation Engine (v2.0)

• Analyzes project requirements and generates a complete design system as a persistent master file
• BM25 ranking combined with regex matching selects the highest-relevance styles and patterns from CSV databases
• Outputs industry-appropriate color moods, typography personality matches, animation/interaction effect recommendations, and anti-pattern warnings
• Generates pre-delivery quality checklists specific to the target industry and stack

Multi-Assistant Distribution

• Supports 16 AI coding assistants: Claude Code, Cursor, Windsurf, Kiro, GitHub Copilot, Gemini CLI, Continue, Roo Code, Trae, Qoder, and others
• Two activation modes: Skill Mode (auto-activate on natural language UI/UX requests in Claude Code, Cursor, Windsurf) and Workflow Mode (slash command /ui-ux-pro-max [request] in Kiro, Copilot, Roo Code)
• Single CLI installer (npx uipro-cli install) handles all 16 assistants by generating platform-specific integration files

Stack Coverage

• Web: HTML + Tailwind CSS, React, Next.js, shadcn/ui, Vue, Nuxt.js, Svelte, Astro
• Mobile: SwiftUI (iOS), Jetpack Compose (Android), React Native, Flutter
• Stack-specific CSV data in data/stacks/ provides framework-appropriate component patterns

Technical Architecture

The skill is structured as a source tree that is symlinked into AI assistant configuration directories:

src/ui-ux-pro-max/
├── data/           # CSV databases: styles, colors, typography, charts, landing, UX
│   └── stacks/     # Stack-specific variant data (react, nextjs, vue, flutter, etc.)
├── scripts/        # search.py (BM25+regex engine), design generation tools
└── templates/      # Output format templates per platform
.claude/            # Claude Code integration files (CLAUDE.md entry point)
.claude-plugin/     # Claude Code Marketplace plugin manifest
.shared/            # Shared configuration for cross-assistant compatibility
cli/                # Node.js CLI source (published as uipro-cli on npm)

Activation flow in Claude Code:

1. User writes a natural language UI/UX request
2. Claude detects the skill context from .claude/CLAUDE.md (injected via Claude Code's skill loading)
3. Claude calls python3 src/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> with the appropriate domain flag (style, typography, color, landing, chart, ux, or a stack name)
4. The search engine runs BM25 ranking with regex fallback over CSV databases and returns ranked recommendations
5. Claude generates stack-specific production code incorporating the returned design tokens and guidelines
6. A master design system file is created/updated as the persistent source of truth for the project

SOURCE: CLAUDE.md raw (accessed 2026-02-26)

Installation & Usage

Claude Code Marketplace (two commands)

# Install via Claude Code Marketplace
/install-skill nextlevelbuilder/ui-ux-pro-max-skill

CLI Installer (supports all 16 assistants)

# Prerequisites: Node.js and Python 3.x
npx uipro-cli install

The CLI detects the active AI assistant environment or accepts an explicit --assistant flag and generates the correct integration files (e.g., .claude/CLAUDE.md entry, Kiro workflow YAML, Copilot instructions file).

Skill Mode Usage (Claude Code, Cursor, Windsurf)

Once installed, the skill auto-activates on natural language requests:

User: Build a SaaS dashboard landing page in Next.js with a modern glassmorphism style
Claude: [queries design database, applies BM25 ranking, generates Next.js + Tailwind code with glassmorphism tokens]

Workflow Mode Usage (Kiro, GitHub Copilot, Roo Code)

/ui-ux-pro-max Create a Flutter onboarding screen for a healthcare app with a calm, trustworthy color palette

Direct Search CLI

python3 src/ui-ux-pro-max/scripts/search.py "healthcare app" --domain color
python3 src/ui-ux-pro-max/scripts/search.py "SaaS landing" --domain landing
python3 src/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart --stack react

Relevance to Claude Code Development

Applications

• This is a Claude Code Marketplace plugin, making it a direct production example of how to structure skills for the marketplace with .claude-plugin/ manifests, CLAUDE.md entry points, and shared cross-assistant configuration in .shared/
• The BM25+regex search engine over CSV databases is a practical pattern for injecting structured domain knowledge into AI context without relying on fine-tuning or embedding pipelines
• The multi-assistant distribution approach (single repo, 16 assistants via a CLI installer) demonstrates how to package a skill for maximum ecosystem reach

Patterns Worth Adopting

• Separating design knowledge into domain-partitioned CSV databases (styles.csv, colors.csv, typography.csv) makes data independently updatable and searchable without altering the skill's reasoning logic
• Using BM25 ranking with regex fallback provides deterministic, reproducible retrieval that is simpler and more auditable than vector similarity search for structured tabular data
• Hierarchical design system persistence (master file + per-page overrides) is a reusable pattern for maintaining cross-session state in any domain where consistency across interactions matters
• The industry-specific reasoning rules (100 rules across 7 verticals) show how to encode domain constraints as structured data rather than embedding them in prompts, making them independently reviewable and updatable

Integration Opportunities

• The skill's CSV database structure and search script could be studied when building skills that need to surface structured knowledge (e.g., API pattern catalogs, security checklists, performance budgets) to Claude Code
• The .claude-plugin/ manifest format used here is directly relevant to the Claude Code plugin ecosystem that this repository (claude_skills) participates in
• The CLI installer pattern (detecting assistant type, generating integration files) could inform how multi-assistant skill distribution is handled in the claude_skills publishing workflow

References

• GitHub Repository (accessed 2026-02-26)
• GitHub API: Repository Metadata (accessed 2026-02-26)
• GitHub API: Latest Release v2.2.1 (accessed 2026-02-26)
• CLAUDE.md (raw) (accessed 2026-02-26)
• Product Website: uupm.cc (accessed 2026-02-26)

Freshness Tracking