claudegoodies
Skill

clone-website

From JCodesMore

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.

Extracts a live website's assets, CSS, and content, then dispatches parallel agents to rebuild it as a pixel-perfect Next.js clone.

Use it when

  • Rebuilding a specific website's visuals into a Next.js/shadcn/Tailwind scaffold
  • Cloning multiple sites at once with isolated per-site research folders
  • Needing exact CSS values, assets, and copy pulled from a live page
  • Reconstructing hover states, scroll animations, and interactive behavior

Skip it if

  • Requires a browser automation MCP tool (Chrome/Playwright/Browserbase/Puppeteer) to function at all
  • Assumes a Next.js + shadcn/ui + Tailwind v4 project already scaffolded and building
  • Only produces frontend mockups — no real backend, auth, or real-time features

Facts

Repository
JCodesMore/ai-website-cloner-template
Status
Actively maintained
Last commit
Source file
.claude/skills/clone-website/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# Clone Website

You are about to reverse-engineer and rebuild **$ARGUMENTS** as pixel-perfect clones.

When multiple URLs are provided, process them independently and in parallel where possible, while keeping each site's extraction artifacts isolated in dedicated folders (for example, `docs/research/<hostname>/`).

This is not a two-phase process (inspect then build). You are a **foreman walking the job site** — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts.

## Scope Defaults

The target is whatever page `$ARGUMENTS` resolves to. Clone exactly what's visible at that URL. Unless the user specifies otherwise, use these defaults:

- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations
- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
- **Customization:** None — pure emulation

If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.

## Pre-Flight
View full source on GitHub →

Other skills