# Install the CLI globally
npm install -g uipro-cli
 
# Add the skill to your project
npx uipro-cli install
 
# Or install globally
npx uipro-cli install --global

# Clone the repository
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
 
# Install dependencies
pip install -r requirements.txt
 
# Run the design system generator
python main.py

cp SKILL.md /your-project/SKILL.md

from uiuxpro import DesignSystemGenerator
# Initialize the generator
generator = DesignSystemGenerator()
# Generate a complete design system from a description
result = generator.generate(
    description="A landing page for a luxury beauty spa",
    stack="react",           # react | nextjs | astro | vue | html
    mode="light"             # light | dark | auto
)
print(result.pattern)        # Landing page structure
print(result.style)          # UI style recommendation
print(result.colors)         # Color palette dict
print(result.typography)     # Font pairing + import URL
print(result.effects)        # Animations and interactions
print(result.anti_patterns)  # What to avoid
print(result.checklist)      # Pre-delivery gates

from uiuxpro import ReasoningEngine
engine = ReasoningEngine()
# Find rules for a product type
rules = engine.search("fintech payment app")
for rule in rules:
    print(rule.category)       # e.g. "Fintech/Crypto"
    print(rule.pattern)        # Recommended page pattern
    print(rule.style_priority) # Ordered list of styles
    print(rule.color_mood)     # Palette keywords
    print(rule.anti_patterns)  # e.g. ["playful fonts", "neon colors"]
# Get all rules for a category
all_healthcare = engine.get_by_category("Healthcare")

from uiuxpro import StyleLibrary
styles = StyleLibrary()
# Get all 67 styles
all_styles = styles.list_all()
# Find styles by keyword
matching = styles.search("glass transparent blur")
# Get full style spec
glassmorphism = styles.get("Glassmorphism")
print(glassmorphism.keywords)       # ["frosted glass", "transparency", ...]
print(glassmorphism.best_for)       # ["SaaS dashboards", "tech products"]
print(glassmorphism.css_variables)  # CSS custom properties
print(glassmorphism.tailwind_config) # Tailwind configuration

from uiuxpro import ColorEngine
colors = ColorEngine()
# Get palette for a product type
palette = colors.get_for_product("medical clinic")
print(palette.primary)     # "#2B7A9F"
print(palette.secondary)   # "#E8F4FD"
print(palette.cta)         # "#0066CC"
print(palette.background)  # "#FFFFFF"
print(palette.text)        # "#1A2B3C"
print(palette.notes)       # "Clinical trust with human warmth"
# Get palette by mood
calm_palettes = colors.get_by_mood("calming")
luxury_palettes = colors.get_by_mood("luxury")

from uiuxpro import TypographyEngine
typography = TypographyEngine()
# Get font pairing for a mood
pairing = typography.get_for_mood("elegant sophisticated")
print(pairing.heading)      # "Cormorant Garamond"
print(pairing.body)         # "Montserrat"
print(pairing.google_url)   # Google Fonts import URL
print(pairing.css_import)   # @import statement
# Get all pairings for a tech stack
react_pairings = typography.get_for_stack("react")

# Generate a design system interactively
npx uipro-cli generate
 
# Generate for a specific product type
npx uipro-cli generate --product "saas dashboard" --stack nextjs
 
# List all 67 UI styles
npx uipro-cli styles list
 
# Get style details
npx uipro-cli styles get glassmorphism
 
# Search reasoning rules
npx uipro-cli rules search "e-commerce luxury"
 
# List all color palettes
npx uipro-cli colors list
 
# Get font pairings
npx uipro-cli fonts list
npx uipro-cli fonts get --mood "tech modern"
 
# Output design system as JSON
npx uipro-cli generate --product "restaurant booking" --output json
 
# Output as markdown
npx uipro-cli generate --product "portfolio site" --output markdown

