website-builder-setup — скилл для Claude Code: настройка
Пошагово разворачивает стек для создания сайтов в Claude Code: UI/UX Pro Max, Framer Motion и компоненты 21st.dev. Помогает подготовить окружение без ручной возни с пакетами.
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-codeЧто делает website-builder-setup
Скилл проводит пользователя через подготовку окружения для веб-разработки. Сначала проверяется наличие Node.js и npm в системе. Если среды нет, работа прерывается до её установки.
Далее последовательно ставятся утилита uipro-cli со стилями (50+ направлений, 161 палитра, 57 сочетаний шрифтов) и библиотека framer-motion для анимаций. Последним шагом подключается MCP-сервер 21st.dev Magic через npx -y @21st-dev/magic@latest, открывающий доступ к каталогу из более чем 100 готовых компонентов React.
Без бесплатного API-ключа от консоли 21st.dev финальный шаг не завершить. Конфигурация сохраняется в файл ~/.claude.json, после чего агент просит перезапустить терминал для активации инструментов.
Какие задачи решает
- проверить наличие Node.js и npm перед сборкой фронтенда
- установить глобальный CLI UI/UX Pro Max для дизайн-систем
- подключить библиотеку Framer Motion в проект
- сконфигурировать MCP-сервер 21st.dev Magic с API-ключом
Примеры запросов агенту
- Запусти /website-builder-setup для подготовки стека сайта
- Настрой окружение для создания лендинга через /website-builder-setup
Как установить website-builder-setup
1Через Skills CLI (Vercel)
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code2Вручную: положить файлы
~/.claude/skills/website-builder-setup/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/website-builder-setup/
1Через Skills CLI (Vercel)
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a codex2Вручную: положить файлы
.agents/skills/website-builder-setup/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a cursor2Вручную: положить файлы
.cursor/skills/website-builder-setup/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install tenfoldmarc/website-builder-setup website-builder-setup2Вручную: положить файлы
.github/skills/website-builder-setup/SKILL.md1Через Skills CLI (Vercel)
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a gemini-cli2Командой платформы
gemini skills install https://github.com/tenfoldmarc/website-builder-setup --path website-builder-setupВручную: положить файлы
.devin/skills/website-builder-setup/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о website-builder-setup
Как установить website-builder-setup в Claude Code?
Выполните команду npx skills add tenfoldmarc/website-builder-setup --skill website-builder-setup -a claude-code. Также можно поместить файл вручную по пути ~/.claude/skills/website-builder-setup/SKILL.md.
Что делает website-builder-setup?
Скилл по шагам настраивает окружение: ставит uipro-cli, добавляет framer-motion и прописывает MCP-сервер 21st.dev Magic.
Что нужно подготовить перед запуском website-builder-setup?
Понадобятся установленный Node.js с npm, а также бесплатный API-ключ от сервиса 21st.dev для MCP-сервера.
