clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
Security Assessment
Detected risks:
About clone-website
This skill drives an AI agent to reverse-engineer and rebuild one or more websites as pixel-perfect clones in a single pass. Rather than a two-phase inspect-then-build process, it treats the agent as a "foreman" that inspects each section of a live page, writes a detailed specification file with exact CSS values, downloaded assets, and real text, and hands that brief to specialist builder agents dispatched in parallel worktrees. It targets a Next.js + shadcn/ui + Tailwind v4 scaffold and requires browser automation (Chrome, Playwright, Browserbase, or Puppeteer MCP tooling) to inspect the target and extract computed styles and behaviours.
The workflow centers on meticulous extraction and small, isolated build tasks. Guiding principles include completeness over speed (every builder must receive screenshots, exact `getComputedStyle()` values, downloaded assets, and real content so it never guesses), breaking sections into small focused components with a complexity budget of roughly 150 lines of spec per builder, extracting real assets including layered background and overlay images, establishing global CSS design tokens and TypeScript types as a sequential foundation before parallel work, and capturing not just appearance but behaviour — scroll triggers, viewport-entry animations, scroll-snap, parallax, and their exact before/after states and transitions. Extraction artifacts are isolated per hostname under docs/research and docs/design-references folders, and multiple URLs can be processed in parallel.
The target users are front-end developers and designers who want to replicate a site's look and interactions for prototyping, emulation, or rebuilds. It is worth flagging that automated pixel-perfect website cloning is dual-use: the same capability that reproduces a page faithfully can be used to copy sites without permission or to build convincing lookalikes, so use should be limited to sites the user is authorised to replicate. The skill itself scopes out real backends, authentication, and real-time features, focusing purely on visual and interaction emulation with mock data.
FAQ
What does this skill produce?
A pixel-perfect front-end clone of the target page(s) built on a Next.js + shadcn/ui + Tailwind v4 scaffold, along with auditable extraction artifacts (specs, downloaded assets, design references) organized per hostname.
What are the prerequisites?
Browser automation is required (Chrome MCP, Playwright, Browserbase, or Puppeteer), and the base Next.js + shadcn/ui + Tailwind v4 project must already build via `npm run build`. Without a browser tool the skill cannot function.
What is explicitly out of scope?
Real backend or database, authentication, real-time features, SEO optimization, and accessibility audits. It clones visual layout, styling, component structure, interactions, and responsive design using mock data.
Can it clone multiple sites at once?
Yes. It accepts one or more URLs, processes them independently and in parallel where resources allow, and keeps each site's extraction artifacts isolated in dedicated per-hostname folders.
Are there responsible-use considerations?
Yes. Faithfully cloning a website can raise intellectual-property and impersonation concerns, so it should only be used on sites you own or are authorized to replicate; the skill is intended for emulation, prototyping, and rebuilds rather than deceptive lookalikes.
Install clone-website
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
julianromli/ai-skills