Content
# Claude Code UI/UX Pro Max — Single Repo
Premium UI/UX stack for Claude Code, all in one repo. Based on the 4-stage setup:
1. **Install Claude** — Claude Code CLI
2. **UI UX Pro Max** — design-intelligence skill (50+ styles, 161 palettes, 57 font pairings, accessibility checks)
3. **21st.dev Magic** — MCP server that generates production-ready UI components from natural language
4. **Framer Motion** — production animation library for React
## Quick start
```bash
git clone <your-repo-url> claude-ux-ui-pro-max
cd claude-ux-ui-pro-max
./install.sh
```
That runs all four stages in order. Or run them individually:
```bash
./install-stages/01-install-claude.sh
./install-stages/02-ui-ux-pro-max.sh
./install-stages/03-21st-dev-magic.sh
./install-stages/04-framer-motion.sh
```
## Prerequisites
- **Node.js 18+** and **npm**
- **git**
- A **21st.dev API key** (free tier available) — get one at https://21st.dev/magic/console
Set it before stage 3:
```bash
export TWENTYFIRST_API_KEY="your-key-here"
```
## What each stage does
### Stage 1 — Install Claude
Installs `@anthropic-ai/claude-code` globally via npm and runs `claude --version` to verify.
### Stage 2 — UI UX Pro Max skill
Uses the Claude Code plugin marketplace:
```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
The stage script prints these two commands so you can run them inside `claude` interactively (slash commands can't be invoked from a shell).
### Stage 3 — 21st.dev Magic MCP
Registers the Magic MCP server with Claude Code:
```bash
npx @21st-dev/cli@latest install claude --api-key "$TWENTYFIRST_API_KEY"
```
### Stage 4 — Framer Motion
Initializes a Next.js + TypeScript + Tailwind app in `./app/` and installs `framer-motion`.
Skip the Next.js init by setting `SKIP_SCAFFOLD=1` — only `framer-motion` will be added to the current project.
## After install
Open the project in Claude Code:
```bash
cd app && claude
```
Then in Claude, try:
> "Build me a premium landing page hero with a glassmorphism card and a Framer Motion entrance animation."
The UI UX Pro Max skill activates automatically. Magic MCP fetches matching components. Framer Motion handles motion.
## Troubleshooting
- `claude: command not found` after stage 1 → check `npm config get prefix` is on your PATH.
- Stage 3 fails with `401` → API key missing or invalid. Re-export `TWENTYFIRST_API_KEY` and rerun.
- Stage 4 fails on `create-next-app` → run with `SKIP_SCAFFOLD=1` and add Next.js manually.
