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 variablesapp/layout.tsx- Root layout with SEO metadatacomponents/landing/[Section].tsx- Each componentapp/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-*overw-* h-*when values match