skills.rest
imMamdouhaboammar
imMamdouhaboammarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-clone

Reconstruct websites by capturing real source code, assets, and runtime evidence with Playwright.

Updated Jul 27, 2026
Search Tags:#reconnaissance#playwright#webgl#reverse engineering#visual diff#website cloning#asset harvesting
One-click install
npx skills add https://github.com/imMamdouhaboammar/Mimera --skill web-clone-immamdouhaboammar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-clone
Source: https://github.com/imMamdouhaboammar/Mimera/tree/main/.agents/skills/web-clone
Command: npx skills add https://github.com/imMamdouhaboammar/Mimera --skill web-clone-immamdouhaboammar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve? Cloning a website usually fails because AI-generated reconstructions invent code instead of using the real source, fonts, images, and colors. This Skill enforces a source-first methodology: find or capture the real implementation, reverse-engineer it with evidence, then rebuild and verify it against the original. ## Core Features & Use Cases - Browser-Based Reconnaissance: Playwright scripts capture screenshots at three viewports, framework signals, computed color palettes, font faces, network requests, routes, and interaction states into a RECON/ evidence folder. - Asset Harvesting & Fidelity Gates: Downloads real images, fonts, and media (including CDN-protected assets) into local files, then audits the clone for self-hosted fonts, local images, and exact color matches with a strict exit-code gate. - WebGL/Canvas Reverse Engineering: Provides an evidence-grading discipline (SOURCE/PARTIAL/GUESS) and a baseline-first replay gate for reconstructing shader and canvas effects without guessing. - Use Case: A user asks to clone an award-winning Three.js marketing site. The Skill searches GitHub for source, runs recon and asset-harvest scripts, mirrors static build assets, rebuilds the project, then generates a comparison report and audit before delivery. ## Quick Start Ask the AI to clone a specific website URL using the web-clone skill, starting with project scaffolding and browser reconnaissance.

Frequently Asked Questions about web-clone

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

FAQPage Schema
How do I clone a website with AI without getting broken code?▼

Always obtain the real source first: search GitHub for the repository, hunt for source maps, or capture runtime evidence with browser automation. Treat any AI-generated analysis code as unverified until checked line-by-line against the real source.

How to download fonts and images from a website with hotlink protection?▼

Use a real browser network stack via Playwright rather than bare curl, since CDN assets check referer and cookies. The asset-harvest script scrolls the full page, captures all network responses, and generates a self-hosted fonts.css plus a URL-to-local-path manifest.

Can this clone WebGL or Three.js websites?▼

Yes, through a dedicated reverse-engineering branch that grades every claim as SOURCE, PARTIAL, or GUESS and requires a baseline raw replay verified frame-by-frame before refactoring. Without source code, runtime frame capture of draw calls and shaders serves as the fallback evidence.

What are the limitations of website cloning?▼

Server-side logic such as login, payments, orders, permissions, and proprietary APIs is not cloned; only demonstrable front-end substitutes are built. Copyrighted assets and sites without a license are restricted to local learning with attribution.

Why does my cloned site look different from the original?▼

The most common causes are system fonts replacing custom fonts, placeholder images instead of real downloaded assets, and eyeballed colors. The audit script with --recon --strict flags these fidelity failures by comparing against the original recon data.

Related Skills

Explore More Software Engineering Skills→
X-School-AcademyX-School-Academy
19

install-third-party-agent-skill-from-git

Install third-party agent skills from Git repositories via sparse checkout.

Official
Advanced
WebSmartTeamWebSmartTeam

site-harvest

Harvests website HTML, CSS, JS, and assets into a structured format.

Official
Advanced
ap05-epicap05-epic

parity-verify

Verify parity between legacy JSP/Java/Struts screens and React equivalents.

Community
Advanced
diazMelgarejodiazMelgarejo

brand-voice

Builds reusable writing style profiles from real source material for consistent content.

Community
Intermediate