# website-builder-setup

Walks you through setting up a complete web design stack in Claude Code with UI/UX Pro Max, Framer Motion, and 21st.dev Magic.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 580 installs · ★ 370
- Author: tenfoldmarc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tenfoldmarc/website-builder-setup/tree/HEAD/website-builder-setup/SKILL.md
- Updated: 2026-06-11
- HTML: https://affpapa.org/en/nevibecode/skills/website-builder-setup

## What it does

This skill guides the environment setup step by step. It starts by verifying whether Node.js and npm are present on the machine. If Node is missing, the workflow halts until you install the LTS release.

Next, it installs `uipro-cli` globally for design styling (giving access to 50+ styles, 161 palettes, and 57 font pairings) and adds `framer-motion` for React transitions. The final step configures the 21st.dev Magic MCP server using `npx -y @21st-dev/magic@latest` to pull 100+ components.

The setup will stall on the last step without a free API key from 21st.dev. Once added to `~/.claude.json`, a quick terminal restart enables the new toolset.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/website-builder-setup/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/website-builder-setup/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/website-builder-setup/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/website-builder-setup/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install tenfoldmarc/website-builder-setup website-builder-setup
```

2. **Manually: put the files in place**
- File: `.github/skills/website-builder-setup/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/tenfoldmarc/website-builder-setup --path website-builder-setup
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/website-builder-setup/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/tenfoldmarc/website-builder-setup/tree/HEAD/website-builder-setup/SKILL.md

## When to use it
- verify Node.js and npm presence before starting web work
- install the uipro-cli design library and initialize it
- add Framer Motion to the project for animations
- configure the 21st.dev Magic MCP server with an API key

## Example prompts
- Run /website-builder-setup to prepare my frontend stack
- Set up the website builder tools using /website-builder-setup

## Similar
- [gsap-awwwards-website](https://affpapa.org/en/nevibecode/skills/gsap-awwwards-website.md) — skill · 810 installs
- [animation-performance](https://affpapa.org/en/nevibecode/skills/animation-performance.md) — skill · 36800 installs
- [interaction-design](https://affpapa.org/en/nevibecode/skills/interaction-design.md) — skill · 16146 installs
- [design-motion-principles](https://affpapa.org/en/nevibecode/skills/design-motion-principles.md) — skill · 12700 installs
- [motion-framer](https://affpapa.org/en/nevibecode/skills/motion-framer.md) — skill · 5900 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md