{ "markdown": "# [UI UX Pro Max](https://uupm.cc)\n\n

\n ๐Ÿ‡ฎ๐Ÿ‡ฉ Bahasa Indonesia |\n ๐Ÿ‡ฐ๐Ÿ‡ท ํ•œ๊ตญ์–ด |\n ๐Ÿ‡ป๐Ÿ‡ณ Tiแบฟng Viแป‡t |\n ๐Ÿ‡จ๐Ÿ‡ณ ็ฎ€ไฝ“ไธญๆ–‡ |\n ๐Ÿ‡บ๐Ÿ‡ธ English\n

\n\n

\n \"GitHub\n \"192\n \"79\n \"Python\n \"License\"\n

\n\n

\n \"npm\"\n \"npm\n \"GitHub\n \"PayPal\"\n

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

\n \n \"UI\n \n

\n\n

\n If you find this useful, consider supporting the project:

\n \"PayPal\n

\n\n

\n Other projects
\n NextLevelBuilder.io | GoClaw.sh | AgentKit.best | TOSE.sh\n

\n\n## What's New in v2.0\n\n### Intelligent Design System Generation\n\nThe 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.\n\n```\n+----------------------------------------------------------------------------------------+\n| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |\n+----------------------------------------------------------------------------------------+\n| |\n| PATTERN: Hero-Centric + Social Proof |\n| Conversion: Emotion-driven with trust elements |\n| CTA: Above fold, repeated after testimonials |\n| Sections: |\n| 1. Hero |\n| 2. Services |\n| 3. Testimonials |\n| 4. Booking |\n| 5. Contact |\n| |\n| STYLE: Soft UI Evolution |\n| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |\n| Best For: Wellness, beauty, lifestyle brands, premium services |\n| Performance: cost:low | Accessibility: risk:conditional; verify requirements |\n| |\n| COLORS: |\n| Primary: #E8B4B8 (Soft Pink) |\n| Secondary: #A8D5BA (Sage Green) |\n| CTA: #D4AF37 (Gold) |\n| Background: #FFF5F5 (Warm White) |\n| Text: #2D3436 (Charcoal) |\n| Notes: Calming palette with gold accents for luxury feel |\n| |\n| TYPOGRAPHY: Cormorant Garamond / Montserrat |\n| Mood: Elegant, calming, sophisticated |\n| Best For: Luxury brands, wellness, beauty, editorial |\n| Google Fonts: https://fonts.google.com/share?selection.family=... |\n| |\n| KEY EFFECTS: |\n| Soft shadows + Context-appropriate transitions + Gentle hover states |\n| |\n| AVOID (Anti-patterns): |\n| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |\n| |\n| PRE-DELIVERY CHECKLIST: |\n| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |\n| [ ] cursor-pointer on all clickable elements |\n| [ ] Interaction timing follows the platform, component, and user preference |\n| [ ] Light mode: text contrast 4.5:1 minimum |\n| [ ] Focus states visible for keyboard nav |\n| [ ] prefers-reduced-motion respected |\n| [ ] Text, chips, and badges reflow without clipping or broken labels |\n| [ ] Responsive: 375px, 768px, 1024px, 1440px |\n| |\n+----------------------------------------------------------------------------------------+\n```\n\n### How Design System Generation Works\n\n```\nโ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”\nโ”‚ 1. USER REQUEST โ”‚\nโ”‚ \"Build a landing page for my beauty spa\" โ”‚\nโ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜\n โ”‚\n โ–ผ\nโ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”\nโ”‚ 2. MULTI-DOMAIN SEARCH (5 parallel searches) โ”‚\nโ”‚ โ€ข Product type matching (192 categories) โ”‚\nโ”‚ โ€ข Style recommendations (79 searchable; 50 active) โ”‚\nโ”‚ โ€ข Color palette selection (192 palettes) โ”‚\nโ”‚ โ€ข Landing page patterns (34 patterns) โ”‚\nโ”‚ โ€ข Typography pairing (74 font combinations) โ”‚\nโ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜\n โ”‚\n โ–ผ\nโ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”\nโ”‚ 3. REASONING ENGINE โ”‚\nโ”‚ โ€ข Match product โ†’ UI category rules โ”‚\nโ”‚ โ€ข Apply style priorities (BM25 ranking) โ”‚\nโ”‚ โ€ข Filter anti-patterns for industry โ”‚\nโ”‚ โ€ข Process decision rules (JSON conditions) โ”‚\nโ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜\n โ”‚\n โ–ผ\nโ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”\nโ”‚ 4. COMPLETE DESIGN SYSTEM OUTPUT โ”‚\nโ”‚ Pattern + Style + Colors + Typography + Effects โ”‚\nโ”‚ + Anti-patterns to avoid + Pre-delivery checklist โ”‚\nโ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜\n```\n\n### 192 Industry-Specific Reasoning Rules\n\nThe reasoning engine includes specialized rules for:\n\n| Category | Examples |\n|----------|----------|\n| **Tech & SaaS** | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform |\n| **Finance** | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool |\n| **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder |\n| **E-commerce** | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery |\n| **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment |\n| **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor |\n| **Lifestyle** | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker |\n| **Emerging Tech** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet |\n\nEach rule includes:\n- **Recommended Pattern** - Landing page structure\n- **Style Priority** - Best matching UI styles\n- **Color Mood** - Industry-appropriate palettes\n- **Typography Mood** - Font personality matching\n- **Key Effects** - Animations and interactions\n- **Anti-Patterns** - What NOT to do (e.g., \"AI purple/pink gradients\" for banking)\n\n## Features\n\n- **79 Searchable UI Styles (50 active)** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more\n- **192 Color Palettes** - Industry-specific palettes aligned 1:1 with the 192 product types\n- **74 Font Pairings** - Curated typography combinations with Google Fonts imports\n- **25 Chart Types** - Recommendations for dashboards and analytics\n- **22 Tech Stacks** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform\n- **119 UX Guidelines** - Best practices, anti-patterns, accessibility rules, resilient text layout, compact labels, and cancellable interactions\n- **192 Reasoning Rules** - Industry-specific design system generation (NEW in v2.0)\n\n### Resilient Text and Compact UI\n\nThe guidance now covers common production failures around headings, long tokens,\nchips, badges, and interrupted micro-interactions:\n\n- Balanced heading wrapping is a progressive enhancement, not a guarantee that a\n specific word will remain on the last line. Designs must still work with natural\n wrapping across widths, fonts, and locales.\n- Essential text must reflow without clipping at narrow widths, browser zoom, text\n scaling, and user spacing overrides. Long URLs and identifiers may wrap safely.\n- Chip and tag collections should wrap or use an operable `+n` disclosure. A compact\n label should remain whole when practical; unavoidable truncation needs an accessible\n full-value path for keyboard, pointer, and touch users.\n- Badge meaning cannot rely on color alone. Interactive chips need native semantics,\n visible focus, and programmatic state; live counts need meaningful context.\n- Rapid interactions may cancel animation, but the final semantic state, focus, and\n content must remain correct. Timing is selected for the platform and component,\n with reduced-motion preferences respected.\n\n### Style Taxonomy\n\nThe catalog contains **79 searchable styles** backed by stable IDs and aliases:\n\n| Status | Count | Search behavior |\n|--------|------:|-----------------|\n| Active | 50 | Included in normal recommendations and shown by default in the gallery |\n| Supplemental | 29 | Returned for exact or explicit variant/system intent; available through the gallery status filter |\n| Deprecated | 9 | Excluded from normal ranking; legacy names redirect to a canonical style or landing pattern |\n\nThe active set covers 43 general visual families, 2 mobile-specific styles, 3 official platform/design systems, 1 platform material, and 1 core analytics style. Current official systems include Fluent 2, Shopify Polaris, and Adobe Spectrum; Liquid Glass is scoped as an Apple platform material, Material 3 Expressive remains a mobile Material variant, and Spectrum 2 is supplemental. Landing-page structures live in the separate 34-pattern landing dataset rather than competing with visual styles in BM25 ranking.\n\nSee [`styles.csv`](src/ui-ux-pro-max/data/styles.csv) for the full taxonomy and provenance-aware metadata.\n\n## ๐Ÿ’Ž Basic vs. Premium Version Comparison\n\nMany users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow.\n\n### ๐ŸŸข Basic Version (This Repository)\n* **Fully Open Source:** Perfect for individual developers, hobbyists, and standard projects.\n* **Core UI/UX Intelligence:** Full access to 79 searchable UI styles (50 active), 192 product types, color palettes, and curated font pairings.\n* **Smart Recommendations:** Built-in BM25 search engine for highly accurate design matching.\n* **Cross-Platform Support:** Stack-specific guidelines supporting 22 major frameworks (React, Vue, Tailwind, iOS, Android, etc.).\n* **Design System Generation:** Instantly generate tailored UI rules, patterns, and logic via CLI.\n\n### ๐ŸŸก Premium Version\n* **Extended Brand Design Skills:** Goes beyond UI/UX to include Brand Identity generation, Logo Design, Corporate Identity Programs (CIP), Banners, Presentation Slides, and custom Iconography.\n* **Advanced Asset Creation:** Deep integration with AI-powered image generation to create real visual assets, not just placeholders.\n* **Enterprise Architecture:** A more comprehensive and scalable Design Token architecture, built for large-scale team deployments.\n* **Priority Support:** Dedicated technical assistance for teams and professionals who need an uninterrupted full design workflow.\n\n๐Ÿ‘‰ *For more details on upgrading to the Premium tier, visit [uupm.cc](https://uupm.cc).*\n\n## Installation\n\n### Using Claude Marketplace (Claude Code)\n\nInstall directly in Claude Code with two commands:\n\n```\n/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill\n/plugin install ui-ux-pro-max@ui-ux-pro-max-skill\n```\n\n### Using CLI (Recommended)\n\n```bash\n# Install CLI globally\nnpm install -g ui-ux-pro-max-cli\n\n# Go to your project\ncd /path/to/your/project\n\n# Install for your AI assistant\nuipro init --ai claude # Claude Code\nuipro init --ai cursor # Cursor\nuipro init --ai windsurf # Windsurf\nuipro init --ai antigravity # Antigravity\nuipro init --ai copilot # GitHub Copilot\nuipro init --ai kiro # Kiro\nuipro init --ai codex # Codex CLI\nuipro init --ai qoder # Qoder\nuipro init --ai roocode # Roo Code\nuipro init --ai gemini # Gemini CLI\nuipro init --ai trae # Trae\nuipro init --ai opencode # OpenCode\nuipro init --ai continue # Continue\nuipro init --ai codebuddy # CodeBuddy\nuipro init --ai droid # Droid (Factory)\nuipro init --ai kilocode # KiloCode\nuipro init --ai warp # Warp\nuipro init --ai augment # Augment\nuipro init --ai codewhale # CodeWhale\nuipro init --ai universal # Universal / Agent Standard (.agents/skills/)\nuipro init --ai all # All assistants\n```\n\nThe npm package is `ui-ux-pro-max-cli`; it still installs the `uipro` command. Older `uipro-cli` releases are stale and should not be used for current assets.\n\n### Global Install (Available for All Projects)\n\n```bash\nuipro init --ai claude --global # Install to ~/.claude/skills/\nuipro init --ai cursor --global # Install to ~/.cursor/skills/\nuipro init --ai universal --global # Install to ~/.agents/skills/\n```\n\n### Other CLI Commands\n\n```bash\nuipro versions # List available versions\nuipro update # Refresh skill files from installed CLI package\nuipro update --global # Refresh global skill files from installed CLI package\nuipro init --offline # Compatibility flag; installs bundled templates\nuipro uninstall # Remove skill (auto-detect platform)\nuipro uninstall --ai claude # Remove specific platform\nuipro uninstall --global # Remove from global install\n```\n\n## Prerequisites\n\nPython 3.x is required for the search script (standard library only โ€” the scripts install nothing and make no network calls).\n\nCheck if Python is installed:\n\n```bash\npython3 --version\n```\n\nIf it is missing, install it yourself from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). These install steps are for **you, the human user** โ€” AI agents using this skill should never install software on your machine; they are instructed to ask you instead.\n\n## Usage\n\n### Skill Mode (Auto-activate)\n\n**Supported:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale\n\nThe skill activates automatically when you request UI/UX work. Just chat naturally:\n\n```\nBuild a landing page for my SaaS product\n```\n\n> **Trae**: Switch to **SOLO** mode first. The skill will activate for UI/UX requests.\n\n### Workflow Mode (Slash Command)\n\n**Supported:** Kiro, GitHub Copilot, Roo Code, KiloCode\n\nUse the slash command to invoke the skill:\n\n```\n/ui-ux-pro-max Build a landing page for my SaaS product\n```\n\n### Example Prompts\n\n```\nBuild a landing page for my SaaS product\n\nCreate a dashboard for healthcare analytics\n\nDesign a portfolio website with dark mode\n\nMake a mobile app UI for e-commerce\n\nBuild a fintech banking app with dark theme\n```\n\n### How It Works\n\n1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve)\n2. **Design System Generated** - The AI automatically generates a complete design system using the reasoning engine\n3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching styles, colors, and typography\n4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices\n5. **Pre-delivery checks** - Validates against common UI/UX anti-patterns\n\n### Supported Stacks\n\nThe skill provides stack-specific guidelines for:\n\n| Category | Stacks |\n|----------|--------|\n| **Web (HTML)** | HTML + Tailwind (default) |\n| **React Ecosystem** | React, Next.js, shadcn/ui |\n| **Vue Ecosystem** | Vue, Nuxt.js, Nuxt UI |\n| **Angular** | Angular |\n| **PHP** | Laravel (Blade, Livewire, Inertia.js) |\n| **Other Web** | Svelte, Astro, Three.js |\n| **Desktop** | JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP |\n| **iOS** | SwiftUI |\n| **Android** | Jetpack Compose |\n| **Cross-Platform** | React Native, Flutter |\n\nJust mention your preferred stack in the prompt, or let it default to HTML + Tailwind.\n\n## Design System Command (Advanced)\n\nFor direct access to the design system generator:\n\n> Note: If you installed via Continue, replace `.claude/skills/` with `.continue/skills/` in the commands below. For Droid (Factory), use `.factory/skills/`.\n\n```bash\n# Generate design system with ASCII output\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness\" --design-system -p \"Serenity Spa\"\n\n# Generate with Markdown output\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"fintech banking\" --design-system -f markdown\n\n# Domain-specific search\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"glassmorphism\" --domain style\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"elegant serif\" --domain typography\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"dashboard\" --domain chart\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"error summary validation\" --domain ux\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"decorative icon aria hidden\" --domain icons\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"icon button accessible label\" --domain icons\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"orphan heading line balance\" --domain ux\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"badge chip label wraps to second line\" --domain ux\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"rapid chip animation interrupted\" --domain ux\n\n# Stack-specific guidelines\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"form validation\" --stack react\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"responsive layout\" --stack html-tailwind\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"chip badge overflow nowrap\" --stack html-tailwind\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"tableview binding\" --stack javafx\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"atlantafx primer enterprise theme\" --stack javafx\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"enterprise tableview density permission\" --stack javafx\n```\n\nWeb-stack search is version-aware. Queries without an older major return current,\nactive guidance. Explicit legacy terms or older majors (for example, `Svelte 4`\nor `Next.js 15`) return only curated legacy rows, labeled by `Status` and\n`Applies To`; when no matching legacy guidance is curated, search returns no\nresults instead of mixing framework generations.\n\n### Persist Design System (Master + Overrides Pattern)\n\nSave your design system to files for **hierarchical retrieval across sessions**:\n\n```bash\n# Generate and persist to design-system/myapp/MASTER.md\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"SaaS dashboard\" --design-system --persist -p \"MyApp\"\n\n# Also create a page-specific override file\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"SaaS dashboard\" --design-system --persist -p \"MyApp\" --page \"dashboard\"\n```\n\nThis creates a `design-system/` folder structure:\n\n```\ndesign-system/\nโ””โ”€โ”€ myapp/ # One folder per project (slug of -p \"MyApp\")\n โ”œโ”€โ”€ MASTER.md # Global Source of Truth (colors, typography, spacing, components)\n โ””โ”€โ”€ pages/\n โ””โ”€โ”€ dashboard.md # Page-specific overrides (only deviations from Master)\n```\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system/[project-slug]/pages/checkout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system/[project-slug]/MASTER.md` exclusively\n\n**Context-aware retrieval prompt:**\n```\nI am building the [Page Name] page. Please read design-system/[project-slug]/MASTER.md.\nAlso check if design-system/[project-slug]/pages/[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code...\n```\n\n## Architecture & Contributing\n\n### For Users\n\nThe codebase has been restructured to use a **template-based generation system**. All platform-specific files (`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/`, etc.) are now generated dynamically by the CLI.\n\n**Always use the CLI to install:**\n\n```bash\nnpm install -g ui-ux-pro-max-cli\nuipro init --ai \n```\n\nThis ensures you get the latest templates bundled with the installed CLI package and the correct file structure for your AI assistant. Update the npm package first when a new release is published.\n\n### For Contributors\n\nIf you want to contribute to this project:\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git\ncd ui-ux-pro-max-skill\n\n# 2. Understand the structure\nsrc/ui-ux-pro-max/ # Source of truth (data, scripts, templates)\ncli/ # CLI installer (generates files from templates)\n.claude/ # Local dev/test for Claude Code skill\n.factory/ # Local dev/test for Droid (Factory) skill\n\n# 3. Make changes in src/ui-ux-pro-max/\n# - data/*.csv โ†’ Database files\n# - scripts/*.py โ†’ Search engine & design system\n# - templates/ โ†’ Platform-specific templates\n\n# 4. Sync to CLI and test locally\ncd cli\nnpm run sync:assets\nnpm run check:assets\nnpm run verify:data\nnpm run typecheck\n\n# 5. Build and test CLI\n# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.\nnpm run build\nnode dist/index.js init --ai claude --offline # Test in a temp folder\n\n# 6. Create PR (never push directly to main)\ngit checkout -b feat/your-feature\ngit commit -m \"feat: description\"\ngit push -u origin feat/your-feature\ngh pr create\n```\n\nSee [CLAUDE.md](CLAUDE.md) for detailed development guidelines.\n\n### Catalog provenance and refresh\n\nThe committed catalog summary currently records **1,934 approved Google Fonts**\nplus **8 review exclusions** that are not promoted without matching official\nlicense metadata. The icon guidance remains **105 curated rows** (100 direct\nPhosphor web imports plus React Native/fallback guidance); the separate\n**1,512-icon upstream Phosphor manifest** validates names,\nweights, and React/SSR imports without flooding search results with the entire\nupstream package.\n\nOrdinary development and pull-request CI are network-independent. Run the full\noffline gate, including snapshot hashes and generated count validation, with:\n\n```bash\nnpm --prefix cli run verify:data\n# Or check only the generated catalog summary:\nnpm --prefix cli run validate:catalog-summary\n```\n\nRefresh normalization can also be exercised entirely offline against the\ncommitted fixtures. Outputs go to a temporary candidate directory and never\nreplace canonical data:\n\n```bash\ncandidate_dir=\"$(mktemp -d)\"\npython3 scripts/refresh-google-fonts.py \\\n --api-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-api.json \\\n --metadata-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-metadata.json \\\n --existing-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-existing.csv \\\n --overrides src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/google-overrides.json \\\n --output-csv \"$candidate_dir/google-fonts.csv\" \\\n --license-output \"$candidate_dir/google-font-licenses.json\" \\\n --metadata-revision fixture-catalogs-v1 \\\n --verified-at 2026-08-13 --expected-count 2 --approve-changes\npython3 scripts/refresh-icon-catalog.py \\\n --input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-core.json \\\n --package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-package.json \\\n --react-package-json src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-package.json \\\n --react-exports-input src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/phosphor-react-exports.json \\\n --curated-csv src/ui-ux-pro-max/scripts/tests/fixtures/catalogs/icons-curated.csv \\\n --output \"$candidate_dir/phosphor-icons-upstream.json\" \\\n --verified-at 2026-08-13 --expected-count 2\n```\n\nLive upstream refresh is intentionally isolated in the `refresh-catalogs.yml`\nworkflow, scheduled for Mondays at 03:17 UTC and also available on demand.\nConfigure `GOOGLE_FONTS_API_KEY` as a GitHub Actions secret, then run and\ndownload its review artifact:\n\n```bash\ngh workflow run refresh-catalogs.yml\nrun_id=\"$(gh run list --workflow refresh-catalogs.yml --limit 1 --json databaseId --jq '.[0].databaseId')\"\ngh run watch \"$run_id\"\ngh run download \"$run_id\" --name \"catalog-refresh-review-$run_id\"\n```\n\nThe workflow reads the Google Fonts Developer API and pinned official Phosphor\npackages, writes candidates and unified diffs to an artifact, and has read-only\nrepository permissions. It never commits, pushes, opens a PR, or merges. Review\nthe change reports, exclusions, licenses, relevance metrics, and offline gate\nbefore manually promoting candidate files into `src/ui-ux-pro-max/data/`.\n\n\n## Automated Releases\n\nThis repository uses semantic-release with Conventional Commits to create GitHub releases automatically:\n\n- `dev` branch creates beta GitHub prereleases such as `2.6.0-beta.1`.\n- `main` branch creates official stable GitHub releases such as `2.6.0`.\n\nRelease notes and `CHANGELOG.md` are generated from Conventional Commit messages. Version numbers are synchronized across `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, and `cli/package-lock.json` during release preparation.\n\nUse these commit types for correct version bumps:\n\n- `fix:` -> patch release\n- `feat:` -> minor release\n- `feat!:` or `BREAKING CHANGE:` -> major release\n\nThe release workflow uses the default `GITHUB_TOKEN` for GitHub releases and the repository `NPM_TOKEN` secret to publish `ui-ux-pro-max-cli` to npm.\n\n## Troubleshooting\n\n### `uipro: unknown command 'uninstall'` or `unknown command 'update'`\n\nYour installed version of `ui-ux-pro-max-cli` is outdated. Update it and retry:\n\n```bash\nnpm install -g ui-ux-pro-max-cli@latest\nuipro uninstall\n```\n\n### `uipro uninstall` says \"No installed AI skill directories detected\"\n\nThe skill was installed in a different directory than where you're running the command. Either:\n\n```bash\n# Option A โ€” run from the project root where you originally installed it\ncd /path/to/your/project\nuipro uninstall\n\n# Option B โ€” remove the global install\nuipro uninstall --global\n\n# Option C โ€” remove manually\nrm -rf .claude/skills/ui-ux-pro-max # Claude Code\nrm -rf .cursor/skills/ui-ux-pro-max # Cursor\nrm -rf .windsurf/skills/ui-ux-pro-max # Windsurf\nrm -rf .agents/skills/ui-ux-pro-max # Antigravity / Codex\n```\n\n### Claude.ai's \"Upload a skill\" dialog says \"Zip contains too many files (maximum 200)\"\n\nDo not upload the full GitHub repository ZIP. It is a development checkout that includes source code, CLI assets, documentation, previews, and multiple bundled skills, so it exceeds Claude's 200-file upload limit. It is not a Claude skill upload artifact, and this project does not currently publish a separate manual-upload ZIP for Claude.ai.\n\nFor Claude Code, install through the Marketplace:\n\n```bash\n/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill\n/plugin install ui-ux-pro-max@ui-ux-pro-max-skill\n```\n\nOr use the CLI installer:\n\n```bash\nnpx ui-ux-pro-max-cli init --ai claude\n```\n\n### Claude Marketplace install fails with \"Zip file contains a symbolic link\"\n\nThis is a known issue with versions prior to v2.5.1. The repository used symlinks internally which some installation tools can't handle. **Fix:** use the CLI installer instead:\n\n```bash\nnpm install -g ui-ux-pro-max-cli\nuipro init --ai claude\n```\n\nOr wait for the next release where this is resolved.\n\n### `npm install -g ui-ux-pro-max-cli` fails with permission error\n\nUse a Node version manager (recommended), or skip the global install entirely:\n\n```bash\n# npx without installing globally\nnpx ui-ux-pro-max-cli init --ai claude\n```\n\n### Python not found when running design system commands\n\nThe search scripts require Python 3.x. Install it manually from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). AI agents should not install it for you โ€” they are instructed to ask you instead.\n\n### Design system output is cut off / fields truncated\n\nHuman-readable output truncates long fields at 300 characters. Use `--json` to get the full, untruncated data:\n\n```bash\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"SaaS\" --domain style --json\n```\n\n---\n\n## Star History\n\n[![Star History Chart](https://star-history.dera.page/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.dera.page/#nextlevelbuilder/ui-ux-pro-max-skill&Date)\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Compatible Agents\n\nThis skill works with:\n- [Claude Code](https://claude.com/product/claude-code)\n- [AdaL](https://sylph.ai/) - Self-evolving AI coding agent ([Docs](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli))\n", "bytes": 33302, "sha": "a2c3707e78aa0a0d86ec96ab35f8b606632dbd07f57c4c912ad8523129c04d87", "repo_slug": "nextlevelbuilder/ui-ux-pro-max-skill", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/skl_nextlevelbuilder_ui_ux_pro_max_skill_ckm_06a50378/readme" }