skills.rest
lucasgrow
lucasgrowCOMMUNITY
Explore all skills by this author →
GitHub

clone-website

Clone websites into Next.js 16 code with Firecrawl MCP.

3|Updated Feb 21, 2026
Search Tags:#landing page#code generation#firecrawl#next.js#website clone#web replication
One-click install
npx skills add https://github.com/lucasgrow/some-skills --skill clone-website
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/lucasgrow/some-skills/tree/main/clone-website
Command: npx skills add https://github.com/lucasgrow/some-skills --skill clone-website

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of converting existing websites into production-ready Next.js 16 code, saving significant development time and effort.

Core Features & Use Cases

  • Full Website Cloning: Replicates entire websites or specific sections into functional Next.js applications.
  • Design Token Extraction: Automatically identifies and applies design tokens (colors, typography, spacing) for consistent styling.
  • Component Generation: Creates reusable React components based on the website's structure.
  • Image Handling: Manages image assets, including downloading and fallback strategies.
  • Use Case: A user wants to quickly rebuild a landing page they found online. They provide the URL, and the skill generates the Next.js code, allowing for rapid iteration and deployment.

Quick Start

Use the clone-website skill to clone the website at https://example.com.

Frequently Asked Questions about clone-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clone a website into Next.js code?▼

Cloning a website into Next.js code requires providing the URL to this Skill, which uses Firecrawl MCP to extract design tokens and generate production-ready Next.js 16 components automatically.

Can I replicate just a specific section like a hero or pricing block instead of a full website?▼

Yes, you can replicate specific sections like hero, pricing, and footer instead of a full website. The Skill extracts the targeted design tokens and generates corresponding reusable React components for those sections.

How does website replication handle design tokens and styling?▼

Website replication automatically identifies and extracts design tokens such as colors, typography, and spacing from the source site. It then applies these tokens to ensure consistent styling in the generated Next.js code.

Do I need Firecrawl MCP to generate landing page code from an existing site?▼

Yes, Firecrawl MCP is used to crawl and extract the website structure and design details. This data is necessary to generate accurate, production-ready Next.js 16 code for your landing page.

What happens to image assets when I replicate a website design?▼

When you replicate a website design, the Skill manages image assets by downloading them and applying fallback strategies. This ensures your Next.js application maintains visual fidelity without broken links.

Is this website clone approach limited to Next.js 16?▼

Yes, the generated output is specifically formatted for Next.js 16. The Skill produces production-ready code tailored to this framework, building reusable React components based on the extracted website structure.

Related Skills

Explore More Software Engineering Skills→
hamzaPixlhamzaPixl
2

design-extraction

Extract design tokens and layout structure from Figma files, URLs, or screenshots into design-spec JSON.

Community
Advanced
elophantoelophanto
116

shadcn

Provision shadcn/ui in Next.js 16 projects with pnpm and Tailwind.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
fauzanazzfauzanazz

copy-website

Extract layout, design tokens, animations, and media from live websites into code.

Community
Advanced