clone-app-pat-pro

Analyze source code and rendered styles to generate HTML, CSS, and JavaScript clones.

224|47|Updated Jun 5, 2026
One-click install
npx skills add https://github.com/per-simmons/clone-app-pat-pro-public --skill clone-app-pat-pro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clone-app-pat-pro
Source: https://github.com/per-simmons/clone-app-pat-pro-public/tree/main
Command: npx skills add https://github.com/per-simmons/clone-app-pat-pro-public --skill clone-app-pat-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp__claude-in-chrome__*, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of cloning a web app pixel for pixel from a given URL, ensuring accurate replication without relying on screenshots.

Core Features & Use Cases

  • Pixel-perfect Cloning: Extracts and replicates every element of a web app from the source URL.
  • Automated Recon & Extraction: Automatically navigates the web app, clicks through interactions, and extracts all necessary styles and assets.
  • Design System Inference: Inferences a design system from the extracted data to ensure consistency.
  • Parallel Code Generation: Concurrently generates HTML, CSS, and JavaScript to create the cloned web app.
  • Quality Assurance: Performs thorough QA checks to ensure the cloned app matches the source in every detail.
  • Use Case: Ideal for creating a mirror website of a competitor's app or for replicating a web app for internal use or testing.

Quick Start

Use the clone-app-pat-pro skill to clone the website 'linear.app'.

Frequently Asked Questions about clone-app-pat-pro

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

FAQPage Schema
How do I clone a web app pixel for pixel from a URL?

Automated pixel-perfect cloning is achieved by analyzing source code, measuring rendered styles, and synthesizing matching HTML, CSS, and JavaScript. The process navigates interactions and extracts all necessary assets directly from the target URL.

What's the best way to automate UI replication without relying on screenshots?

UI replication is achieved by extracting rendered styles and inferring the design system from the live source URL. This approach concurrently generates HTML, CSS, and JavaScript for pixel-perfect cloning without needing screenshots.

Do I need a Chrome extension to extract styles for web app cloning?

Yes, Chrome extension integration is required for real-time interaction and style extraction during web app cloning. This dependency enables automated navigation, interaction clicking, and accurate measurement of rendered styles.

Can I use automated recon to extract a design system from an existing web app?

Yes, automated recon navigates a web app, clicks through interactions, and extracts styles to infer a complete design system. This ensures structural consistency when synthesizing the cloned HTML, CSS, and JavaScript.

Does pixel-perfect web app cloning perform quality assurance checks?

Yes, thorough quality assurance checks are performed to ensure the cloned app matches the source in every detail. This verifies pixel-for-pixel accuracy after the parallel code generation of HTML, CSS, and JavaScript is completed.

When should I not use automated web app cloning?

Automated web app cloning should not be used when a pixel-for-pixel match is not critical or when Chrome extension integration is unavailable. It is specifically designed for scenarios requiring exact UI replication and rendered style extraction from a source URL.