Add website-builder-setup skill
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDXAh86FTSBLqF8ohPqZ88
This commit is contained in:
1 file changed
+143
@@ -0,0 +1,143 @@
|
||||
---
|
||||
name: website-builder-setup
|
||||
description: "Install the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience needed."
|
||||
---
|
||||
|
||||
# Website Builder Setup
|
||||
|
||||
This skill walks you through installing everything you need to build professional, animated websites with Claude Code. No coding experience required.
|
||||
|
||||
## What Gets Installed
|
||||
|
||||
| Tool | What it does |
|
||||
|------|-------------|
|
||||
| **UI/UX Pro Max** | Gives Claude access to 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not generated. |
|
||||
| **Framer Motion** | Adds smooth animations — page transitions, hover effects, scroll reveals. Makes sites feel alive. |
|
||||
| **21st.dev Magic** | A library of 100+ polished React components Claude can pull from. Production-quality building blocks. |
|
||||
|
||||
## Workflow
|
||||
|
||||
When this skill is triggered, walk the user through each step one at a time. Be encouraging and clear — assume they have zero coding experience. If any step fails, don't stop. Acknowledge it, give them the manual command, and keep moving.
|
||||
|
||||
---
|
||||
|
||||
### Step 1: Check Prerequisites
|
||||
|
||||
> Before we start, let me make sure you have what we need.
|
||||
|
||||
Run this silently:
|
||||
```bash
|
||||
node --version 2>&1 && npm --version 2>&1
|
||||
```
|
||||
|
||||
- If Node.js is installed → say "You're good — Node.js is installed. Let's go."
|
||||
- If NOT installed → say:
|
||||
|
||||
> You need Node.js first. Go to https://nodejs.org and download the LTS version. Install it, restart your terminal, then come back and run `/website-builder-setup` again. Takes 2 minutes.
|
||||
|
||||
Stop here if Node is missing.
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Install UI/UX Pro Max
|
||||
|
||||
> **Step 1 of 3: UI/UX Pro Max**
|
||||
>
|
||||
> This gives me a massive design library — 50+ styles, 161 color palettes, 57 font pairings. When you ask me to build a website, I'm pulling from a real design system instead of guessing. This is why the output won't look like generic AI slop.
|
||||
>
|
||||
> Installing now...
|
||||
|
||||
Run:
|
||||
```bash
|
||||
npm install -g uipro-cli 2>&1
|
||||
```
|
||||
|
||||
Then:
|
||||
```bash
|
||||
uipro init --ai claude 2>&1
|
||||
```
|
||||
|
||||
- On success → "UI/UX Pro Max is installed. Your design stack is ready."
|
||||
- On failure → "Hit a snag. You can try manually later: `npm install -g uipro-cli && uipro init --ai claude`. Let's keep going."
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Install Framer Motion
|
||||
|
||||
> **Step 2 of 3: Framer Motion**
|
||||
>
|
||||
> This teaches me how to add real animations to your websites — smooth page transitions, hover effects, scroll-triggered reveals. The stuff that makes a $500 site look like a $10,000 site.
|
||||
>
|
||||
> Installing now...
|
||||
|
||||
Run:
|
||||
```bash
|
||||
npm install framer-motion 2>&1
|
||||
```
|
||||
|
||||
- On success → "Framer Motion is installed. Your sites will have real animations now."
|
||||
- On failure → "Hit a snag. You can try manually later: `npm install framer-motion`. Moving on."
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Set Up 21st.dev Magic
|
||||
|
||||
> **Step 3 of 3: 21st.dev Components**
|
||||
>
|
||||
> This connects me to a library of 100+ beautifully designed React components. Instead of building everything from scratch, I pull from production-quality building blocks — buttons, navbars, hero sections, cards, footers — all pre-designed and ready to use.
|
||||
>
|
||||
> This one needs a free API key. Here's how to get it:
|
||||
>
|
||||
> 1. Go to **https://21st.dev/magic/console**
|
||||
> 2. Sign up or log in (it's free)
|
||||
> 3. Copy your API key
|
||||
> 4. Paste it here when I ask for it
|
||||
|
||||
Wait for the user to provide their API key.
|
||||
|
||||
Once they provide it, add the MCP server to their Claude Code config:
|
||||
|
||||
Read `~/.claude.json`, find the `mcpServers` object, and add:
|
||||
|
||||
```json
|
||||
"21st-dev-magic": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@21st-dev/magic@latest"],
|
||||
"env": {
|
||||
"API_KEY": "THEIR_KEY_HERE"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
After writing the config:
|
||||
|
||||
> 21st.dev Magic is connected. You'll need to restart Claude Code for this one to kick in — just close and reopen your terminal after we're done.
|
||||
|
||||
---
|
||||
|
||||
### Step 5: Done
|
||||
|
||||
> **You're all set.** Here's what you just installed:
|
||||
>
|
||||
> - **UI/UX Pro Max** — 50+ styles, 161 palettes, 57 font pairings
|
||||
> - **Framer Motion** — smooth, professional animations
|
||||
> - **21st.dev Magic** — 100+ production-ready components
|
||||
>
|
||||
> **To build your first website, just tell me:**
|
||||
> - What your business does
|
||||
> - Who it's for
|
||||
> - What vibe you want (dark, minimal, bold, playful, etc.)
|
||||
>
|
||||
> I'll handle the rest. Try something like:
|
||||
>
|
||||
> *"Build me a landing page for my consulting business targeting small business owners. Dark theme, modern, with animations."*
|
||||
>
|
||||
> **Important:** Restart Claude Code first so 21st.dev loads in. Then let's build something.
|
||||
|
||||
## Rules
|
||||
- Walk through each step ONE AT A TIME
|
||||
- Never dump all instructions at once
|
||||
- If any install fails, don't stop — acknowledge, give manual command, keep moving
|
||||
- Be encouraging and casual throughout
|
||||
- Assume zero coding experience
|
||||
- After everything is installed, prompt them to build their first site
|
||||
Reference in new issue
Block a user