Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nextlevelbuilder/ui-ux-pro-max-skill/llms.txt
Use this file to discover all available pages before exploring further.
Cursor is an AI-first code editor with a powerful Composer agent. UI/UX Pro Max integrates as a skill that activates automatically for UI/UX requests.
Installation
Install for Cursor
This creates two folders:
.cursor/skills/ui-ux-pro-max/ - Main skill files.shared/ui-ux-pro-max/ - Shared reference data
Restart Cursor
Close and reopen Cursor to load the skill.
File Structure
.cursor/
└── skills/
└── ui-ux-pro-max/
├── SKILL.md # Main skill file
├── data/
│ ├── styles.csv # 67 UI styles
│ ├── colors.csv # 96 color palettes
│ ├── typography.csv # 57 font pairings
│ ├── landing.csv # 24 landing page patterns
│ ├── products.csv # 100 product categories
│ ├── charts.csv # 25 chart types
│ ├── ux_guidelines.csv # 99 UX guidelines
│ └── stacks/ # Stack-specific guidelines
└── scripts/
├── search.py # CLI search tool
├── core.py # BM25 search engine
└── design_system.py # Design system generator
.shared/
└── ui-ux-pro-max/
└── data/ # Shared reference data
How to Use
Automatic Activation
UI/UX Pro Max activates automatically in Cursor’s Composer when you mention UI/UX work:
Build a landing page for my SaaS product
With Composer
Cursor’s Composer agent works seamlessly with UI/UX Pro Max:
- Open Composer (Cmd+I / Ctrl+I)
- Type your UI/UX request
- The skill automatically loads design intelligence
- Composer generates code with proper design system
Example Workflow
Request UI
Build a fintech banking dashboard
Design System Generated
Cursor automatically generates a complete design system:
- Recommended style (e.g., Dark Mode OLED)
- Color palette (e.g., Trust Blue + Wealth Green)
- Typography (e.g., Inter / Roboto Mono)
- Anti-patterns (e.g., avoid bright colors in banking)
Code Implementation
Composer generates code following the design system with:
- Proper colors and fonts
- Accessibility (WCAG AA)
- Responsive breakpoints
- Hover states and transitions
- Pre-delivery checklist validation
Features in Cursor
Multi-File Editing
Cursor’s Composer can generate multiple files at once with UI/UX Pro Max:
Build a complete landing page with separate components for:
- Hero section
- Features grid
- Testimonials
- Pricing table
- Contact form
components/Hero.tsxcomponents/Features.tsxcomponents/Testimonials.tsxcomponents/Pricing.tsxcomponents/Contact.tsxapp/page.tsx
All following the same design system.
Iterative Refinement
Use Cursor’s chat to refine designs:
Make the hero section more minimal
Add a glassmorphism effect to the navbar
Change to a warm color palette
Make it mobile-first responsive
Context-Aware Suggestions
Cursor’s @ mentions work with UI/UX Pro Max:
@ui-ux-pro-max Build a dashboard using the SaaS style
Advanced Usage
Direct Search Commands
Run search commands directly in Cursor’s terminal:
# Search UI styles
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
# Search color palettes
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "fintech" --domain color
# Search font pairings
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
# Generate design system
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "beauty spa" --design-system -p "Serenity Spa"
Persistent Design Systems
Create reusable design systems:
# Generate and persist
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "SaaS" --design-system --persist -p "MyApp"
# Create page-specific overrides
python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "SaaS" --design-system --persist -p "MyApp" --page "dashboard"
Build the pricing page using design-system/MASTER.md
Stack-Specific Guidelines
Specify your tech stack for tailored recommendations:
Build a React dashboard with shadcn/ui components
- shadcn/ui components
- React-specific patterns
- Proper state management for UI
Create a Next.js landing page with server components
- Next.js App Router patterns
- Server component strategies
- Image optimization with next/image
Design a Vue 3 admin panel with Composition API
- Vue 3 Composition API patterns
- Vue-specific UI libraries
- Proper reactivity for UI state
Build a Svelte e-commerce site
- Svelte store patterns
- Svelte-specific animations
- Minimal bundle size strategies
CLI Commands
# Update to latest version
uipro update
# List available versions
uipro versions
# Install offline (use bundled assets)
uipro init --ai cursor --offline
Tips for Cursor
Use Composer for Complex UI
Composer is perfect for generating complete UI systems:Build a complete SaaS landing page with:
- Animated hero with gradient background
- Feature cards with icons
- Pricing table with toggle
- FAQ accordion
- Footer with newsletter signup
Use @ mentions to include specific files:@globals.css Update colors to match the fintech palette
@components/Button.tsx Make this follow the glassmorphism style
Use Cursor’s chat for quick refinements:// After initial generation
Make the padding more spacious
Add hover animations
Make it darker for night mode
Cursor works great with monorepos:Build:
- Frontend landing page with Next.js
- Admin dashboard with React
- Mobile app with React Native
All using the same design system
Troubleshooting
- Verify
.cursor/skills/ui-ux-pro-max/SKILL.md exists
- Check file has proper
# ui-ux-pro-max heading
- Restart Cursor completely
- Try explicit UI/UX keywords: “build landing page”, “design dashboard”
Ensure Python 3.x is installed:python3 --version
# If not installed:
# macOS
brew install python3
# Ubuntu/Debian
sudo apt install python3
# Windows
winget install Python.Python.3.12
Composer Not Using Design System
Be more explicit in your prompt:Build a landing page for my SaaS product.
Use UI/UX Pro Max to generate a design system first.
Then implement with proper colors, fonts, and spacing.
Next Steps
Getting Started
Learn the basics of UI/UX Pro Max
Design Systems
Generate complete design systems
UI Styles
Explore 67 UI styles
Composer Tips
Master Cursor Composer workflows