website-cloner — Claude Code skill: clone a site into React
Turns a URL into a single React component styled with Tailwind CSS and motion. Handy when you want a landing page built from an existing site's design.
npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-codeWhat website-cloner does
The workflow starts with the slash command /clone-website <url>. The orchestrator writes no code itself; it hands work to four sub-agents. website-screenshotter grabs the full page plus sections, components and hover states. website-extractor pulls assets into public/ and reads out colors, type, spacing and animations. website-cloner builds the component, and website-qa-reviewer compares it against the original pixel by pixel, sorting gaps into Critical, Major and Minor. Cloning and review repeat until the result is clean, capped at 5 iterations.
You set the sub-agents up by hand. In Claude run /agents, pick “Generate with Claude” for each one and paste its description. Names have to match exactly — website-screenshotter, website-extractor, website-cloner, website-qa-reviewer — or the orchestrator won't find them. The slash command is a file you copy from assets/clone-website.md into .claude/commands/ for the project, or ~/.claude/commands/ for yourself.
Playwright MCP has to be configured first, since screenshots and page inspection depend on it. The entry goes into ~/.claude.json or .claude/settings.json with the npx command and -y @anthropic-ai/mcp-playwright as arguments. Output is one component rather than a file tree, with sections split by comments. The iteration cap lives in phase 5 of the slash command; the output path sits in the cloner agent's system prompt.
What it helps with
- build a landing page from an existing site's design
- move someone else's markup into a React project
- download images, video and icons from a page into
public/ - read colors, fonts and spacing off a live site
- compare your build against the original pixel by pixel
Example prompts for the agent
- Clone https://example.com with
/clone-website - Build a landing page from this site:
/clone-website https://example.com - Run
/clone-website https://example.comand keep iterating until it matches
How to install website-cloner
1Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-code2Manually: put the files in place
~/.claude/skills/website-cloner/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/website-cloner/
1Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a codex2Manually: put the files in place
.agents/skills/website-cloner/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a cursor2Manually: put the files in place
.cursor/skills/website-cloner/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install horuz-ai/claude-plugins website-cloner2Manually: put the files in place
.github/skills/website-cloner/SKILL.md1Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a gemini-cli2Platform CLI
gemini skills install https://github.com/horuz-ai/claude-plugins --path plugins/website-cloner/skills/website-clonerManually: put the files in place
.devin/skills/website-cloner/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add horuz-ai/claude-plugins --skill website-cloner -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about website-cloner
How do I install website-cloner in Claude Code?
Run npx skills add horuz-ai/claude-plugins --skill website-cloner -a claude-code. The skill lands at ~/.claude/skills/website-cloner/SKILL.md.
What does website-cloner do?
It runs a site through four sub-agents and produces one React component using Tailwind CSS and motion animations, checking the build against the original.
What has to be in place before the first run?
Four sub-agents with exact names, plus Playwright MCP in ~/.claude.json or .claude/settings.json. Screenshots and page inspection fail without it.
