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 Extract URL from user request Identify section filter if specified (e.g., "hero only", "just the pricing") Scrape using Firecrawl: firecrawl-mcp___firecrawl_scrape: url: [TARGET_URL] formats: ["markdown", "html"] onlyMainContent: true
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:
app/globals.css - Design tokens as CSS variables app/layout.tsx - Root layout with SEO metadata components/landing/[Section].tsx - Each component app/page.tsx - Main page composing components 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 Extract all image URLs from scraped content Attempt download via fetch 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 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