hub / github.com/nextlevelbuilder/ui-ux-pro-max-skill

github.com/nextlevelbuilder/ui-ux-pro-max-skill @v2.10.0 sqlite

repository ↗ · DeepWiki ↗ · release v2.10.0 ↗

401 symbols 1,282 edges 46 files 300 documented · 75%

README

UI UX Pro Max

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.

If you find this useful, consider supporting the project:

Other projects

NextLevelBuilder.io | GoClaw.sh | ClaudeKit.cc | TOSE.sh

What's New in v2.0

Intelligent Design System Generation

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.

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|     Sections:                                                                          |
|       1. Hero                                                                          |
|       2. Services                                                                      |
|       3. Testimonials                                                                  |
|       4. Booking                                                                       |
|       5. Contact                                                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: Excellent | Accessibility: WCAG AA                                    |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|     Background: #FFF5F5 (Warm White)                                                   |
|     Text:       #2D3436 (Charcoal)                                                     |
|     Notes: Calming palette with gold accents for luxury feel                           |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|     Best For: Luxury brands, wellness, beauty, editorial                               |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  KEY EFFECTS:                                                                          |
|     Soft shadows + Smooth transitions (200-300ms) + Gentle hover states                |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients       |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Hover states with smooth transitions (150-300ms)                               |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
|                                                                                        |
+----------------------------------------------------------------------------------------+

How Design System Generation Works

┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (161 categories)                    │
│     • Style recommendations (67 styles)                         │
│     • Color palette selection (161 palettes)                    │
│     • Landing page patterns (24 patterns)                       │
│     • Typography pairing (57 font combinations)                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. REASONING ENGINE                                            │
│     • Match product → UI category rules                         │
│     • Apply style priorities (BM25 ranking)                     │
│     • Filter anti-patterns for industry                         │
│     • Process decision rules (JSON conditions)                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. COMPLETE DESIGN SYSTEM OUTPUT                               │
│     Pattern + Style + Colors + Typography + Effects             │
│     + Anti-patterns to avoid + Pre-delivery checklist           │
└─────────────────────────────────────────────────────────────────┘

161 Industry-Specific Reasoning Rules

The reasoning engine includes specialized rules for:

Category	Examples
Tech & SaaS	SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform
Finance	Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool
Healthcare	Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder
E-commerce	General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery
Services	Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment
Creative	Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor
Lifestyle	Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker
Emerging Tech	Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet

Each rule includes: - Recommended Pattern - Landing page structure - Style Priority - Best matching UI styles - Color Mood - Industry-appropriate palettes - Typography Mood - Font personality matching - Key Effects - Animations and interactions - Anti-Patterns - What NOT to do (e.g., "AI purple/pink gradients" for banking)

Features

67 UI Styles - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
161 Color Palettes - Industry-specific palettes aligned 1:1 with the 161 product types
57 Font Pairings - Curated typography combinations with Google Fonts imports
25 Chart Types - Recommendations for dashboards and analytics
22 Tech Stacks - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
99 UX Guidelines - Best practices, anti-patterns, and accessibility rules
161 Reasoning Rules - Industry-specific design system generation (NEW in v2.0)

Available Styles (67)

General Styles (49)

