Skip to main content
affpapa.org
RU EN
skill CX Codex

website-builder-setup — Claude Code skill: how to install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code
Open on GitHub

What website-builder-setup 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.

What it helps with

  • 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 for the agent

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

How to install website-builder-setup

1Skills CLI (Vercel)

npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code

2Manually: put the files in place

~/.claude/skills/website-builder-setup/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/website-builder-setup/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about website-builder-setup

How to install website-builder-setup in Claude Code?

Run npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code in your terminal. You can also save the file directly to ~/.claude/skills/website-builder-setup/SKILL.md.

What does website-builder-setup do?

It automates setting up three web design tools: uipro-cli, framer-motion, and the 21st.dev Magic MCP server.

What prerequisites does website-builder-setup require?

You need Node.js with npm installed and a free API key generated from 21st.dev/magic/console.

Similar skills

Everything for Frontend and UI →
gsap-awwwards-website rebyteai-template This skill scaffolds a product landing template built on React 19, GSAP scroll animations and Tailwind CSS 4. CX Codex +1 810installs animation-performance emilkowalski A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. CX Codex +1 36,800installs interaction-design Seth Hobson This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns. CX Codex 16,146installs design-motion-principles kylezantos Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions. CX Codex +1 12,700installs motion-framer freshtechbro Guides an agent through Motion and Framer Motion animations for React interfaces, from hover effects to state and layout transitions. CX Codex +1 5,900installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor