playbooks

home / skills / julianromli / ai-skills / clone-website

clone-website skill

/skills/clone-website

This skill converts a webpage into production-ready Next.js 16 code by scraping and proposing a detailed analysis before code generation.

npx playbooks add skill julianromli/ai-skills --skill clone-website

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
3.2 KB
---
name: clone-website
description: |
  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".
---

# 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
```

4. 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](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](references/tech-stack.md) for Next.js 16 conventions.
Reference [references/component-patterns.md](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

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

FAQ

Can I stop the process after the analysis phase?

Yes. The analysis step is mandatory and you must explicitly confirm before any code is generated; you can request changes or abort at that point.

What happens if an image cannot be downloaded?

The skill attempts a fetch; on failure it substitutes an Unsplash fallback image appropriate to the role (hero, avatar, etc.) and saves it in public/images with a descriptive name.