Skill

clone-website

Clones websites or specific sections into production-ready Next.js 16 codebases using Firecrawl scraping, Tailwind CSS, and Shadcn UI components.

Next.js

Tailwind

shadcn/ui

Typescript

frontend

Install

npx claudepluginhub joshuarweaver/cascade-code-general-misc-4 --plugin julianromli-ai-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

references/analysis-template.mdreferences/component-patterns.mdreferences/tech-stack.md

SKILL.md

Similar Skills

design-system

Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.

team-skills-platform

167.4k

ui-demo

Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.

team-skills-platform

167.4k

kotlin-patterns

Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.

team-skills-platform

167.4k

Stats

Stars153

Forks22

Last CommitDec 12, 2025

Actions

View Source View Plugin View on GitHub View README

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