ui-ux-pro-max-skill

What this skill does

# UI UX Pro Max Skill

> Skill by [ara.so](https://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)

```bash
# 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)

```bash
# 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:

```bash
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:

| Domain | Count | Purpose |
|--------|-------|---------|
| Reasoning Rules | 161 | Industry-specific layout/style decisions |
| UI Styles | 67 | Visual language (Glassmorphism, Brutalism, etc.) |
| Color Palettes | 161 | Industry-matched palettes |
| Font Pairings | 57 | Typography combinations |
| Landing Page Patterns | 24 | Conversion-optimized structures |

### 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

```python
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

```python
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

```python
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

```python
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

```python
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

```bash
# 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

```python
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`:

```javascript
// 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

```python
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`:

```css
: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

```python
ds = gen.generate(
    descrip