clone-website

SKILL.md

Transform any website into production-ready Next.js 16 code using Firecrawl.

Scrapes target websites and extracts HTML/markdown, with fallback crawling if initial scrape fails

Mandatory analysis phase presents detected sections, design tokens, images, and file structure to user before code generation

Generates complete Next.js 16 projects with TypeScript, Tailwind CSS v4, Shadcn UI components, and Lucide icons

Supports partial cloning by section (hero, pricing, footer) or full-page replication with automatic image download and Unsplash fallbacks

Mobile-first responsive design using Tailwind arbitrary values and CSS variables for design token consistency

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.