Skill v1.0.1
currentAutomated scan100/100~1 modified
version: "1.0.1" name: ui-ux-pro-max-skill description: AI design intelligence skill for building professional UI/UX across multiple platforms with 161 reasoning rules, 67 styles, and automated design system generation triggers:
- "build a landing page"
- "design a UI for"
- "create a professional interface"
- "what UI style should I use"
- "generate a design system"
- "help me with UI UX design"
- "build a mobile UI"
- "make my app look professional"
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 globallynpm install -g uipro-cli# Add the skill to your projectnpx uipro-cli install# Or install globallynpx uipro-cli install --global
Via Python (Direct)
# Clone the repositorygit clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.gitcd ui-ux-pro-max-skill# Install dependenciespip install -r requirements.txt# Run the design system generatorpython 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:
| 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
from uiuxpro import DesignSystemGenerator# Initialize the generatorgenerator = DesignSystemGenerator()# Generate a complete design system from a descriptionresult = generator.generate(description="A landing page for a luxury beauty spa",stack="react", # react | nextjs | astro | vue | htmlmode="light" # light | dark | auto)print(result.pattern) # Landing page structureprint(result.style) # UI style recommendationprint(result.colors) # Color palette dictprint(result.typography) # Font pairing + import URLprint(result.effects) # Animations and interactionsprint(result.anti_patterns) # What to avoidprint(result.checklist) # Pre-delivery gates
Query Reasoning Rules
from uiuxpro import ReasoningEngineengine = ReasoningEngine()# Find rules for a product typerules = engine.search("fintech payment app")for rule in rules:print(rule.category) # e.g. "Fintech/Crypto"print(rule.pattern) # Recommended page patternprint(rule.style_priority) # Ordered list of stylesprint(rule.color_mood) # Palette keywordsprint(rule.anti_patterns) # e.g. ["playful fonts", "neon colors"]# Get all rules for a categoryall_healthcare = engine.get_by_category("Healthcare")
Style Lookup
from uiuxpro import StyleLibrarystyles = StyleLibrary()# Get all 67 stylesall_styles = styles.list_all()# Find styles by keywordmatching = styles.search("glass transparent blur")# Get full style specglassmorphism = styles.get("Glassmorphism")print(glassmorphism.keywords) # ["frosted glass", "transparency", ...]print(glassmorphism.best_for) # ["SaaS dashboards", "tech products"]print(glassmorphism.css_variables) # CSS custom propertiesprint(glassmorphism.tailwind_config) # Tailwind configuration
Color Palette Selection
from uiuxpro import ColorEnginecolors = ColorEngine()# Get palette for a product typepalette = 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 moodcalm_palettes = colors.get_by_mood("calming")luxury_palettes = colors.get_by_mood("luxury")
Typography Pairing
from uiuxpro import TypographyEnginetypography = TypographyEngine()# Get font pairing for a moodpairing = typography.get_for_mood("elegant sophisticated")print(pairing.heading) # "Cormorant Garamond"print(pairing.body) # "Montserrat"print(pairing.google_url) # Google Fonts import URLprint(pairing.css_import) # @import statement# Get all pairings for a tech stackreact_pairings = typography.get_for_stack("react")
CLI Commands
# Generate a design system interactivelynpx uipro-cli generate# Generate for a specific product typenpx uipro-cli generate --product "saas dashboard" --stack nextjs# List all 67 UI stylesnpx uipro-cli styles list# Get style detailsnpx uipro-cli styles get glassmorphism# Search reasoning rulesnpx uipro-cli rules search "e-commerce luxury"# List all color palettesnpx uipro-cli colors list# Get font pairingsnpx uipro-cli fonts listnpx uipro-cli fonts get --mood "tech modern"# Output design system as JSONnpx uipro-cli generate --product "restaurant booking" --output json# Output as markdownnpx uipro-cli generate --product "portfolio site" --output markdown
Real-World Examples
Example 1: React SaaS Dashboard
from uiuxpro import DesignSystemGeneratorgen = 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.jsmodule.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(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
from uiuxpro import DesignSystemGenerator, StackExportergen = 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 filesexporter = 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 buttonsRESPONSIVE[ ] Mobile: 375px breakpoint tested[ ] Tablet: 768px breakpoint tested[ ] Desktop: 1024px breakpoint tested[ ] Wide: 1440px breakpoint testedPERFORMANCE[ ] 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
# Ensure npm global bin is in PATHexport PATH="$(npm bin -g):$PATH"# Or use npx directlynpx uipro-cli generate
Python import errors
# Ensure you're in the project directory with venv activepython -m venv venvsource venv/bin/activate # Windows: venv\Scripts\activatepip install -r requirements.txtpython 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
# The engine falls back to closest category match# Inspect the match score to verifyresult = engine.search("autonomous drone delivery fleet")print(result[0].score) # BM25 relevance scoreprint(result[0].category) # Matched categoryprint(result[0].fallback) # True if approximate match
Tailwind config conflicts with existing config
# Get only the theme extension, not the full configtheme_extension = ds.tailwind_theme_extension # dict, not full config# Merge manually into your existing tailwind.config.jsimport jsonprint(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