What tech stack does the cloned code use?

The skill generates code using React for structure, Tailwind CSS for styling (including arbitrary hex values for precision), and the 'motion' library for animations.

What are the requirements to run this skill?

You need Claude Code installed, the Playwright MCP server configured, and the four specialized sub-agents created using the provided prompts.

Does it handle images and assets automatically?

Yes, the website-extractor sub-agent downloads images, videos, and icons to your project's public folder and updates the component paths accordingly.

Can I use this with different React frameworks?

The cloner includes auto-detection for frameworks like Next.js, Vite, and TanStack Start, ensuring the files are placed in the correct directory for your specific project structure.

How does the Website Cloner ensure visual accuracy?

It utilizes a dedicated QA-reviewer agent that performs pixel-by-pixel comparisons between the original site and the clone, running up to five refinement iterations to fix any visual discrepancies.

Pixel-Perfect Website Cloner

Name: Pixel-Perfect Website Cloner
Author: horuz-ai

byhoruz-ai

•

Design Tools

Clones existing websites into high-fidelity React components using an automated multi-agent workflow and visual analysis.

This skill provides an advanced agentic system for replicating websites with extreme accuracy by orchestrating four specialized sub-agents: screenshotter, extractor, cloner, and QA reviewer. It automates the complex process of capturing visual states, downloading assets, and generating clean React code using Tailwind CSS and motion animations. Designed for developers who need to rapidly prototype landing pages or migrate legacy designs, the skill includes a built-in feedback loop that iteratively refines the code until the output matches the original source with pixel-perfect fidelity.

Key Features

01Production-ready output using React, Tailwind CSS, and motion animations

02Orchestrated multi-agent workflow via the /clone-website slash command

03Automated extraction of colors, typography, spacing, and media assets

041 GitHub stars

05Iterative QA refinement loop for pixel-by-pixel visual accuracy

06Comprehensive visual capture including full-page, sections, and hover states

Use Cases

01Replicating marketing landing pages for rapid prototyping and testing

02Migrating legacy HTML/CSS websites into modern React and Tailwind architectures

03Extracting specific design patterns and UI components from live reference sites

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add horuz-ai/claude-plugins website-cloner

For use in Claude.ai and ChatGPT

Download Skill