#	Style	Best For
1	Minimalism & Swiss Style	Enterprise apps, dashboards, documentation
2	Neumorphism	Health/wellness apps, meditation platforms
3	Glassmorphism	Modern SaaS, financial dashboards
4	Brutalism	Design portfolios, artistic projects
5	3D & Hyperrealism	Gaming, product showcase, immersive
6	Vibrant & Block-based	Startups, creative agencies, gaming
7	Dark Mode (OLED)	Night-mode apps, coding platforms
8	Accessible & Ethical	Government, healthcare, education
9	Claymorphism	Educational apps, children's apps, SaaS
10	Aurora UI	Modern SaaS, creative agencies
11	Retro-Futurism	Gaming, entertainment, music platforms
12	Flat Design	Web apps, mobile apps, startup MVPs
13	Skeuomorphism	Legacy apps, gaming, premium products
14	Liquid Glass	Premium SaaS, high-end e-commerce
15	Motion-Driven	Portfolio sites, storytelling platforms
16	Micro-interactions	Mobile apps, touchscreen UIs
17	Inclusive Design	Public services, education, healthcare
18	Zero Interface	Voice assistants, AI platforms
19	Soft UI Evolution	Modern enterprise apps, SaaS
20	Neubrutalism	Gen Z brands, startups, Figma-style
21	Bento Box Grid	Dashboards, product pages, portfolios
22	Y2K Aesthetic	Fashion brands, music, Gen Z
23	Cyberpunk UI	Gaming, tech products, crypto apps
24	Organic Biophilic	Wellness apps, sustainability brands
25	AI-Native UI	AI products, chatbots, copilots
26	Memphis Design	Creative agencies, music, youth brands
27	Vaporwave	Music platforms, gaming, portfolios
28	Dimensional Layering	Dashboards, card layouts, modals
29	Exaggerated Minimalism	Fashion, architecture, portfolios
30	Kinetic Typography	Hero sections, marketing sites
31	Parallax Storytelling	Brand storytelling, product launches
32	Swiss Modernism 2.0	Corporate sites, architecture, editorial
33	HUD / Sci-Fi FUI	Sci-fi games, space tech, cybersecurity
34	Pixel Art	Indie games, retro tools, creative
35	Bento Grids	Product features, dashboards, personal
36	Spatial UI (VisionOS)	Spatial computing apps, VR/AR
37	E-Ink / Paper	Reading apps, digital newspapers
38	Gen Z Chaos / Maximalism	Gen Z lifestyle, music artists
39	Biomimetic / Organic 2.0	Sustainability tech, biotech, health
40	Anti-Polish / Raw Aesthetic	Creative portfolios, artist sites
41	Tactile Digital / Deformable UI	Modern mobile apps, playful brands
42	Nature Distilled	Wellness brands, sustainable products
43	Interactive Cursor Design	Creative portfolios, interactive
44	Voice-First Multimodal	Voice assistants, accessibility apps
45	3D Product Preview	E-commerce, furniture, fashion
46	Gradien

Extension points exported contracts — how you extend this code

Release (Interface)

(no doc)

cli/src/types/index.ts

Asset (Interface)

(no doc)

cli/src/types/index.ts

InstallConfig (Interface)

(no doc)

cli/src/types/index.ts

PlatformConfig (Interface)

(no doc)

cli/src/types/index.ts

DetectionResult (Interface)

(no doc)

cli/src/utils/detect.ts

Core symbols most depended-on inside this repo

called by 47

cli/assets/skills/design-system/scripts/generate-slide.py

adjustBrightness

called by 9

cli/assets/skills/brand/scripts/sync-brand-to-tokens.cjs

add_components

called by 9

cli/assets/skills/ui-styling/scripts/shadcn_add.py

called by 9

cli/assets/skills/design/scripts/cip/core.py

add_colors

called by 8

cli/assets/skills/ui-styling/scripts/tailwind_config_gen.py

exists

called by 8

cli/scripts/sync-assets.mjs

called by 7

cli/assets/scripts/core.py

section_header

called by 7

cli/assets/scripts/design_system.py

Shape

Function 250

Method 121

Class 16

Interface 10

Route 4

Languages

Python71%

TypeScript29%

Modules by API surface

cli/assets/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py33 symbols

cli/assets/skills/ui-styling/scripts/tests/test_shadcn_add.py28 symbols

src/ui-ux-pro-max/scripts/design_system.py21 symbols

cli/assets/scripts/design_system.py21 symbols

cli/assets/skills/ui-styling/scripts/tailwind_config_gen.py20 symbols

cli/assets/skills/design-system/scripts/slide_search_core.py18 symbols

cli/assets/skills/design-system/scripts/html-token-validator.py15 symbols

cli/src/utils/template.ts14 symbols

cli/src/utils/github.ts13 symbols

src/ui-ux-pro-max/data/_sync_all.py11 symbols

cli/assets/skills/design/scripts/cip/core.py11 symbols

cli/assets/skills/design-system/scripts/generate-slide.py11 symbols

Dependencies from manifests, versioned

@types/bun1.1.14 · 1×

@types/node22.10.1 · 1×

@types/prompts2.4.9 · 1×

chalk5.3.0 · 1×

commander12.1.0 · 1×

ora8.1.1 · 1×

prompts2.4.2 · 1×

typescript5.7.2 · 1×

pytest8.0.0 · 1×

pytest-cov4.1.0 · 1×

pytest-mock3.12.0 · 1×

For agents

$ claude mcp add ui-ux-pro-max-skill \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact