clone-website_skill

Overview

This skill clones and replicates websites into production-ready Next.js 16 projects using Firecrawl MCP. It extracts structure, assets, and design tokens, then generates a strict TypeScript + Tailwind v4 codebase with Shadcn UI and Lucide icons. The workflow enforces an analysis checkpoint before any code is produced to ensure accuracy and scope alignment.

How this skill works

First, the skill scrapes the target URL (or specified section) using Firecrawl MCP and collects HTML, markdown, and assets. Second, it performs a mandatory analysis that identifies sections, design tokens, image inventory, and a proposed file structure, and presents that analysis for user approval. After the user confirms, the skill generates Next.js 16 app-router files, components, CSS variables, and downloads images into public/images with descriptive names. It uses Tailwind, Shadcn UI, Lucide, and a mobile-first responsive approach for production-ready output.

When to use it

• Clone an entire landing page into Next.js 16
• Replicate a site vibe or specific section (hero, pricing, footer)
• Rebuild a marketing page for faster iteration and A/B testing
• Extract design tokens and assets from an existing site
• Generate a fast prototype that matches visual design and layout

Best practices

• Always review the mandatory analysis output and confirm or request modifications before code generation
• Specify section filters (e.g., “hero only”, “pricing + footer”) to limit scope and speed up delivery
• Provide target fonts or brand colors if you need exact matches; otherwise the skill will extract closest tokens
• Check downloaded images and provide higher-resolution sources if required for production
• Treat generated code as a solid starting point—wire up backend data and accessibility testing after generation

Example use cases

• User: “Clone this website” — produces full page Next.js app with components and assets
• User: “Vibe clone https://example.com” — extracts style tokens and recreates a visual match
• User: “Clone the hero section from [url]” — generates a single Hero.tsx component and styles
• User: “Rebuild this landing page in Next.js” — outputs globals.css, layout, components, page.tsx, and public/images
• User: “Copy pricing and footer from site X” — generates Pricing.tsx and Footer.tsx only