Web Clone skill
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
- 1,109 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- 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
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/web-cloneDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- 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
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.
Good fit when
- You need to reproduce a site locally to understand how it works
- You need to dissect a complex WebGL or Canvas effect from real source
- You need to lift a site's design structure and replace the content with your own
Not a fit when
- You want to publicly redeploy someone's site without permission and against its license
- You need the original's server logic, payments or auth rather than the frontend
Example request
Reproduce this site locally and dissect how its scroll effect is builtLimitations
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.
FAQ
Why is this better than just asking the agent to copy a site?
The skill forces you to get the real source first and check every block against it, rather than trusting plausible but fabricated code from an AI analysis.
Can I put the clone online?
Only if the original's license allows it. The skill requires a license check, and by default a clone is for local study and reworking into your own project.
Discussion
No questions or reviews yet.
Related
SkillsA skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill and the pwc CLI: one clone command with a URL makes the agent rebuild a page as a Vite and React project and measure it
The clone-website skill rebuilds a site from a URL as a clean Next.js app: screenshots, style extraction, parallel section builds and a visual diff
ai-site-cloner turns Claude Code or Cursor into a pipeline that clones a site to Next.js with measured styles and pixel checks.
A skill rebuilds a UI from a site, screenshot or screen recording and scores the copy on layout, style, pixels and motion.
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
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.
README badge
Original 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 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。 所以第一动作永远是：拿到真源码。