clone-website

julianromli's avatarfrom julianromli

Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP.Use when user asks to: clone website, vibe clone, replicate landing page, copy website design,rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc).Triggers: "clone this website", "vibe clone [url]", "replicate this landing page","rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".

⭐120stars🔀17forks📁View on GitHub🕐Updated Dec 18, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the transformation of any live website into production-ready Next.js 16 code. By leveraging Firecrawl MCP for high-fidelity scraping and a mandatory analysis phase, it generates clean, responsive, and type-safe components using Tailwind CSS v4 and Shadcn UI. It is designed to accelerate frontend development by converting visual web references into structured, maintainable codebases.

Use Cases

  • Rapid Prototyping: Instantly convert design inspirations or existing web pages into a functional Next.js development environment to kickstart new projects.
  • Legacy Site Modernization: Rebuild and migrate outdated websites to a modern tech stack featuring Next.js App Router, TypeScript, and Lucide icons.
  • UI Component Extraction: Selectively clone specific website sections—such as hero headers, pricing tables, or footers—to integrate into existing React applications.
  • Design-to-Code Acceleration: Streamline the frontend workflow by generating pixel-perfect Tailwind CSS layouts directly from URL references, including automated image handling and fallbacks.
nameclone-website
description|
Use when user asks toclone website, vibe clone, replicate landing page, copy website design,
Triggers"clone this website", "vibe clone [url]", "replicate this landing page",

Clone Website Skill

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

Workflow

Execute these 3 phases in order. Never skip Phase 2.

Phase 1: Scrape

  1. Extract URL from user request
  2. Identify section filter if specified (e.g., "hero only", "just the pricing")
  3. Scrape using Firecrawl:
firecrawl-mcp___firecrawl_scrape:
  url: [TARGET_URL]
  formats: ["markdown", "html"]
  onlyMainContent: true
  1. If scrape fails, fallback to firecrawl-mcp___firecrawl_crawl

Phase 2: Analysis (MANDATORY)

STOP. Present analysis to user before ANY code generation.

Read references/analysis-template.md and fill out the template with:

  • Detected sections and component breakdown
  • Extracted design tokens (colors, typography, spacing)
  • Image inventory with download/fallback status
  • Proposed file structure

Ask user: "Ready to proceed? (y/n or request modifications)"

Do not generate code until user confirms.

Phase 3: Code Generation

After user confirmation, generate files in this order:

  1. app/globals.css - Design tokens as CSS variables
  2. app/layout.tsx - Root layout with SEO metadata
  3. components/landing/[Section].tsx - Each component
  4. app/page.tsx - Main page composing components
  5. Download images to public/images/

Reference references/tech-stack.md for Next.js 16 conventions. Reference references/component-patterns.md for component structure.

Tech Stack (Fixed)

Layer Technology
Framework Next.js 16 (App Router)
Language TypeScript (strict)
Styling Tailwind CSS v4
Components Shadcn UI
Icons Lucide React
Font Geist Sans (default) or extracted

Image Handling

  1. Extract all image URLs from scraped content
  2. Attempt download via fetch
  3. On failure, use Unsplash fallback:
    • Hero: https://images.unsplash.com/photo-[id]?w=1920&h=1080
    • Avatars: https://images.unsplash.com/photo-[id]?w=100&h=100
    • Features: Prefer Lucide icons over images
  4. Save to public/images/ with descriptive kebab-case names

Partial Cloning

Parse user request for section filters:

Request Action
"clone the hero from X" Generate only Hero.tsx
"clone pricing and footer" Generate Pricing.tsx + Footer.tsx
"clone X" (no filter) Full page clone

Code Standards

  • Mobile-first responsive design
  • Use Tailwind arbitrary values for pixel-perfection: w-[347px]
  • Extract repeated colors to CSS variables
  • Use cn() utility for conditional classes
  • Add brief comments only for non-obvious patterns
  • Prefer gap-* over margins for flex/grid spacing
  • Use size-* over w-* h-* when values match