UI UX Pro Max Skill

UI UX Pro Max Skill

Skill by ara.so — Daily 2026 Skills collection.

UI UX Pro Max is an AI skill that injects design intelligence into coding agents — giving them 161 industry-specific reasoning rules, 67 UI styles, 57 font pairings, 161 color palettes, and pre-delivery checklists to produce professional, accessible, conversion-optimized interfaces on the first attempt.

Installation

Via CLI (Recommended)

# 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

Via Python (Direct)

# 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

Manual SKILL.md Integration

Copy the generated SKILL.md into your project root so agents like Claude Code, Cursor, Codex, or Windsurf automatically pick it up:

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

Core Concepts

Design System Generator

When you describe a product, the skill runs a multi-domain search across:

Output: Complete Design System

Every generation produces:

• Pattern — Page structure (sections, CTA placement)
• Style — Visual language with keywords
• Colors — Primary, secondary, CTA, background, text
• Typography — Font pairing + Google Fonts URL
• Key Effects — Animations and interactions
• Anti-Patterns — What to avoid for this industry
• Pre-Delivery Checklist — Accessibility and UX gates

Python API Usage

Basic Design System Generation

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

Query Reasoning Rules

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")

Style Lookup

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

Color Palette Selection

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")

Typography Pairing

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")

CLI Commands

# 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

Real-World Examples

Example 1: React SaaS Dashboard

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

Generated Tailwind config from ds.tailwind_config:

// 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'],
      },
    },
  },
}

Example 2: Wellness/Spa Landing Page

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)

Output 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;
}

Example 3: Fintech/Banking App

ds = gen.generate(