escapeboy/ai-prompts/08-ui-ux-development

UI/UX Pro Max Skill Documentation

Skill Name: ui-ux-pro-max Command: /ui-ux-pro-max Category: UI/UX Design & Implementation Token Savings: 40-60% for UI tasks through specialized context Upstream: nextlevelbuilder/ui-ux-pro-max-skill · synced to v2.0 catalog `verifiedAt` 2026-08-13 Sync marker: catalog counts below are from data/catalog-summary.json. If upstream verifiedAt is newer than 2026-08-13, this guide has drifted — re-sync counts + the query contract.

Overview

UI/UX Pro Max is a data-backed design-intelligence skill. As of v2.0 it is no longer a static prose catalog — it ships a local searchable dataset queried by a Python tool (search.py), plus a reasoning engine that assembles a full design system on demand.

Catalog counts (v2.0, `verifiedAt` 2026-08-13):

• 88 UI styles (79 searchable, 50 active, 29 supplemental, 9 deprecated) — Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, etc.
• 192 product palettes + 192 reasoning profiles (one exact reasoning profile per product archetype)
• 74 font pairings drawn from 1,934 licensed Google Fonts (unlicensed families excluded by policy)
• 119 UX guidelines organised into 10 priority categories (accessibility → charts)
• 105 curated icons (+ 1,512 upstream Phosphor icons)
• 25 chart types, 17 GSAP motion presets
• 22 technology stacks with 1,260 stack-specific guidelines (React, Next.js, Vue, Svelte, Angular, SwiftUI, React Native, Flutter, Laravel/Blade, html-tailwind, shadcn/ui, …)

Why the numbers jumped from the old guide (50 styles / 21 palettes / 20 charts / 9 stacks): the previous version of this doc was derived from an older release. v2.0 replaced the hand-written catalog with a validated dataset (data-provenance.json, sha256-snapshotted sources, a promotion policy requiring explicit approval for family-set changes) and a search.py query layer. The conceptual sections lower in this doc (design-system format, component patterns, examples) remain valid; the counts and the query contract are the parts that go stale.

v2.0 Architecture: The Search Tool & Query Contract

v2.0's core is search.py — a zero-dependency Python 3 tool that queries the local dataset. This is the part that changed most from the old guide. Invoke it by full path (it lives in the skill dir, not the project):

python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" "<query>" --domain <domain>

Query contract — pick the smallest mode that fits:

1. New project / page / system-wide direction → --design-system (aggregates product+style+color+typography, applies reasoning rules, returns pattern/style/colors/typography/effects + anti-patterns).
2. Targeted concern or component bug → one explicit --domain (ux, style, product, typography, color, icons, gsap, chart).
3. Known stack → --stack <name> for implementation detail; add a domain search only for a distinct design concern.

Rules that matter for good results:

• Build each query around one dominant intent, 2–5 meaningful terms + one constraint (product/platform/interaction).
• Verify the returned domain, top result, and product/platform fit before applying. Retry once with a narrower rewrite; if still empty/off-topic, state "no verified match" and label any general advice as fallback. Never persist unverified output.
• Never assume a stack. Detect it (package.json, pubspec.yaml, *.xcodeproj/Package.swift, composer.json, RN markers); ask if undetectable. A hardcoded default silently misroutes every recommendation.
• Accessibility: search one observable outcome at a time with explicit WCAG-outcome terms (e.g. "error summary validation" --domain ux, then "decorative icon aria hidden" --domain icons), then the stack. Don't accept a generic a11y result for a specific criterion.

