Fetches ui-ux-pro-max-skill from aradotso/trending-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/ui-ux-pro-max-skill
Restart Cursor to activate ui-ux-pro-max-skill. Access via /ui-ux-pro-max-skill in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
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 globallynpminstall-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.git
cd 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:
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 | html mode="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 ReasoningEngine
engine = 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 StyleLibrary
styles = 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 ColorEngine
colors = 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 TypographyEngine
typography = 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 list
npx 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 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:
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
