skills.rest
BEIRUX
BEIRUXOFFICIAL
Explore all skills by this author →
GitHub

clone-website

Extracts assets, computed CSS, behaviors, component specs, and screenshots to rebuild websites in Next.js with shadcn/ui and Tailwind v4.

Updated Apr 3, 2026
Search Tags:#nextjs#design-to-code#web-scraping#reverse-engineering#website-clone#chrome-mcp#assets-extraction
One-click install
npx skills add https://github.com/BEIRUX/agent-skills --skill clone-website-beirux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/BEIRUX/agent-skills/tree/main/ai-website-cloner/.claude/skills/clone-website
Command: npx skills add https://github.com/BEIRUX/agent-skills --skill clone-website-beirux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clone-website automates the tedious and error-prone process of reverse-engineering and rebuilding a live website by extracting exact computed styles, assets, behaviors, and component-level specifications so developers don't have to manually inspect and reimplement every detail.

Core Features & Use Cases

  • Complete extraction: capture computed CSS, fonts, favicons, images, videos, inline SVGs, and layered assets for faithful visual reproduction.
  • Behavioral capture: document scroll-driven, hover, click, and time-based interactions with exact triggers, transitions, and state diffs.
  • Spec-driven build orchestration: produce per-component spec files, screenshots, and builder prompts and dispatch parallel builder agents while verifying TypeScript and build integrity.
  • Use Case: migrate a marketing site or product landing page into a Next.js + shadcn/ui + Tailwind v4 scaffold with auditable specs and verified builds.

Quick Start

Provide the target website URL to the clone-website skill to extract assets, write component specs, and dispatch builders to reconstruct the site locally.

Frequently Asked Questions about clone-website

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

FAQPage Schema
How do I clone a website into a Next.js project with exact CSS and assets?▼

To clone a website into Next.js, provide the target URL to automate Chrome browser extraction of computed CSS, assets, and behaviors, generating builder prompts and verified component specs. The process outputs a reproducible local project using shadcn/ui and Tailwind v4.

What is reverse-engineering a website for design-to-code migration?▼

Reverse-engineering a website for design-to-code migration captures computed styles, layered assets, and interaction behaviors from a live public page. This extracted specification allows developers to faithfully reproduce the site design into a local Next.js scaffold.

Do I need Chrome MCP and an existing npm scaffold to clone a website?▼

Yes, cloning a website requires Chrome MCP for browser automation to extract assets and an existing npm build scaffold. These prerequisites enable the tool to generate per-component screenshots, spec files, and verify TypeScript build integrity.

Can I capture scroll and hover interactions when extracting website assets?▼

Yes, behavioral capture documents scroll-driven, hover, click, and time-based interactions during website extraction. It records exact triggers, transitions, and state diffs to ensure the cloned component behaviors match the original site.

What's the best way to extract inline SVGs and computed styles from a web page?▼

The best way to extract inline SVGs and computed styles is using Chrome MCP browser automation to inspect the target page. This captures favicons, images, videos, and exact computed CSS for pixel-perfect visual reproduction.

Why does my website clone fail TypeScript build verification?▼

Website clone TypeScript build verification fails when generated component specs or builder prompts contain type errors. The orchestration process dispatches parallel builder agents and verifies build integrity to catch these issues during local reproduction.

Related Skills

Explore More Software Engineering Skills→
hgflimahgflima
1

browser-testing-with-devtools

Automate browser testing with Chrome DevTools MCP for DOM inspection and console analysis.

Community
Advanced
kmshihab7878kmshihab7878
6

clone-website

Clone public websites into componentized Next.js projects via Playwright extraction.

Community
Advanced
duylinhdang1998duylinhdang1998

clone-website

Reverse-engineers live websites into per-component specification files with extracted assets and computed CSS for Next.js builders.

Community
Advanced
HermeticOrmusHermeticOrmus
89

browser-devtools-mcp

Inspect CSS, computed styles, and element properties via Chrome DevTools MCP.

Community
Advanced