ui-ux-pro-max-skill

# 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(
    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",
# ]
```

### Example 4: Full Stack Integration with Next.js

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

---

## Supported Tech Stacks

| Stack | Key | Notes |
|-------|-----|-------|
| React | `react` | Component patterns + Tailwind |
| Next.js | `nextjs` | App Router + RSC aware |
| Astro | `astro` | Island architecture patterns |
| Vue 3 | `vue` | Composition API patterns |
| Nuxt.js | `nuxt` | Auto-imports aware |
| Nuxt UI | `nuxt-ui` | Component overrides |
| Svelte | `svelte` | Reactive store patterns |
| SwiftUI | `swiftui` | iOS/macOS native patterns |
| React Native | `react-native` | Mobile-first responsive |
| Flutter | `flutter` | Widget tree patterns |
| HTML + Tailwind | `html` | Standalone CSS output |
| shadcn/ui | `shadcn` | Theme token overrides |
| Jetpack Compose | `jetpack` | Android Material3 |

---

## Pre-Delivery Checklist (Universal)

The skill enforces these gates on every generated design:

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

---

## Common Patterns by Industry

### Tech / SaaS
- **Style**: Glassmorphism, Bento Grid, AI-Native UI
- **Colors**: Indigo/Violet primary, dark backgrounds for dashboards
- **Avoid**: Stock photos, clip art, rainbow gradients

### E-commerce / Luxury
- **Style**: Minimalism, Editorial, Claymorphism (for casual)
- **Colors**: Black/Gold for luxury; bright/bold for casual
- **Avoid**: Cluttered layouts, too many CTAs, Comic Sans adjacent fonts

### Healthcare / Medical
- **Style**: Clean Minimalism, Soft UI
- **Colors**: Blues, teals, whites — clinical but warm
- **Avoid**: Red for primary actions (emergency connotation), dark mode on medical data

### Finance / Fintech
- **Style**: Professional Minimalism, Data-Dense UI
- **Colors**: Deep blues, greens, neutrals
- **Avoid**: Playful fonts, neon colors, AI purple gradients, excessive motion

### Food & Restaurant
- **Style**: Warm Minimalism, Photography-Forward
- **Colors**: Warm neutrals, appetizing reds/oranges, earthy tones
- **Avoid**: Cold blues as primary, low-contrast text over food photos

---

## Troubleshooting

### CLI not found after install
```bash
# Ensure npm global bin is in PATH
export PATH="$(npm bin -g):$PATH"

# Or use npx directly
npx uipro-cli generate
```

### Python import errors
```bash
# 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
```

### Generation returns generic output
- Be specific in your description: include industry, audience, and goal
- ✗ `"a website"` → ✓ `"a SaaS landing page for a B2B project management tool targeting remote engineering teams"`
- Include stack context for framework-specific exports

### No matching reasoning rule found
```python
# 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
```

### Tailwind config conflicts with existing config
```python
# 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))
```

---

## Resources

- **Homepage**: https://uupm.cc
- **GitHub**: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- **npm CLI**: https://www.npmjs.com/package/uipro-cli
- **License**: MIT