skills.rest
ouzayr
ouzayrCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Scrape websites into deployable React and Vite applications with Playwright.

Updated Jun 19, 2018
Search Tags:#react#code generation#web scraping#playwright#vite#website cloning
One-click install
npx skills add https://github.com/ouzayr/Utilities --skill website-cloning-ouzayr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/ouzayr/Utilities/tree/main/DailyPlanner/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/ouzayr/Utilities --skill website-cloning-ouzayr

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of replicating the design, content, and structure of an existing website into a functional React + Vite web application.

Core Features & Use Cases

  • Full Website Replication: Scrapes and rebuilds a website's layout, text, images, colors, and fonts.
  • Content Scraping: Extracts real content, including product details and navigation links.
  • Use Case: A user wants to rebuild their existing company website on a new tech stack (React + Vite) and needs a starting point that accurately reflects the original design and content.

Quick Start

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

Frequently Asked Questions about website-cloning

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

FAQPage Schema
How do I convert an existing website into a React and Vite application?▼

You can clone a website into a React and Vite application by scraping its layout, design tokens, images, and text, then reconstructing them into a functional component structure using this automated Skill.

Does website cloning with Playwright support dynamic content and single-page applications?▼

Yes, website cloning with Playwright handles single-page applications and dynamic content loading by executing page scripts to capture the fully rendered DOM, extracting text and images for faithful reconstruction.

Can I scrape design tokens and images from a website for a React project?▼

Yes, you can scrape design tokens, images, text, and structural elements from a website. The Skill extracts these visual assets and content to ensure a faithful reconstruction in your React project.

What is the best way to replicate a company website on a new tech stack?▼

The best way to replicate a company website on a new tech stack is automating the extraction of design tokens, content, and structure, then generating a deployable React and Vite codebase as a starting point.

Do I need Playwright installed to scrape and rebuild websites into React apps?▼

Yes, you need Playwright installed to scrape and rebuild websites into React apps. Playwright is a required dependency for handling dynamic content loading and single-page application rendering during the cloning process.

Related Skills

Explore More Software Engineering Skills→
nathanvalenathanvale
2

playwright-scraper

Automate web scraping with Playwright using semantic selectors and error handling.

Community
Advanced
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
Oscar-Ivan-SalasOscar-Ivan-Salas

tailwind-patterns

Standardize frontend styling with CSS-first Tailwind v4 patterns.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate