skill.install
Claude Code · UI UX Pro Max
Step-by-step breakdown

How to install a
Claude Skill from GitHub

Everything that happened in your terminal, what each command actually did, and how to do it entirely yourself next time — no AI hand-holding needed.

your-project — bash — 80×24
 ~  npm install -g ui-ux-pro-max-cli added 143 packages in 3.8s
ui-ux-pro-max-cli@2.9.0 installed globally
Command uipro is now available anywhere
 ~/your-project  uipro init --ai cursor Fetching skill files…
Writing to .cursor/skills/ui-ux-pro-max/
Skill active. Claude now has design intelligence.
 ~/your-project 
The two commands — explained
1

Install the CLI tool

npm · global · one time only
npm install -g ui-ux-pro-max-cli

npm (Node Package Manager) downloads a tool called uipro and installs it globally — meaning you can run it from any folder on your machine, not just this one.

Think of it like installing an app. The -g flag means global. Do this once per machine, then you have uipro forever.
2

Run the installer

uipro · project-level
uipro init --ai cursor

This command comes from the tool you just installed — not from the GitHub repo. That's why you couldn't find it. When you run it, uipro fetches the skill files and drops them exactly where Cursor expects them.

This is what confused you. Command 2 belongs to the tool from Command 1. The GitHub repo is the warehouse — the CLI is the delivery driver.
Why the second command "wasn't in the repo"
The GitHub repo holds the skill's content. But you never interact with it directly. The uipro CLI is a separate npm package — it knows how to grab those files and place them correctly for each different editor. Two completely separate things, working together. Once you know this pattern, you'll recognise it everywhere.
What gets put on your machine
your-project/ — after running uipro init
📁 your-project/
├── 📁 src/
├── 📁 public/
├── 📁 .cursor/created by uipro
│   └── 📁 skills/
│       └── 📁 ui-ux-pro-max/skill lives here
│            ├── SKILL.md
│            ├── 📁 scripts/
│            └── 📁 data/
└── package.json
Cursor (and Claude Code) automatically reads anything inside .cursor/skills/ at startup. That's how the skill activates — no settings to toggle, no config to write. The file location is the activation mechanism.
How to do it entirely yourself, next time
1

Check Node.js is installed

Node.js ships with npm. Run this — if you see a version number, you're set. If the command isn't found, download Node from nodejs.org.

node --version
Should return something like v20.11.0 or newer
2

Install the CLI tool globally

This puts the uipro command on your machine. You only ever run this once — it lives globally across all your projects.

npm install -g ui-ux-pro-max-cli
3

Navigate to your project folder

The skill installs relative to where you are when you run the command. Make sure you're in the root of the project you want to use it in.

cd /path/to/your/project
4

Run the init command for your editor

Pick the one that matches your editor — --ai tells uipro exactly where to drop the files.

Cursor
uipro init --ai cursor
Claude Code (VS Code)
uipro init --ai claude
Windsurf
uipro init --ai windsurf
Every editor at once
uipro init --ai all
Want it available across all projects? Add --global to any of the above.

Done — the skill is live

Your editor picks it up automatically from the skills folder. No config, no restart. Just ask Claude to build something UI-related and it activates. If you ever want to update it: uipro update. To remove: uipro uninstall.

The mental model going forward

How any skill like this works

pattern · repeatable
Source
📦
GitHub Repo
the warehouse
npm install
Delivery
🔧
CLI Tool (uipro)
the delivery driver
uipro init
Live
Your Editor
.cursor/skills/
When you see any skill like this on GitHub, the pattern is always: install a helper tool via npm → run that tool inside your project → it places the right files in the right place for your AI editor to find automatically.

The GitHub repo is just the warehouse. You never go there manually. The uipro CLI knows exactly which shelf to put things on for each different editor. Knowing this pattern means you can apply it to any Claude Code skill you find in the wild — no AI needed.