ai-website-cloner-template
by JCodesMore
Clone any website with one command using AI coding agents
35,148stars
5,138forks
TypeScript
Added 3/29/2026
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
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
}Compare with similar skills
See how ai-website-cloner-template compares with popular alternatives.
AI Website Cloner Template
Clone any website with one command
Give your AI coding agent a URL and watch it recreate the website as a clean Next.js app.
Best results with Claude Code + Opus 5. Also supports Codex, Cursor, and OpenCode.
Quick Start · Watch Demo · Supported Platforms
Demo
Click the image above to watch the full demo on YouTube.
Quick Start
1. Set up your project
Recommended: ask your agent. Paste this into Codex, Claude Code, or your coding agent:
Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.
Or create your own GitHub repository:
Give it a name and click Create repository. Then give your agent the new repository's link and ask it to clone it onto your computer, install dependencies, and run npm run check.
2. Clone a website
Open the project in your agent with browser access enabled. In Claude Code or Cursor, run:
/clone-website https://example.com
Replace the URL with the website you want to recreate. Once it's built, ask your agent for any changes you want.
Supported Platforms
| Agent | Status |
|---|---|
| Claude Code | Recommended — Opus 5 |
| Codex CLI | Supported |
| OpenCode | Supported |
| Cursor | 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
.agents/skills/
clone-website/ # Canonical skill and inspection reference
.claude/commands/
clone-website.md # Thin Claude Code bridge
AGENTS.md # Agent instructions (single source of truth)
CLAUDE.md # Claude Code 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
Agent Support
The project keeps one portable Agent Skill at .agents/skills/clone-website/. Codex, Cursor, and OpenCode read it directly. Claude Code uses the small command bridge at .claude/commands/clone-website.md so /clone-website and its arguments continue to work without exposing a duplicate skill to the other agents.
Edit the canonical skill directly. There are no generated platform copies or synchronization scripts.
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 35,148 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
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
267,101
39,908
JavaScript
AI Agentsai-agentsanthropic
Skills for Real Engineers. Straight from my .agents directory.
250,518
21,171
Shell
AI Agents
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
205,910
60,881
TypeScript
MCP Serversaiapis
Developers Also Liked
Based on votes and bookmarks from developers who liked this skill
Trigger.dev – build and deploy durable AI agents and workflows
16,403
1,473
TypeScript
AI Agentsaiai-agent-framework
A light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.
64,459
5,443
JavaScript
AI Agentsclaude-codecontext-engineering
A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows
75,609
8,778
Python
AI Agentsagent-skillsai-agents
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
130,493
13,881
Python
CLI Toolsai-skillsantigravity
Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.
68,299
11,108
JavaScript
AI Agentsaiai-agents
Production-grade engineering skills for AI coding agents.
98,945
10,387
JavaScript
AI Agentsagent-skillsantigravity