ai-website-cloner-template
by JCodesMore
Clone any website with one command using AI coding agents
21,506stars
3,113forks
TypeScript
Added 3/29/2026
View on GitHubDownload ZIPScan for vulnerabilities
Requires a passing catalog security scan. Resolve the flagged issues and resubmit to enable featuring.
AI Agentsaiai-agentsai-toolsautomationboilerplateclaudeclaude-codeclonedeveloper-toolsnextjsreactreverse-engineeringshadcn-uiskillstailwindcsstemplatetypescriptweb-scrapingwebsite-clone
Installation
# Add to your Claude Code skills
git clone https://github.com/JCodesMore/ai-website-cloner-templateGetting Started
Guides for using ai agents skills like ai-website-cloner-template.
- Caveman: Cut Claude Token Use by 65%How agent-side prompt compression works, when to use it, and when not to.
- What is an AI Skills Marketplace?Definitions, how marketplaces work, and how to choose between them in 2026.
- Getting Started with AI SkillsFirst-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.
Security ReportWarning
Last scanned: 4/17/2026
{
"issues": [
{
"type": "npm-audit",
"message": "@hono/node-server: @hono/node-server: Middleware bypass via repeated slashes in serveStatic",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "brace-expansion: brace-expansion: Zero-step sequence causes process hang and memory exhaustion",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "hono: Hono missing validation of cookie name on write path in setCookie()",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "next: Next.js has a Denial of Service with Server Components",
"severity": "high"
},
{
"type": "npm-audit",
"message": "path-to-regexp: path-to-regexp vulnerable to Denial of Service via sequential optional groups",
"severity": "high"
}
],
"status": "WARNING",
"scannedAt": "2026-04-17T06:06:04.459Z",
"semgrepRan": false,
"npmAuditRan": true,
"pipAuditRan": true
}AI Website Cloner Template
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents.
Recommended: Claude Code with Opus 4.7 for best results — but works with a variety of AI coding agents.
Point it at a URL, run /clone-website, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.
Demo
Click the image above to watch the full demo on YouTube.
Quick Start
Important: Start by making your own copy with GitHub's Use this template button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.
-
Create your own repository from this template
On the GitHub page for this project, click Use this template, then click Create a new repository.
Give your new repository a name, choose whether it should be public or private, then click Create repository. If GitHub shows an Include all branches option, you can leave it off.
This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.
-
Open your new repository on your computer
After GitHub creates your copy, open that new repository. Click Code and open or clone your new repository with your preferred coding tool.
If you use the terminal, the command will look like this:
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git cd YOUR-NEW-REPOSITORY -
Install dependencies
npm install -
Start your AI agent — Claude Code recommended:
claude --chrome -
Run the skill:
/clone-website <target-url1> [<target-url2> ...] -
Customize (optional) — after the base clone is built, modify as needed
Using a different agent? Open
AGENTS.mdfor project instructions — most agents pick it up automatically.
Supported Platforms
| Agent | Status |
|---|---|
| Claude Code | Recommended — Opus 4.7 |
| Codex CLI | Supported |
| OpenCode | Supported |
| GitHub Copilot | Supported |
| Cursor | Supported |
| Windsurf | Supported |
| Gemini CLI | Supported |
| Cline | Supported |
| Roo Code | Supported |
| Continue | Supported |
| Amazon Q | Supported |
| Augment Code | Supported |
| Aider | Supported |
Prerequisites
- Node.js 24+
- An AI coding agent (see Supported Platforms)
Tech Stack
- Next.js 16 — App Router, React 19, TypeScript strict
- shadcn/ui — Radix primitives + Tailwind CSS v4
- Tailwind CSS v4 — oklch design tokens
- Lucide React — default icons (replaced by extracted SVGs during cloning)
How It Works
The /clone-website skill runs a multi-phase pipeline:
- Reconnaissance — screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)
- Foundation — updates fonts, colors, globals, downloads all assets
- Component Specs — writes detailed spec files (
docs/research/components/) with exact computed CSS values, states, behaviors, and content - Parallel Build — dispatches builder agents in git worktrees, one per section/component
- Assembly & QA — merges worktrees, wires up the page, runs visual diff against the original
Each builder agent receives the full component specification inline — exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.
Use Cases
- Platform migration — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
- Lost source code — your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format
- Learning — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code
Not Intended For
- Phishing or impersonation — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.
- Passing off someone's design as your own — logos, brand assets, and original copy belong to their owners.
- Violating terms of service — some sites explicitly prohibit scraping or reproduction. Check first.
Project Structure
src/
app/ # Next.js routes
components/ # React components
ui/ # shadcn/ui primitives
icons.tsx # Extracted SVG icons
lib/utils.ts # cn() utility
types/ # TypeScript interfaces
hooks/ # Custom React hooks
public/
images/ # Downloaded images from target
videos/ # Downloaded videos from target
seo/ # Favicons, OG images
docs/
research/ # Extraction output & component specs
design-references/ # Screenshots
scripts/
sync-agent-rules.sh # Regenerate agent instruction files
sync-skills.mjs # Regenerate /clone-website for all platforms
AGENTS.md # Agent instructions (single source of truth)
CLAUDE.md # Claude Code config (imports AGENTS.md)
GEMINI.md # Gemini CLI config (imports AGENTS.md)
Commands
npm run dev # Start dev server
npm run build # Production build
npm run lint # ESLint check
npm run typecheck # TypeScript check
npm run check # Run lint + typecheck + build
If using docker
docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001
Updating for Other Platforms
Two source-of-truth files power all platform support. Edit the source, then run the sync script:
| What | Source of truth | Sync command |
|---|---|---|
| Project instructions | AGENTS.md |
bash scripts/sync-agent-rules.sh |
/clone-website skill |
.claude/skills/clone-website/SKILL.md |
node scripts/sync-skills.mjs |
Each script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.
Star History
License
MIT
Frequently Asked Questions
What is ai-website-cloner-template?
ai-website-cloner-template is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by JCodesMore. Clone any website with one command using AI coding agents. It has 21,506 GitHub stars.
Is ai-website-cloner-template safe to use?
ai-website-cloner-template returned warnings in SkillsLLM's automated security scan. It has no critical vulnerabilities, but review the flagged issues in the Security Report section before adding it to your workflow.
How do I install ai-website-cloner-template?
Clone the repository with "git clone https://github.com/JCodesMore/ai-website-cloner-template" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is ai-website-cloner-template written in?
ai-website-cloner-template is primarily written in TypeScript. It is open-source under JCodesMore on GitHub, so you can review or fork the full source.
Are there alternatives to ai-website-cloner-template?
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh ai-website-cloner-template against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
222,256
34,026
JavaScript
AI Agentsai-agentsanthropic
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
194,209
58,864
TypeScript
MCP Serversaiapis
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
185,940
28,768
JavaScript
AI Agentsai-agentsanthropic
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
120,031
19,897
Shell
AI Agents
Developers Also Liked
Based on votes and bookmarks from developers who liked this skill
A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows
66,055
7,343
Python
AI Agentsagent-skillsai-agents
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
96,931
10,202
Python
CLI Toolsai-skillsantigravity
Extracted system prompts from Anthropic - Claude Fable 5, Opus 4.8, Claude Code, Claude Design. OpenAI - ChatGPT 5.5 Thinking, GPT 5.5 Instant, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.
46,405
7,610
JavaScript
AI Agentsaiai-agents
AI-native video production toolkit for Claude Code
1,609
272
Python
IDE Extensionsai-video-generatorclaude-code
from vibe coding to agentic engineering - practice makes claude perfect
61,179
6,112
HTML
AI Agentsagentic-aiagentic-coding
Production-grade engineering skills for AI coding agents.
67,089
7,246
Shell
AI Agentsagent-skillsantigravity