# ui-ux-pro-max-skill **Repository Path**: changluJava/ui-ux-pro-max-skill ## Basic Information - **Project Name**: ui-ux-pro-max-skill - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-01 - **Last Updated**: 2026-02-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # UI UX Pro Max

GitHub Release 100 Reasoning Rules 67 UI Styles Python 3.x License

npm npm downloads GitHub stars PayPal

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.

UI UX Pro Max

If you find this useful, consider supporting the project:

PayPal Donate

## What's New in v2.0 ### Intelligent Design System Generation The flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds. ``` +----------------------------------------------------------------------------------------+ | TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM | +----------------------------------------------------------------------------------------+ | | | PATTERN: Hero-Centric + Social Proof | | Conversion: Emotion-driven with trust elements | | CTA: Above fold, repeated after testimonials | | Sections: | | 1. Hero | | 2. Services | | 3. Testimonials | | 4. Booking | | 5. Contact | | | | STYLE: Soft UI Evolution | | Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes | | Best For: Wellness, beauty, lifestyle brands, premium services | | Performance: Excellent | Accessibility: WCAG AA | | | | COLORS: | | Primary: #E8B4B8 (Soft Pink) | | Secondary: #A8D5BA (Sage Green) | | CTA: #D4AF37 (Gold) | | Background: #FFF5F5 (Warm White) | | Text: #2D3436 (Charcoal) | | Notes: Calming palette with gold accents for luxury feel | | | | TYPOGRAPHY: Cormorant Garamond / Montserrat | | Mood: Elegant, calming, sophisticated | | Best For: Luxury brands, wellness, beauty, editorial | | Google Fonts: https://fonts.google.com/share?selection.family=... | | | | KEY EFFECTS: | | Soft shadows + Smooth transitions (200-300ms) + Gentle hover states | | | | AVOID (Anti-patterns): | | Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients | | | | PRE-DELIVERY CHECKLIST: | | [ ] No emojis as icons (use SVG: Heroicons/Lucide) | | [ ] cursor-pointer on all clickable elements | | [ ] Hover states with smooth transitions (150-300ms) | | [ ] Light mode: text contrast 4.5:1 minimum | | [ ] Focus states visible for keyboard nav | | [ ] prefers-reduced-motion respected | | [ ] Responsive: 375px, 768px, 1024px, 1440px | | | +----------------------------------------------------------------------------------------+ ``` ### How Design System Generation Works ``` ┌─────────────────────────────────────────────────────────────────┐ │ 1. USER REQUEST │ │ "Build a landing page for my beauty spa" │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │ │ • Product type matching (100 categories) │ │ • Style recommendations (67 styles) │ │ • Color palette selection (96 palettes) │ │ • Landing page patterns (24 patterns) │ │ • Typography pairing (57 font combinations) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 3. REASONING ENGINE │ │ • Match product → UI category rules │ │ • Apply style priorities (BM25 ranking) │ │ • Filter anti-patterns for industry │ │ • Process decision rules (JSON conditions) │ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────┐ │ 4. COMPLETE DESIGN SYSTEM OUTPUT │ │ Pattern + Style + Colors + Typography + Effects │ │ + Anti-patterns to avoid + Pre-delivery checklist │ └─────────────────────────────────────────────────────────────────┘ ``` ### 100 Industry-Specific Reasoning Rules The reasoning engine includes specialized rules for: | Category | Examples | |----------|----------| | **Tech & SaaS** | SaaS, Micro SaaS, B2B Enterprise, Developer Tools, AI/Chatbot Platform | | **Finance** | Fintech, Banking, Crypto, Insurance, Trading Dashboard | | **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health | | **E-commerce** | General, Luxury, Marketplace, Subscription Box | | **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Consulting | | **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming | | **Emerging Tech** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Systems | Each rule includes: - **Recommended Pattern** - Landing page structure - **Style Priority** - Best matching UI styles - **Color Mood** - Industry-appropriate palettes - **Typography Mood** - Font personality matching - **Key Effects** - Animations and interactions - **Anti-Patterns** - What NOT to do (e.g., "AI purple/pink gradients" for banking) ## Features - **67 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more - **96 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc. - **57 Font Pairings** - Curated typography combinations with Google Fonts imports - **25 Chart Types** - Recommendations for dashboards and analytics - **13 Tech Stacks** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose - **99 UX Guidelines** - Best practices, anti-patterns, and accessibility rules - **100 Reasoning Rules** - Industry-specific design system generation (NEW in v2.0) ### Available Styles (67)
General Styles (49) | # | Style | Best For | |---|-------|----------| | 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation | | 2 | Neumorphism | Health/wellness apps, meditation platforms | | 3 | Glassmorphism | Modern SaaS, financial dashboards | | 4 | Brutalism | Design portfolios, artistic projects | | 5 | 3D & Hyperrealism | Gaming, product showcase, immersive | | 6 | Vibrant & Block-based | Startups, creative agencies, gaming | | 7 | Dark Mode (OLED) | Night-mode apps, coding platforms | | 8 | Accessible & Ethical | Government, healthcare, education | | 9 | Claymorphism | Educational apps, children's apps, SaaS | | 10 | Aurora UI | Modern SaaS, creative agencies | | 11 | Retro-Futurism | Gaming, entertainment, music platforms | | 12 | Flat Design | Web apps, mobile apps, startup MVPs | | 13 | Skeuomorphism | Legacy apps, gaming, premium products | | 14 | Liquid Glass | Premium SaaS, high-end e-commerce | | 15 | Motion-Driven | Portfolio sites, storytelling platforms | | 16 | Micro-interactions | Mobile apps, touchscreen UIs | | 17 | Inclusive Design | Public services, education, healthcare | | 18 | Zero Interface | Voice assistants, AI platforms | | 19 | Soft UI Evolution | Modern enterprise apps, SaaS | | 20 | Neubrutalism | Gen Z brands, startups, Figma-style | | 21 | Bento Box Grid | Dashboards, product pages, portfolios | | 22 | Y2K Aesthetic | Fashion brands, music, Gen Z | | 23 | Cyberpunk UI | Gaming, tech products, crypto apps | | 24 | Organic Biophilic | Wellness apps, sustainability brands | | 25 | AI-Native UI | AI products, chatbots, copilots | | 26 | Memphis Design | Creative agencies, music, youth brands | | 27 | Vaporwave | Music platforms, gaming, portfolios | | 28 | Dimensional Layering | Dashboards, card layouts, modals | | 29 | Exaggerated Minimalism | Fashion, architecture, portfolios | | 30 | Kinetic Typography | Hero sections, marketing sites | | 31 | Parallax Storytelling | Brand storytelling, product launches | | 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial | | 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity | | 34 | Pixel Art | Indie games, retro tools, creative | | 35 | Bento Grids | Product features, dashboards, personal | | 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR | | 37 | E-Ink / Paper | Reading apps, digital newspapers | | 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists | | 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health | | 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites | | 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands | | 42 | Nature Distilled | Wellness brands, sustainable products | | 43 | Interactive Cursor Design | Creative portfolios, interactive | | 44 | Voice-First Multimodal | Voice assistants, accessibility apps | | 45 | 3D Product Preview | E-commerce, furniture, fashion | | 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative | | 47 | Editorial Grid / Magazine | News sites, blogs, magazines | | 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech | | 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands |
Landing Page Styles (8) | # | Style | Best For | |---|-------|----------| | 1 | Hero-Centric Design | Products with strong visual identity | | 2 | Conversion-Optimized | Lead generation, sales pages | | 3 | Feature-Rich Showcase | SaaS, complex products | | 4 | Minimal & Direct | Simple products, apps | | 5 | Social Proof-Focused | Services, B2C products | | 6 | Interactive Product Demo | Software, tools | | 7 | Trust & Authority | B2B, enterprise, consulting | | 8 | Storytelling-Driven | Brands, agencies, nonprofits |
BI/Analytics Dashboard Styles (10) | # | Style | Best For | |---|-------|----------| | 1 | Data-Dense Dashboard | Complex data analysis | | 2 | Heat Map & Heatmap Style | Geographic/behavior data | | 3 | Executive Dashboard | C-suite summaries | | 4 | Real-Time Monitoring | Operations, DevOps | | 5 | Drill-Down Analytics | Detailed exploration | | 6 | Comparative Analysis Dashboard | Side-by-side comparisons | | 7 | Predictive Analytics | Forecasting, ML insights | | 8 | User Behavior Analytics | UX research, product analytics | | 9 | Financial Dashboard | Finance, accounting | | 10 | Sales Intelligence Dashboard | Sales teams, CRM |
## Installation ### Using Claude Marketplace (Claude Code) Install directly in Claude Code with two commands: ``` /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` ### Using CLI (Recommended) ```bash # Install CLI globally npm install -g uipro-cli # Go to your project cd /path/to/your/project # Install for your AI assistant uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity uipro init --ai copilot # GitHub Copilot uipro init --ai kiro # Kiro uipro init --ai codex # Codex CLI uipro init --ai qoder # Qoder uipro init --ai roocode # Roo Code uipro init --ai gemini # Gemini CLI uipro init --ai trae # Trae uipro init --ai opencode # OpenCode uipro init --ai continue # Continue uipro init --ai codebuddy # CodeBuddy uipro init --ai all # All assistants ``` ### Other CLI Commands ```bash uipro versions # List available versions uipro update # Update to latest version uipro init --offline # Skip GitHub download, use bundled assets ``` ## Prerequisites Python 3.x is required for the search script. ```bash # Check if Python is installed python3 --version # macOS brew install python3 # Ubuntu/Debian sudo apt update && sudo apt install python3 # Windows winget install Python.Python.3.12 ``` ## Usage ### Skill Mode (Auto-activate) **Supported:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy The skill activates automatically when you request UI/UX work. Just chat naturally: ``` Build a landing page for my SaaS product ``` > **Trae**: Switch to **SOLO** mode first. The skill will activate for UI/UX requests. ### Workflow Mode (Slash Command) **Supported:** Kiro, GitHub Copilot, Roo Code Use the slash command to invoke the skill: ``` /ui-ux-pro-max Build a landing page for my SaaS product ``` ### Example Prompts ``` Build a landing page for my SaaS product Create a dashboard for healthcare analytics Design a portfolio website with dark mode Make a mobile app UI for e-commerce Build a fintech banking app with dark theme ``` ### How It Works 1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve) 2. **Design System Generated** - The AI automatically generates a complete design system using the reasoning engine 3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching styles, colors, and typography 4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices 5. **Pre-delivery checks** - Validates against common UI/UX anti-patterns ### Supported Stacks The skill provides stack-specific guidelines for: | Category | Stacks | |----------|--------| | **Web (HTML)** | HTML + Tailwind (default) | | **React Ecosystem** | React, Next.js, shadcn/ui | | **Vue Ecosystem** | Vue, Nuxt.js, Nuxt UI | | **Other Web** | Svelte, Astro | | **iOS** | SwiftUI | | **Android** | Jetpack Compose | | **Cross-Platform** | React Native, Flutter | Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind. ## Design System Command (Advanced) For direct access to the design system generator: > Note: If you installed via Continue, replace `.claude/skills/` with `.continue/skills/` in the commands below. ```bash # Generate design system with ASCII output python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa" # Generate with Markdown output python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown # Domain-specific search python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart # Stack-specific guidelines python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind ``` ### Persist Design System (Master + Overrides Pattern) Save your design system to files for **hierarchical retrieval across sessions**: ```bash # Generate and persist to design-system/MASTER.md python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" # Also create a page-specific override file python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard" ``` This creates a `design-system/` folder structure: ``` design-system/ ├── MASTER.md # Global Source of Truth (colors, typography, spacing, components) └── pages/ └── dashboard.md # Page-specific overrides (only deviations from Master) ``` **How hierarchical retrieval works:** 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` 2. If the page file exists, its rules **override** the Master file 3. If not, use `design-system/MASTER.md` exclusively **Context-aware retrieval prompt:** ``` I am building the [Page Name] page. Please read design-system/MASTER.md. Also check if design-system/pages/[page-name].md exists. If the page file exists, prioritize its rules. If not, use the Master rules exclusively. Now, generate the code... ``` ## Architecture & Contributing ### For Users The codebase has been restructured to use a **template-based generation system**. All platform-specific files (`.cursor/`, `.windsurf/`, `.kiro/`, etc.) are now generated dynamically by the CLI. **Always use the CLI to install:** ```bash npm install -g uipro-cli uipro init --ai ``` This ensures you get the latest templates and correct file structure for your AI assistant. ### For Contributors If you want to contribute to this project: ```bash # 1. Clone the repository git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git cd ui-ux-pro-max-skill # 2. Understand the structure src/ui-ux-pro-max/ # Source of truth (data, scripts, templates) cli/ # CLI installer (generates files from templates) .claude/ # Local dev/test for Claude Code skill # 3. Make changes in src/ui-ux-pro-max/ # - data/*.csv → Database files # - scripts/*.py → Search engine & design system # - templates/ → Platform-specific templates # 4. Sync to CLI and test locally cp -r src/ui-ux-pro-max/data/* cli/assets/data/ cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/ cp -r src/ui-ux-pro-max/templates/* cli/assets/templates/ # 5. Build and test CLI cd cli && bun run build node dist/index.js init --ai claude --offline # Test in a temp folder # 6. Create PR (never push directly to main) git checkout -b feat/your-feature git commit -m "feat: description" git push -u origin feat/your-feature gh pr create ``` See [CLAUDE.md](CLAUDE.md) for detailed development guidelines. ## Star History [![Star History Chart](https://api.star-history.com/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date) ## License This project is licensed under the [MIT License](LICENSE).