thomas/ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add uxpro-cli for easy skill installation (#4)

Browse Source 
* feat: add uxpro-cli for easy skill installation

- Add CLI tool (uxpro-cli) with commands: init, versions, update
- Support multiple AI assistants: claude, cursor, windsurf, antigravity, all
- Update README with CLI installation guide and usage examples
- Add CC BY-NC 4.0 license
- Update feature counts to accurate numbers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: rename CLI from uxpro to uipro

- Package: uxpro-cli -> uipro-cli
- Command: uxpro -> uipro

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Viet Tran
2025-12-02 18:55:29 +07:00
committed by GitHub
parent 6a220478a2
commit 70200ed41a
16 changed files with 796 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
README.md
View File

@@ -1,125 +1,147 @@
# UI UX Pro Max UI SKILL
# UI UX Pro Max
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
## Overview
UI UX Pro Max is a searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. It's designed to work as a skill/workflow for AI coding assistants (Claude, Windsurf, Cursor, etc.).
UI UX Pro Max is a searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. It works as a skill/workflow for AI coding assistants (Claude Code, Cursor, Windsurf, etc.).
## Features
- **50+ UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, and more
- **21 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.
- **50 Font Pairings** - Curated typography combinations with Google Fonts imports
- **20+ Chart Types** - Recommendations for dashboards and analytics
- **57 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, and more
- **95 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.
- **56 Font Pairings** - Curated typography combinations with Google Fonts imports
- **24 Chart Types** - Recommendations for dashboards and analytics
- **8 Tech Stacks** - React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind
- **UX Guidelines** - Best practices, anti-patterns, and accessibility rules
- **98 UX Guidelines** - Best practices, anti-patterns, and accessibility rules
## Installation
### 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 (.agent + .shared)
uipro init --ai all # All assistants
```
### Other CLI Commands
```bash
uipro versions # List available versions
uipro update # Update to latest version
uipro init --version v1.0.0 # Install specific version
```
### Manual Installation
Copy the appropriate folders to your project:
| AI Assistant | Folders to Copy |
|--------------|-----------------|
| Claude Code | `.claude/skills/ui-ux-pro-max/` |
| Cursor | `.cursor/commands/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
| Windsurf | `.windsurf/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
| Antigravity | `.agent/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
## 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
```
## Project Structure
```
ui-ux-pro-max/
├── .claude/skills/ui-ux-pro-max/ # Claude Code skill
│ ├── SKILL.md # Skill definition
│ ├── scripts/ # Search tools
│ │ ├── search.py # Main search script
│ │ └── core.py # Core search logic
│ └── data/ # Design database
│ ├── styles.csv # UI styles
│ ├── colors.csv # Color palettes
│ ├── typography.csv # Font pairings
│ ├── charts.csv # Chart types
│ ├── products.csv # Product recommendations
│ ├── landing.csv # Landing page structures
│ ├── ux-guidelines.csv # UX best practices
│ ├── prompts.csv # AI prompts
│ └── stacks/ # Stack-specific guidelines
│ ├── html-tailwind.csv
│ ├── react.csv
│ ├── nextjs.csv
│ ├── vue.csv
│ ├── svelte.csv
│ ├── swiftui.csv
│ ├── react-native.csv
│ └── flutter.csv
ui-ux-pro-max-skill/
├── cli/ # CLI installer (uipro-cli)
│ ├── package.json
│ └── src/
├── .claude/skills/ui-ux-pro-max/ # Claude Code skill
│ ├── SKILL.md
│ ├── scripts/
│ │ ├── search.py
│ │ └── core.py
│ └── data/
│ ├── styles.csv
│ ├── colors.csv
│ ├── typography.csv
│ ├── charts.csv
│ ├── products.csv
│ ├── landing.csv
│ ├── ux-guidelines.csv
│ ├── prompts.csv
│ └── stacks/
├── .cursor/commands/ # Cursor command
│ └── ui-ux-pro-max.md
├── .windsurf/workflows/ # Windsurf workflow
│ └── ui-ux-pro-max.md
├── .agent/workflows/ # Generic agent workflow
│ └── ui-ux-pro-max/
└── .shared/ui-ux-pro-max/ # Shared data
├── .agent/workflows/ # Antigravity workflow
│ └── ui-ux-pro-max.md
└── .shared/ui-ux-pro-max/ # Shared scripts & data
├── scripts/
└── data/
```
## Prerequisites
- Python 3.x
## Installation
### For Claude Code
The skill is automatically available in `.claude/skills/ui-ux-pro-max/`.
### For Windsurf
Use the workflow via `/ui-ux-pro-max` slash command.
### For Other Agents
Copy the workflow from `.agent/workflows/ui-ux-pro-max/`.
## Usage
### Search Command
After installation, just chat with your AI assistant naturally. The skill will automatically activate when you request UI/UX work.
```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
### 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
```
### Available Domains
### How It Works
| Domain | Use For | Example Keywords |
| ------------ | ---------------------------- | ------------------------------ |
| `product` | Product type recommendations | SaaS, e-commerce, portfolio |
| `style` | UI styles, colors, effects | glassmorphism, minimalism |
| `typography` | Font pairings | elegant, playful, professional |
| `color` | Color palettes | saas, healthcare, beauty |
| `landing` | Page structure | hero, testimonial, pricing |
| `chart` | Chart types | trend, comparison, funnel |
| `ux` | Best practices | animation, accessibility |
| `prompt` | AI prompts | (style name) |
1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve)
2. **Skill activates** - The AI automatically searches the design database for relevant styles, colors, typography, and guidelines
3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching design system
4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices
### Available Stacks
### Supported Stacks
| Stack | Focus |
| --------------- | ---------------------------------------- |
| `html-tailwind` | Tailwind utilities, responsive (DEFAULT) |
| `react` | State, hooks, performance |
| `nextjs` | SSR, routing, images |
| `vue` | Composition API, Pinia |
| `svelte` | Runes, stores, SvelteKit |
| `swiftui` | Views, State, Navigation |
| `react-native` | Components, Navigation |
| `flutter` | Widgets, State, Layout |
The skill provides stack-specific guidelines for:
### Example Workflow
- **HTML + Tailwind** (default)
- **React** / **Next.js**
- **Vue** / **Svelte**
- **SwiftUI** / **React Native** / **Flutter**
```bash
# 1. Search product type
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --domain product
# 2. Search style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism dark" --domain style
# 3. Search typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "modern professional" --domain typography
# 4. Search color palette
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "saas" --domain color
# 5. Search stack guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
```
Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.
## License
MIT
This work is licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/).
- **Free for personal use** - Use, modify, and share for non-commercial purposes
- **Attribution required** - Credit "UI UX Pro Max" when sharing
- **No commercial use** - Cannot be used for commercial purposes without permission