website-cloner — скилл для Claude Code: клонирование сайтов в React
Клонирует сайт по URL в один React-компонент с Tailwind CSS и motion. Пригодится, когда нужен лендинг по чужому дизайну или перенос вёрстки в проект.
npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-codeЧто делает website-cloner
Скилл запускает оркестратор через слэш-команду /clone-website <url>. Сам он код не пишет — раздаёт задачи четырём субагентам: website-screenshotter снимает полную страницу, секции, компоненты и состояния наведения, website-extractor скачивает ассеты в public/ и вытаскивает цвета, типографику, отступы и анимации, website-cloner собирает компонент, website-qa-reviewer сравнивает результат попиксельно и делит расхождения на Critical, Major и Minor. Шаги клонирования и проверки повторяются, пока не выйдет идеально, максимум 5 итераций.
Внутри — четыре субагента, слэш-команда и файлы-справочники. Субагентов создают вручную: в Claude запускается /agents, для каждого выбирается «Generate with Claude» и вводится описание. Имена должны совпадать точно: website-screenshotter, website-extractor, website-cloner, website-qa-reviewer, иначе оркестратор их не найдёт. Слэш-команду копируют из assets/clone-website.md в .claude/commands/ для проекта или в ~/.claude/commands/ лично для себя.
Без настроенного Playwright MCP скилл не заработает: он нужен для скриншотов и разбора страницы. Конфигурация кладётся в ~/.claude.json или .claude/settings.json с командой npx и аргументами -y @anthropic-ai/mcp-playwright. На выходе получается один компонент, а не набор файлов: секции разделены комментариями. Лимит итераций правится в пятой фазе слэш-команды, путь вывода — в системном промпте клонера.
Какие задачи решает
- собрать лендинг по дизайну существующего сайта
- перенести чужую вёрстку в React-проект
- скачать картинки, видео и иконки со страницы в
public/ - вытащить палитру, шрифты и отступы из готового сайта
- сверить свою вёрстку с оригиналом попиксельно
Примеры запросов агенту
- Клонируй сайт https://example.com через
/clone-website - Сделай лендинг на основе этой страницы:
/clone-website https://example.com - Запусти
/clone-website https://example.comи доведи до идеала
Как установить website-cloner
1Через Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-code2Вручную: положить файлы
~/.claude/skills/website-cloner/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/website-cloner/
1Через Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a codex2Вручную: положить файлы
.agents/skills/website-cloner/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a cursor2Вручную: положить файлы
.cursor/skills/website-cloner/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install horuz-ai/claude-plugins website-cloner2Вручную: положить файлы
.github/skills/website-cloner/SKILL.md1Через Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a gemini-cli2Командой платформы
gemini skills install https://github.com/horuz-ai/claude-plugins --path plugins/website-cloner/skills/website-clonerВручную: положить файлы
.devin/skills/website-cloner/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о website-cloner
Как установить website-cloner в Claude Code?
Выполните npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-code, скилл встанет в ~/.claude/skills/website-cloner/SKILL.md.
Что делает website-cloner?
Прогоняет сайт через четыре субагента и собирает из него один React-компонент на Tailwind CSS с анимациями motion, сверяя результат с оригиналом.
Что нужно настроить до первого запуска?
Четырёх субагентов с точными именами и Playwright MCP в ~/.claude.json или .claude/settings.json. Без Playwright скриншоты и разбор страницы не отработают.
