YouTip

In the previous chapter (#) we have already learned the basic concepts of Skills. In this chapter, we will develop a project based on a specific Skill. > There are now many ready-made skills available on the market, and we can use them directly. We can find more skills at [https://skills.sh/](https://skills.sh/). > > > Installation method: > > npx skills add > To install ui-ux-pro-max via npx, refer to: (#). > > **Note:** If you are not familiar with npx, please refer to: (#) In this chapter, we will introduce a professional-level UI/UX SKILL plugin that supports multiple platforms and frameworks - UI UX Pro Max. UI UX Pro Max aims to provide professional UI/UX design intelligent support for cross-platform and multi-framework development. UI UX Pro Max is essentially a searchable design database containing styles, palettes, fonts, component suggestions, and UX guidelines, specifically fed into AI coding assistants such as Cursor, Claude Code, Windsurf, etc. **Core Highlights:** * 67 UI Styles (from Minimalism to Brutalism, Glassmorphism, Bento Grid, AI-Native, etc.) * 96 Industry Color Palettes (SaaS, Fintech, Healthcare, Beauty, EdTech...) * 57 Font Pairings (selected combinations from Google Fonts) * 25 Common Chart Types (suitable for dashboards) * 99 UX Guidelines (including accessibility, performance, interaction specifications) * 100 Industry-Specific Reasoning Rules (including anti-patterns) * Supports 13 tech stacks: React / Next.js / Vue / Tailwind / Flutter / SwiftUI / HTML+CSS / Electron, etc. **How It Works:** * Propose Requirements: Build, design, implement, optimize, or review UI / UX * Skill Auto-triggered: The AI internally searches the UI style, color, font, and UX specification databases * Intelligent Design Recommendations: Match appropriate design systems based on product type and usage scenarios * Direct Code Generation: Output UI implementations with correct colors, fonts, spacing, and structure according to best practices Source Code: [https://github.com/nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) Official Documentation: [https://ui-ux-pro-max-skill.nextlevelbuilder.io/](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) ### Installation Methods 1. Install via Claude Marketplace (Claude Code) Execute the following two commands in Claude Code to install directly. Register plugin marketplace source: /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill !(#) Install plugin: /plugin install ui-ux-pro-max@ui-ux-pro-max-skill After successful installation, restart Claude Code to use it: !(#) 2. Use CLI (Recommended) Globally install CLI: npm install -g uipro-cli # Enter your project directory cd /path/to/your/project # Install for corresponding AI assistant uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity (.agent + .shared) 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 all # All assistants 3. Other CLI Commands: uipro versions # View available versions uipro update # Update to latest version uipro init --version v1.0.0 # Install specified version 2. Using npx npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max 5. Installing a Specific Version After installation, assuming usage in Claude, execute the following command: uipro init --ai claude > Searching scripts require Python 3.x: > > # 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 After installation, the output will look like this: !(#) Then enable input command to enter Claude: claude We can use the /plugin command to view installed plugins: !(#) Press Esc to exit. Note: Skills installed via plugins are placed in ～/.claude/plugins/marketplaces. * * * ## How to Use Next, we can directly input our requirements: Build a landing page for a pet grooming service, with a lively and friendly style, and set up an appointment call-to-action button. It will prompt whether to use the skill we installed for design; just keep pressing Enter: !(#) Keep pressing Enter, and it will prompt completed features: !(#) Then check the final result, which looks much better: !(#)