AI Website Cloner Template
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
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Downloads and reuses another site's assets, fonts and copy
- Can violate a site's terms of use if run without the owner's permission
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ai-website-cloner-templateDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .claude/skills
cp -R "$tmp/.agents/skills/clone-website" .claude/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .github/skills
cp -R "$tmp/.agents/skills/clone-website" .github/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .devin/skills
cp -R "$tmp/.agents/skills/clone-website" .devin/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .cline/skills
cp -R "$tmp/.agents/skills/clone-website" .cline/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .roo/skills
cp -R "$tmp/.agents/skills/clone-website" .roo/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add jcodesmore/ai-website-cloner-template --skill clone-website -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0fc4dca
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jcodesmore/ai-website-cloner-template.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /.agents/skills/clone-website/
git -C "$tmp" checkout 0fc4dca34fcfcfd32108fb67118aa897a6045414
mkdir -p .agents/skills
cp -R "$tmp/.agents/skills/clone-website" .agents/skills/clone-websiteCommands for macOS and Linux, on Windows run them in Git Bash.
Create a copy from the template via the Use this template button on github.com/JCodesMore/ai-website-cloner-template, or clone the repository, install dependencies (npm install) and run npm run check. Then run /clone-website https://target-site-url in Claude Code, Codex CLI, Cursor or OpenCode with browser access enabled.
Other ways from the author
/clone-website https://example.com
The command also works in Cursor through the same .agents/skills folder.
This is third-party code. Review the repository files before installing.
What it does
The clone-website skill breaks down a target site step by step: it takes screenshots, extracts fonts, colors and spacing, walks through interactive states and downloads assets. For each section it writes a separate specification file with exact computed CSS values, states and content, then hands those specs to parallel builder agents in separate git worktrees, each building its component with Next.js, shadcn/ui and Tailwind. Worktrees are then merged, the page is assembled, and a visual diff checks it against the original. The repository is a project template you can spin up as a standalone copy via GitHub template or clone by hand.
Who it is for. For developers who need to quickly recover the source of a site they already own, or study how someone else's layout is built.
Good fit when
- You need to migrate your own site from WordPress, Webflow or Squarespace into modern Next.js code
- The site is live but the source is lost or the developer is gone
- You need to study how specific animations and responsive behavior are built by working with the real code
Not a fit when
- The site is not yours and copying it would violate its terms of use or the law
- The goal is to pass off someone else's design, branding or copy as your own
Example request
/clone-website https://example.comLimitations
The README explicitly forbids using the template for phishing, passing off someone else's design as your own, or bypassing a site's anti-scraping terms. Only what is visible on the page is cloned by default: a real backend, database, authentication and SEO optimization are out of scope unless asked for.
How to disable. Remove the .agents/skills/clone-website folder from the project, or delete the whole project created from the template.
Security check
- Downloads and reuses another site's assets, fonts and copy
- Can violate a site's terms of use if run without the owner's permission
README in short
The README describes the template as a way to hand an agent a URL and get a clean Next.js app back. It walks through a five-phase pipeline: reconnaissance, foundation (fonts, colors, assets), detailed per-component specs, parallel builds in git worktrees, and final assembly with a visual diff. The stack is Next.js 16, shadcn/ui, Tailwind CSS v4 and Lucide React. It separately lists forbidden uses: phishing, passing off someone else's design as your own, and bypassing a site's anti-scraping terms. MIT licensed.
SKILL.md
--- name: clone-website description: 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", or "pixel-perfect clone". The request must include one or more target URLs. --- # Clone Website You are about to reverse-engineer and rebuild the target URL or URLs in the user's request as pixel-perfect clones. When multiple URLs are provided, preserve every pathname as a distinct route and isolate each target's research, screenshots, components, and assets. Parallelize page work only after the shared foundation and output plan are fixed so concurrent builders cannot overwrite one another. This is not a two-phase process. 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 Unless the user specifies otherwise: pixel-perfect fidelity, visual layout and styling, component structure and interactions, responsive design and mock data are in scope; real backend, authentication, real-time features, SEO optimization and accessibility audit are out of scope.
FAQ
Does the skill behave the same across agents?
The canonical skill lives at .agents/skills/clone-website, Codex, Cursor and OpenCode read it directly, and Claude Code uses a thin bridge at .claude/commands/clone-website.md for the same command.
Does it clone the site's backend?
No, by default only the visible layer is cloned: layout, styles, interactions and mock data, a real backend and authentication are out of scope.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys