website-clone

Name: website-clone
Availability: InStock
Author: titta

Reverse-engineer live website URLs into Next.js, shadcn, and Tailwind codebases.

29|12|Updated Mar 30, 2026

Search Tags:#automation #nextjs #web-development #tailwind #shadcn #reverse-engineering

Ready to run

npx skills add https://github.com/matteotitta/genesys-skills --skill website-clone

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: website-clone
Source: https://github.com/matteotitta/genesys-skills/tree/main/skills/primitives/website/execution/website-clone
Command: npx skills add https://github.com/matteotitta/genesys-skills --skill website-clone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the high-friction problem of manually rebuilding existing websites by automating the extraction of design tokens, layout structures, and interaction models from any live URL into a production-ready Next.js codebase.

Core Features & Use Cases

Pixel-Perfect Extraction: Uses computed style analysis to capture exact design tokens, fonts, and responsive behaviors.
Parallel Builder Orchestration: Dispatches specialized agents to build components in parallel, ensuring a modular and maintainable output.
Use Case: Quickly migrate a legacy WordPress or Webflow site into a modern, performant Next.js and Tailwind stack for better scalability and developer experience.

Quick Start

Invoke the website-clone skill by providing the target URL to initiate the five-phase reverse-engineering workflow.

Frequently Asked Questions about website-clone

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reverse-engineer a live website into Next.js code?▼

You reverse-engineer a live website into Next.js code by automating the extraction of design tokens, layout structures, and interaction models from the target URL. The process outputs a deployable Next.js, shadcn, and Tailwind codebase.

Can I migrate a Webflow or WordPress site to Tailwind and shadcn automatically?▼

Yes, you can migrate a Webflow or WordPress site to Tailwind and shadcn automatically. The workflow captures exact design tokens, responsive behaviors, and assets to rebuild the site into a modern Next.js stack.

Do I need browser-automation tools to extract design tokens from a live URL?▼

Yes, you need browser-automation MCP tools to extract design tokens from a live URL. These tools are required to perform accurate DOM analysis and capture the current state of the website for pixel-perfect reconstruction.

What is the best way to clone a website's design tokens and interaction models?▼

The best way to clone a website's design tokens and interaction models is by using computed style analysis. This method captures exact fonts, responsive behaviors, and interaction states before dispatching parallel builders to generate code.

How does parallel builder orchestration work for web development reverse-engineering?▼

Parallel builder orchestration in web development reverse-engineering works by dispatching specialized agents to build components simultaneously. This ensures the output Next.js and Tailwind codebase remains modular and maintainable.

Are there limitations when reconstructing full-stack websites into Next.js?▼

A limitation when reconstructing full-stack websites into Next.js is the dependency on browser-automation tools for accurate DOM analysis. Without them, capturing dynamic state and interactive behaviors for a pixel-perfect clone may fail.