clone-website — community clone-website, ai-skills, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Web Development Agents needing rapid website cloning and transformation into production-ready Next.js 16 code Claude Code, Droid, etc. Skills Ability

julianromli julianromli
[0]
[0]
Updated: 3/5/2026

Agent Capability Analysis

The clone-website skill by julianromli is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for Web Development Agents needing rapid website cloning and transformation into production-ready Next.js 16 code

Core Value

Empowers agents to transform any website into Next.js 16 code using Firecrawl MCP, supporting formats like markdown and html, and handling section filtering for targeted cloning, all via protocols like Firecrawl's scraping capabilities

↓ Capabilities Granted for clone-website

Cloning entire websites into Next.js 16
Transforming specific sections of a website into production-ready code
Scraping websites with section filters for customized cloning
Falling back to alternative scraping methods when primary methods fail

! Prerequisites & Limits

  • Requires Firecrawl MCP for scraping and transformation
  • Next.js 16 specific
  • May require fallback scraping method if primary scrape fails
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

clone-website

Install clone-website, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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
  1. 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:

  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 for Next.js 16 conventions. Reference references/component-patterns.md for component structure.

Tech Stack (Fixed)

LayerTechnology
FrameworkNext.js 16 (App Router)
LanguageTypeScript (strict)
StylingTailwind CSS v4
ComponentsShadcn UI
IconsLucide React
FontGeist 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:

RequestAction
"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

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is clone-website?

Perfect for Web Development Agents needing rapid website cloning and transformation into production-ready Next.js 16 code Claude Code, Droid, etc. Skills Ability

How do I install clone-website?

Run the command: npx killer-skills add julianromli/ai-skills/clone-website. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for clone-website?

Key use cases include: Cloning entire websites into Next.js 16, Transforming specific sections of a website into production-ready code, Scraping websites with section filters for customized cloning, Falling back to alternative scraping methods when primary methods fail.

Which IDEs are compatible with clone-website?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for clone-website?

Requires Firecrawl MCP for scraping and transformation. Next.js 16 specific. May require fallback scraping method if primary scrape fails.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add julianromli/ai-skills/clone-website. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use clone-website immediately in the current project.

Related Skills

Looking for an alternative to clone-website or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI