skills.rest
kmshihab7878
kmshihab7878COMMUNITY
Explore all skills by this author →
GitHub

clone-website

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

6|1|Updated Apr 7, 2026
Search Tags:#frontend#nextjs#assets#playwright#pixel-perfect#clone#reverse-engineering
One-click install
npx skills add https://github.com/kmshihab7878/claude-code-setup --skill clone-website-kmshihab7878
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/kmshihab7878/claude-code-setup/tree/main/skills/clone-website
Command: npx skills add https://github.com/kmshihab7878/claude-code-setup --skill clone-website-kmshihab7878

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reproducing a live website by hand is slow, error-prone, and often misses exact styles, layered assets, and interactive behaviors. This Skill automates meticulous extraction of DOM structure, computed CSS, assets, and interaction states and converts them into component specs and builder tasks so teams can produce a faithful, working Next.js clone with audit trails and build verification.

Core Features & Use Cases

  • Playwright-driven extraction: automated snapshots, DOM refs, computed styles, multi-state captures (scroll, hover, click), and asset enumeration.
  • Componentized output: writes precise spec files for each component, dispatches parallel builder agents into isolated worktrees, and enforces TypeScript and build checks.
  • Asset & behavior fidelity: downloads images/videos/SVGs, extracts fonts and favicons, and records dynamic behaviors and transitions for pixel-perfect recreation.
  • Use cases: site migration, UI replication for testing or design systems, competitive analysis, and rapid prototyping from an existing production site.

Quick Start

Use the clone-website skill to clone https://example.com into a Next.js project producing component specs, screenshots, and downloaded assets.

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 a Next.js project, this Skill uses Playwright to extract the DOM, computed CSS, and assets, then dispatches parallel builder agents to reconstruct the page as a pixel-perfect, componentized Next.js project.

Can I automate web reverse-engineering to capture interactive behaviors like hover and scroll states?▼

Yes, web reverse-engineering here automates Playwright browser interactions to capture multi-state snapshots of hover, scroll, and click behaviors, ensuring dynamic transitions are recorded for pixel-perfect recreation.

What is the best way to extract computed CSS and DOM structure from a public website for UI replication?▼

The best way to extract computed CSS and DOM structure is through automated Playwright extraction, which snapshots page elements and computes styles to generate precise component specifications for UI replication.

Does pixel-perfect website cloning require a pre-existing Next.js scaffold and Playwright MCP?▼

Yes, pixel-perfect website cloning requires a Next.js scaffold for the output project and Playwright MCP for browser automation to extract assets and verify the TypeScript build.

Why use parallel builder agents when migrating a site to a componentized Next.js architecture?▼

Parallel builder agents are used during site migration to work on isolated component specifications simultaneously, accelerating the reconstruction of page sections into a verified, componentized Next.js architecture.

When should I not use automated Playwright extraction for web cloning?▼

Automated Playwright extraction for web cloning may not be suitable for private, authenticated pages behind logins or sites with strict anti-bot protections, as it requires public access to capture DOM structure and assets.

Related Skills

Explore More Software Engineering Skills→
aresbitaresbit
46

agent-browser

Automate browser navigation, form filling, and data extraction via CLI.

Community
Intermediate
YeaChan05YeaChan05

visual-ralph

Automate frontend UI restyling with pixel-diff verification against approved references.

Community
Advanced
ucirelloucirello
2

browser-bug-testing-workflow

Automate browser UI testing with Playwright and tmux server management.

Community
Advanced
hico-mrmgnhico-mrmgn

lp-creator

Create standalone HTML/CSS/JS landing pages without build tooling.

Community
Intermediate