website-cloner

Website cloning uses orchestrated AI agents to capture visuals, extract assets, and generate a React component with Tailwind CSS and motion. Run /clone-website [URL] to trigger the end-to-end workflow, which outputs a single production-ready component after up to five QA iterations.

Yes. The Skill converts any website into a React component styled with Tailwind CSS and motion libraries. Framework auto-detection handles Next.js App Router, Pages Router, or vanilla React, and the component integrates directly into app/clone/page.tsx or pages/clone.tsx.

Pixel-perfect cloning automates visual fidelity by running four specialized sub-agents in parallel: one captures screenshots, another extracts styles and assets, a third implements the React clone, and a fourth validates QA. Manual recreation requires hand-coding each element; automation preserves exact spacing, colors, and motion.

A looped QA-reviewer agent compares the generated React component against the original site visually and functionally, iterating up to five times. Each iteration refines Tailwind classes, motion timing, and asset references until the output matches the source within acceptable tolerances.

You receive a single React component (Tailwind + motion), contextual assets (images, fonts, icons), and implementation notes. The component is framework-agnostic and ready for integration into Next.js, Remix, or standard React projects with no additional styling.