What does this skill do, and when should you use it?
A Claude Code skill that turns 'clone this website' into a repeatable six-step pipeline: find real source first, browser-recon the site, pick a path by site type, scaffold the project, verify, then swap in your own content. It mandates that every executable code block in any AI-written analysis be verified line-by-line against real source, and ships a dozen Playwright scripts for screenshots, route crawling, network capture, interaction probing and visual diffing. It covers static sites, React/Vue/Next content sites, and WebGL/Canvas-heavy frontends, with a flagship byte-faithful clone of a 1067-line single-file marbles demo.
Runs a six-step decision tree: Step 1 searches GitHub via gh api for the real source; if none is found, it runs recon-site.mjs, route-crawl.mjs, network-capture.mjs, interaction-probe.mjs and sourcemap-hunt.mjs to build RECON evidence. Based on recon it picks a path — wget --mirror or mirror-site.mjs full asset mirroring for static builds, template rebuild for React/Vue/Next sites, line-by-line reverse-engineering for WebGL frontends. It then strips tracking scripts, writes NOTES.md/TEARDOWN.md, and generates original-vs-clone comparison reports with compare-recon.mjs and visual-diff.mjs before replacing text, media and brand colors. Visual/rebrand modes produce a versionable design-dna. design-identity file.
- A frontend developer who sees a WebGL/Canvas interactive demo and wants to learn its real implementation and reproduce it locally
- An individual developer who wants to remix a favorite site or open-source theme into their own version (new copy, media, brand colors)
- Anyone burned by AI-generated 'clone analysis' docs full of fabricated code, needing a workflow that forces verification against real source
- Creating 1:1 offline mirrors of Astro/Vite SSG/Hugo static builds, including runtime-fetched fonts and wasm assets
- Multi-page marketing sites that need a route map and per-page-type templates instead of a homepage-only clone
How do you install this skill?
- None of the 13 built-in scripts or reference documents were included in the evidence; runnability and cited content are unverified.
- Script paths are hardcoded to the author's personal directories (/Users/jane/.shared-skills, ~/projects/website-clones); other users must adapt them.
- Mirroring/downloading third-party site assets occurs before license verification, with no rate or scope constraints; mind copyright and target-site terms of service.
- The core workflow depends on GitHub API, raw.githubusercontent and other overseas services; reachability from mainland China is not disclosed.
- Claims such as byte-faithful clones and 'pixel diff 5/5' are author-stated with no independent verification.
- Shell / CLI
- Network access
- Local filesystem
Node.jsPlaywrightGitHub CLI (gh)jqwgetcurl
Clone the repo into your skills directory: git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone . Scripts require Node.js, Playwright, GitHub CLI (gh), jq, and wget/curl; the source does not document exact version requirements (only a mention of Node 24+ for one template and checking package. engines).
git clone --depth 1 https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/claude-skill-web-cloneGenerated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Clone this site for me
- Reverse-engineer this WebGL demo
- 复刻这个网站: https://...
Trigger it in Claude Code / Codex / Cursor with natural language, e.g. "Clone this site for me", "Reverse-engineer this WebGL demo", or "复刻这个网站: https://...". The agent loads SKILL.md and walks the decision tree. Project artifacts land under ~/projects/website-clones/<name>-clone/ by default; note the macOS-specific unset SSL_CERT_FILE / SSL_CERT_FILE=/etc/ssl/cert.pem quirks baked into the examples, which may need adjusting elsewhere.
What are this skill's strengths and limitations?
- Clear core discipline: every conclusion graded SOURCE/PARTIAL/GUESS; unverified code must not be copied
- Complete script suite covering recon, mirroring, interaction probing, visual diff and CLONE_REPORT generation
- Backed by a flagship case study (marbles) and an L1-L6 complexity grading system, not just abstract methodology
- Built-in license discipline: unlicensed repos default to All Rights Reserved; no unauthorized public redeployment
- Script examples hard-code the author's local paths (/Users/jane/.shared-skills/...), which other users must edit
- macOS-specific SSL_CERT_FILE handling is baked into command examples and needs porting on other platforms
- Heavier dependency footprint than typical skills (Node, Playwright, gh, jq, wget)
- No automated test suite in the repo; generalization rests on a few documented cases (marbles, oryzo.ai)
- Explicitly does not clone login, payments, server-side business logic or proprietary APIs — only frontend stand-ins
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Web Clone Methodology this page | 53 · Use with care | ★ 1.1k | 3mo ago | MIT |
| Clone Website — Pixel-Perfect Site Cloning Skill | 40 · Not recommended | ★ 133 | 22d ago | MIT |
| Auteur | 62 · Recommended | ★ 1k | 2mo ago | MIT |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
The README credits lixiaolin94/skills · web-shader-extractor (effect-extraction discipline) and zanwei/design-dna (design-identity schema) as conceptual sources; this skill integrates them into a fuller end-to-end cloning pipeline, but no formal comparison against competing tools is provided.
How did FollowSkills review this skill?
Strengths: mandatory license checks, explicit 'no LICENSE = all rights reserved, no public redeploy', tracking-script stripping, output audit. Deducted: the pipeline bulk-fetches/mirrors third-party sites and assets (asset-harvest, mirror-site, network-capture) without user-confirmation gates or rate/scope constraints; license check happens after harvesting; no rollback guidance.
Decision tree is self-consistent with honest failure discipline (isTrusted=false disclosure, GUESS escalation rule). Deducted: all 13 referenced scripts are absent from the evidence; hardcoded personal paths (/Users/jane/.shared-skills, ~/projects); unstated environment assumptions (gh, Playwright, jq, Node 24+); failure feedback on abnormal input unverifiable statically.
Clear bilingual triggers, an explicit capability-boundary section, defined audience, strong Chinese support. Deducted: core workflow depends on GitHub API and raw.githubusercontent (overseas reachability risk for mainland-China users, undisclosed); external skill dependencies (web-shader-extractor) lack acquisition instructions.
Good layering (SKILL.md + references + deliverable templates), version 1.6.0, MIT license, careful attribution distinguishing concept borrowing from code copying. Deducted: references/ and scripts/ files not in evidence so install/structure consistency unverified; no CHANGELOG; no stated maintenance/update responsibility; personal hardcoded paths hurt portability.
The methodology targets a real pain point (hallucinated AI code) with concrete, actionable steps and clear marginal value. Deducted: claims like byte-faithful clones and 'hero pixel diff 5/5' cannot be executed or verified statically; output quality depends on unseen scripts and user environment.
Proper attribution; flagship case (chiuhans111/marbles) is cross-traceable; the SOURCE/PARTIAL/GUESS grading is itself auditable design. Deducted: the marbles teardown and oryzo.ai case bodies are not in evidence; no CI/tests/third-party execution evidence; key quantitative claims are author-stated only.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →