clone-app-pat-pro

Clone web apps from live URLs by measuring rendered DOM and computed styles.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/ifirestone/claude-skill-clone-app --skill clone-app-pat-pro-ifirestone
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clone-app-pat-pro
Source: https://github.com/ifirestone/claude-skill-clone-app/tree/main
Command: npx skills add https://github.com/ifirestone/claude-skill-clone-app --skill clone-app-pat-pro-ifirestone

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you recreate a web app from a live URL with measured visual fidelity instead of guesswork, so the result matches the original design value for value.

Core Features & Use Cases

  • Live recon and extraction: Opens the target site in Chrome, clicks through every relevant view, and measures computed styles, assets, fonts, and layout details from the rendered DOM.
  • Design system generation: Converts the observed values into a portable design specification and machine-checkable assertions for downstream build and QA.
  • Iterative QA and repair: Compares the clone against the original using computed-style assertions, then loops fixes until the differences are eliminated.
  • Use case: Rebuild a SaaS dashboard, marketing page, or logged-in web app from a URL while preserving spacing, typography, colors, gradients, shadows, and interaction states.

Quick Start

Ask the agent to clone a web app from a URL and provide the destination app name.

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 from a live URL pixel for pixel?

Pixel-perfect web app cloning works by measuring the rendered DOM and computed styles from a live URL, then rebuilding the interface to match the original design value for value without guesswork.

Can I extract a design system from an existing SaaS dashboard?

Yes, you can extract a design system from an existing SaaS dashboard by observing computed styles and layout details, then converting those values into a portable design specification and machine-checkable QA assertions.

Do I need a Chrome extension to reconstruct a web app's computed styles?

Yes, reconstructing a web app's computed styles requires Chrome-extension browser access, because the Skill opens the target site in Chrome to measure the rendered DOM and extract exact layout details.

What is the best way to reproduce interaction states when cloning a web app?

The best way to reproduce interaction states is through an iterative build-fix loop that uses computed-style assertions to compare the clone against the original, looping fixes until visual differences are eliminated.

Why does my cloned web app not match the original design?

Your cloned web app might not match the original design if computed styles were not fully captured or if QA assertions failed to loop fixes until pixel differences were eliminated during the iterative build process.

Does web app cloning work on logged-in SaaS dashboards?

Yes, web app cloning works on logged-in SaaS dashboards, applying exhaustive recon and interaction-state reproduction to authenticated views that require measurement of the rendered DOM.