from uiuxpro import DesignSystemGenerator
gen = DesignSystemGenerator()
ds = gen.generate(
    description="B2B SaaS analytics dashboard for enterprise teams",
    stack="react",
    tech_details={"component_library": "shadcn/ui", "css": "tailwindcss"}
)
# Result:
# Pattern:   "Data-First + Progressive Disclosure"
# Style:     "Glassmorphism" or "Bento Grid"
# Colors:    Primary #6366F1 (Indigo), CTA #8B5CF6 (Violet)
# Fonts:     Inter / Inter (unified, high legibility)
# Effects:   Subtle card shadows, smooth data transitions 200ms
# Avoid:     Decorative animations, overly complex gradients

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366F1',
          50: '#EEF2FF',
          500: '#6366F1',
          900: '#312E81',
        },
        cta: '#8B5CF6',
        surface: 'rgba(255,255,255,0.05)',
      },
      backdropBlur: {
        xs: '2px',
      },
      boxShadow: {
        glass: '0 8px 32px rgba(99,102,241,0.15)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

ds = gen.generate(
    description="Luxury wellness spa booking and services landing page",
    stack="html",
    tech_details={"css": "tailwindcss"}
)
# Auto-generates the full CSS variables block:
print(ds.css_variables)

:root {
  /* Soft UI Evolution - Serenity Spa */
  --color-primary: #E8B4B8;      /* Soft Pink */
  --color-secondary: #A8D5BA;    /* Sage Green */
  --color-cta: #D4AF37;          /* Gold */
  --color-background: #FFF5F5;   /* Warm White */
  --color-text: #2D3436;         /* Charcoal */
 
  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
 
  /* Effects */
  --shadow-soft: 6px 6px 12px #d1c4c5, -6px -6px 12px #ffffff;
  --transition-base: 200ms ease-in-out;
  --border-radius-organic: 20px 60px 30px 50px;
}

ds = gen.generate(
    description="Personal finance tracker with budgeting and investment tracking",
    stack="react-native",
)
# Anti-patterns automatically flagged for finance:
print(ds.anti_patterns)
# [
#   "Playful rounded fonts (use geometric sans)",
#   "Bright neon colors (erode trust)",
#   "AI purple/pink gradients",
#   "Excessive animations on financial data",
#   "Gamification elements on serious financial actions"
# ]
print(ds.checklist)
# [
#   "✓ WCAG AA contrast on all number displays",
#   "✓ Currency formatted with locale awareness",
#   "✓ Error states are clear and actionable",
#   "✓ Loading states on all async operations",
#   "✓ Biometric auth UI integrated",
#   "✓ No emojis as primary icons — use Lucide or SF Symbols",
# ]

from uiuxpro import DesignSystemGenerator, StackExporter
gen = DesignSystemGenerator()
ds = gen.generate(
    description="AI-powered recruitment platform for enterprise HR teams",
    stack="nextjs",
    tech_details={
        "component_library": "shadcn/ui",
        "css": "tailwindcss",
        "icons": "lucide-react"
    }
)
# Export as Next.js-ready files
exporter = StackExporter(ds, stack="nextjs")
exporter.write_all(output_dir="./src/design-system/")
# Generates:
# ./src/design-system/tokens.css        — CSS custom properties
# ./src/design-system/tailwind.config.js — Tailwind configuration
# ./src/design-system/typography.ts     — Font configuration
# ./src/design-system/colors.ts         — Color tokens as TypeScript
# ./src/design-system/README.md         — Design decisions + rationale

ACCESSIBILITY
[ ] No emojis as icons — use SVG (Heroicons / Lucide / Phosphor)
[ ] cursor-pointer on all clickable elements
[ ] Hover states with smooth transitions (150–300ms)
[ ] Light mode: text contrast ratio 4.5:1 minimum
[ ] Dark mode: text contrast ratio 4.5:1 minimum
[ ] Focus states visible for keyboard navigation
[ ] prefers-reduced-motion respected
[ ] ARIA labels on icon-only buttons
 
RESPONSIVE
[ ] Mobile: 375px breakpoint tested
[ ] Tablet: 768px breakpoint tested
[ ] Desktop: 1024px breakpoint tested
[ ] Wide: 1440px breakpoint tested
 
PERFORMANCE
[ ] Images use next-gen formats (WebP / AVIF)
[ ] Fonts loaded with font-display: swap
[ ] No layout shift on font load (reserve space)
[ ] Animations use transform/opacity only (no layout props)
 
INTERACTION
[ ] Loading states on all async actions
[ ] Error states are clear and actionable
[ ] Empty states are designed (not blank)
[ ] Success feedback on form submissions

# Ensure npm global bin is in PATH
export PATH="$(npm bin -g):$PATH"
 
# Or use npx directly
npx uipro-cli generate

# Ensure you're in the project directory with venv active
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python main.py

# The engine falls back to closest category match
# Inspect the match score to verify
result = engine.search("autonomous drone delivery fleet")
print(result[0].score)      # BM25 relevance score
print(result[0].category)   # Matched category
print(result[0].fallback)   # True if approximate match

# Get only the theme extension, not the full config
theme_extension = ds.tailwind_theme_extension  # dict, not full config
# Merge manually into your existing tailwind.config.js
import json
print(json.dumps(theme_extension, indent=2))