Web Clone

Install

npx skillfoxx add skills/web-clone

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a claude-code -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a cursor -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a github-copilot -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a codex -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a gemini-cli -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a cline -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a roo -y

npx skills add jane-xiaoer/claude-skill-web-clone --skill web-clone -a opencode -y

git clone https://github.com/Jane-xiaoer/claude-skill-web-clone.git ~/.claude/skills/web-clone

This is third-party code. Review the repository files before installing.

What it does

The skill turns reproducing a site into a repeatable six-step process. The core rule: find the real source first, and treat any code inside a ready AI analysis as fabricated until it is verified line by line against the original. A decision tree splits the task into branches: static HTML is mirrored with wget, content sites on React, Vue or Next are rebuilt on a template, multi-page sites are crawled by route first, and heavy WebGL, Canvas or Three.js frontends are dissected from real source or through frame capture with an evidence grade on each conclusion. The skill ships Node scripts using Playwright: page recon, asset harvest, network capture, route crawl, interaction probe, static-build mirroring and pixel comparison of original versus clone. It also enforces a license check before copying and stripping of trackers.

Who it is for. For developers and designers who study other sites and build their own projects on top of them.

Example request

Reproduce this site locally and dissect how its scroll effect is built

Limitations

The skill faithfully reproduces the frontend and does not take on the original's server logic, payments, auth or proprietary APIs. The scripts need Node and Playwright, and some commands in SKILL.md are written with absolute paths from the author's machine that you must adjust. The skill insists on a license check: redeploying someone's code publicly without permission is not allowed, and a missing license file means all rights reserved by default.

How to disable. Remove the web-clone folder from the skills directory, for example ~/.claude/skills/web-clone.

Security check

• The scripts drive a browser, make network requests and save third-party sites' assets and responses
• Reproducing others' sites requires a license check and permission before publishing

README in short

The README describes a Claude Code skill for reproducing websites, from a static page to a heavy WebGL demo, without blindly copying agent-hallucinated code. At its core is a rule to get the real source and a six-step decision tree for different site types. The skill ships Node scripts using Playwright for recon, mirroring, route crawling, network capture and pixel comparison. It also covers evidence grading when dissecting effects and a license check before copying. It installs by copying the repository into the skills directory, MIT licensed.

SKILL.md

---
name: web-clone
description: >
  网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、
  照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、
  复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 →
  搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 /
  WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。
metadata:
  author: jane (xiaoer)
  version: "1.6.0"
  use_case: 个人本地复刻/学习网站，沉淀自 website-clones 克隆中枢
---

# Web Clone

把"复刻一个网站"做成可重复的流程。配套工程区：~/projects/website-clones/。

## 头号铁律：真源码至上，绝不信 AI 推测的代码

任何 AI 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。

所以第一动作永远是：拿到真源码。

Related