Rule categories by priority (search --domain ux unless noted; full text in the skill's references/quick-reference.md, app-polish + pre-delivery checklist in references/pro-rules.md):

Persisting a design system across sessions: add --persist and always --output-dir <project-root> (master + per-page overrides pattern). Without --output-dir files land wherever the tool ran.

Companion CLI (optional, no Claude needed): npx ui-ux-pro-max-cli — same dataset, standalone. Useful for a quick style/palette lookup outside an agent session.

Adoption note for our fleet: upstream ships Python scripts/ and (in cli/) an npm package. Per our supply-chain posture, if we install it, install it as a plugin we've read, not blindly — the search.py is read-only data querying (safe), but audit before trusting any scripts/ on a shared host. For most of our Laravel + Blade work, the `--stack laravel` / `--stack html-tailwind` guidelines + the priority table above are the highest-value slice; the reasoning engine matters mainly for greenfield pages.

When to Use

Use this skill when you need to:

Design Phase

• Create design systems from scratch
• Generate color palettes with accessibility compliance
• Select appropriate font pairings
• Plan UI architecture and component structure

Implementation Phase

• Build dashboards, landing pages, admin panels
• Create e-commerce interfaces
• Implement SaaS applications
• Design mobile app UIs

Enhancement Phase

• Review existing UI for consistency
• Fix accessibility issues
• Improve responsive behavior
• Optimize color contrast and spacing

Specific Elements

• Design buttons, modals, navbars, sidebars
• Create cards, tables, forms, charts
• Implement animations and transitions
• Add hover states, shadows, gradients

Capabilities

1. Design System Generation

Creates complete design systems including:

## Design System: [Project Name]
 
### Style Philosophy
-Primary style: [e.g., Flat Design, Glassmorphism]
-Visual approach: [minimalist, bold, professional]
-Animation strategy: [subtle, pronounced, none]
 
### Color Palette
-Primary: #3B82F6 (blue-600)
-Secondary: #60A5FA (blue-400)
-CTA: #F97316 (orange-600)
-Background: #F8FAFC (slate-50)
-Text: #1E293B (slate-900)
-Success: #10B981 (green-500)
-Warning: #F59E0B (amber-500)
-Error: #EF4444 (red-500)
 
### Typography
-Headings: Inter (font-weight: 700)
-Body: Inter (font-weight: 400)
-Code: 'Fira Code' (monospace)
 
### Spacing Scale
-xs: 0.25rem (4px)
-sm: 0.5rem (8px)
-md: 1rem (16px)
-lg: 1.5rem (24px)
-xl: 2rem (32px)
 
### Components
-Buttons: Rounded-lg, shadow-sm, transition-all 200ms
-Cards: White background, shadow-md, border radius 12px
-Inputs: Border slate-300, focus:ring-2 ring-primary

2. Component Implementation

Generates production-ready code with:

• Accessibility: ARIA labels, keyboard navigation, focus states
• Responsiveness: Mobile-first with Tailwind breakpoints
• Dark Mode: Full dark mode support with proper contrast
• Performance: Optimized DOM operations, lazy loading
• Security: XSS prevention, safe DOM manipulation

3. Integration Support

Works seamlessly with:

• shadcn/ui MCP: Searches and retrieves shadcn/ui components
• Tailwind CSS: Full utility class library
• Alpine.js: Reactive JavaScript for interactivity
• Livewire: Server-side rendering with reactive components

Usage Examples

Example 1: Create Dashboard from Scratch

/ui-ux-pro-max design a professional SaaS dashboard for a geospatial alert system.
Use flat design style with blue as primary color. Include stats cards, recent activity,
and quick actions. Support dark mode and Bulgarian/English languages.

What the agent does:

1. Generates complete design system document
2. Creates responsive layout with top navigation
3. Implements stats cards with icons and data
4. Adds empty states for no-data scenarios
5. Includes dark mode toggle with localStorage persistence
6. Sets up language switcher
7. Ensures WCAG 2.1 AA accessibility compliance

Deliverables:

• Design system documentation (MASTER.md)
• Layout template (layouts/dashboard.blade.php)
• Dashboard view (dashboard.blade.php)
• Translation files (en/dashboard.php, bg/dashboard.php)
• Tailwind configuration
• Alpine.js components

Example 2: Fix Existing UI Issues

/ui-ux-pro-max review the dashboard at /resources/views/dashboard.blade.php
and fix any accessibility, responsiveness, or design consistency issues

What the agent does:

1. Audits existing code for issues
2. Checks color contrast ratios
3. Validates responsive breakpoints
4. Reviews keyboard navigation
5. Ensures consistent spacing
6. Fixes any violations

Example 3: Implement Specific Component

/ui-ux-pro-max create a modal component for user profile editing with form validation,
dark mode support, and smooth animations

What the agent does:

1. Generates modal HTML structure
2. Adds Alpine.js for open/close logic
3. Implements form validation
4. Styles with Tailwind (light + dark mode)
5. Adds transition animations
6. Ensures accessibility (focus trap, Escape key)

Key Features

Built-in Design Knowledge

Styles Library (88 total / 79 searchable / 50 active — the list below is an illustrative subset; query the full catalog via --domain style):

• Glassmorphism - Frosted glass effects
• Claymorphism - 3D clay-like surfaces
• Minimalism - Clean, simple, whitespace
• Brutalism - Raw, bold, unconventional
• Neumorphism - Soft UI with subtle shadows
• Bento Grid - Card-based layouts
• Flat Design - 2D, bold colors, simple shapes
• Material Design - Google's design language
• Skeuomorphism - Real-world metaphors

Color Palettes (192 product palettes + reasoning profiles — subset below; query via --domain color or --design-system):

• Professional Blues - Trust, corporate
• Vibrant Gradients - Modern, energetic
• Earth Tones - Natural, calming
• Monochrome - Elegant, timeless
• Neon Accents - Bold, attention-grabbing
• Pastel Soft - Gentle, friendly
• High Contrast - Accessible, clear

Font Pairings (74 curated pairings from 1,934 licensed Google Fonts — subset below; query via --domain typography):

• Playfair Display + Source Sans Pro (Editorial)
• Montserrat + Merriweather (Modern Professional)
• Inter + Fira Code (Tech SaaS)
• Raleway + Lato (Clean Minimal)
• Roboto Slab + Open Sans (Corporate)

Technology Stack Support