skills.rest
TheTesseractAI
TheTesseractAICOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Scrape live websites and generate React components from extracted design data.

Updated Apr 14, 2026
Search Tags:#automation#design#react#vite#website#scraping#cloning
One-click install
npx skills add https://github.com/TheTesseractAI/19 --skill website-cloning-thetesseractai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/TheTesseractAI/19/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/TheTesseractAI/19 --skill website-cloning-thetesseractai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, curl, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables users to clone the visual design and layout of existing websites, capturing content, images, colors, and fonts for reuse or learning.

Core Features & Use Cases

  • Website Replication: Scrapes design elements, content, and assets from a live site to produce a faithful React + Vite clone.
  • Design Analysis & Learning: Provides insights into layout and styling for education or inspiration.
  • Use Case: Rebuilding a website on a new platform by extracting its structure and visual style for a custom implementation.

Quick Start

Use the website-cloning skill to scrape the target website, generate a design replica, and build a React project using the provided content and assets.

Frequently Asked Questions about website-cloning

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

FAQPage Schema
How do I clone a website design into React components?▼

This Skill clones website layouts by using Playwright and automated scripts to scrape structural and visual data from live sites, generating a ready-to-use React and Vite project with real content and assets.

Do I need Playwright and Chromium to scrape website layouts?▼

Yes, scraping website layouts requires Playwright and Chromium, as this Skill relies on these dependencies to execute custom scripts for content extraction and visual verification.

Can I use scraped website content to rebuild a site on a new platform?▼

Yes, you can use scraped website content to rebuild a site on a new platform, as this Skill extracts structural design, colors, fonts, and images to generate a custom React and Vite implementation.

What's the best way to analyze website styling for design inspiration?▼

The best way to analyze website styling for inspiration is using automated scraping to capture layout, colors, and fonts, providing precise insights into the structural and visual data for educational purposes.

Does website scraping with curl work for extracting visual assets?▼

Website scraping with curl works alongside Playwright to extract visual assets and content, which are then processed by custom scripts to verify and reproduce the design in React components.

Related Skills

Explore More Software Engineering Skills→
ryankoleanryankolean
3

cli-playwright

Automate browser interactions and end-to-end tests across Chromium, Firefox, and WebKit.

Community
Advanced
KartikSharma4448KartikSharma4448

website-cloning

Clone a website into a deployable React + Vite app with scraped content.

Community
Advanced
CrumbgrabberCrumbgrabber
3

webapp-testing

Automate local web application testing with Python Playwright scripts.

Community
Intermediate
paolomozpaolomoz
3

block-detector

Detect and catalog web page content blocks using Puppeteer automation.

Community
Advanced