Agent skill · software engineering · aradotso
ai-website-cloner-template
ai-website-cloner-template — an agent skill for coding agents.
Why this skill is useful
Adds a complete executable pipeline for cloning websites into Next.js, including scripts for design extraction and component building.
What it needs
Requires git, npm installed locally. About 6k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone cd my-clone npm install bash claude --chrome /clone-website https://example.com src/ app/ layout.tsx # Root layout — fonts, metadata, globals page.tsx # Assembled clone page components/ ui/ # shadcn/ui primitives (Button, Card, etc.) icons.tsx # Extracted SVG icons from target site lib/ utils.ts # cn() Tailwind merge utility types/ # Shared TypeScript interfaces hooks/ # Custom React hooks public/ images/ # Downloaded images from target videos/ # Downloaded videos from target seo/ # Favicons, OG images docs/ research/ tokens.json # Extracted design tokens components/ # Per-section spec files (.md) design-references/ comparison.png # Visual diff output scripts/ sync-agent-rules.sh # Regenerate agent instruction files from AGENTS.md sync-skills.mjs # Regenerate /clone-website for all platforms AGENTS.md # Single source of truth for agent instructions CLAUDE.md # Claude Code config (imports AGENTS.md) GEMINI.md # Gemini CLI config (imports AGENTS.md) bash npm run dev # Start dev server at localhost:3000 npm run build # Production build npm run lint # ESLint check tsx // src/app/page.tsx import { HeroSection } from "@/components/hero-section"; import { FeaturesSection } from "@/components/features-section"; import { PricingSection } from "@/components/pricing-section"; import { FooterSection } from "@/components/footer-section"; export default function Page() { return ( <main> <HeroSection /> <FeaturesSection /> <PricingSection /> <FooterSection /> </main> ); } tsx // src/components/hero-section.tsx import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export function HeroSection() { return ( <section className={cn( "relative flex min-h-[680px] flex-col items-center justify-center", "bg-[oklch(0.120.02264)] px-6 py-24 text-center" )} <h1 className="max-w-4xl text-5xl font-bold tracking-tight text-white md:text-7xl"> Your extracted headline here </h1> <p clas …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/ai-website-cloner-template