skills.rest
chrismccoy
chrismccoyCOMMUNITY
Explore all skills by this author →
GitHub

page-cloner

Clones a live webpage into standalone HTML with preserved markup, styles, and assets.

2|Updated Apr 29, 2026
Search Tags:#playwright#visual validation#html extraction#browser capture#webpage cloning#css inlining#website archiving
One-click install
npx skills add https://github.com/chrismccoy/forge --skill page-cloner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-cloner
Source: https://github.com/chrismccoy/forge/tree/main/lib/page-cloner
Command: npx skills add https://github.com/chrismccoy/forge --skill page-cloner

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the need to manually recreate a live webpage by capturing its rendered structure, styles, and assets into a working HTML clone that preserves the original appearance without redesign.

Core Features & Use Cases

  • Rendered Page Capture: Captures the live DOM after JavaScript rendering, lazy loading, and web fonts have settled.
  • Self-Contained Extraction: Inlines accessible stylesheets, absolutises asset URLs, recovers CSSOM-injected rules, and removes scripts for a stable static clone.
  • Visual Validation: Takes full-page and section screenshots, compares the clone against the original, and iterates on concrete fidelity issues.
  • Use Case: Create a faithful standalone preview of a marketing page, legacy site, or reference design while retaining its original markup and CSS.

Quick Start

Use the page-cloner skill to capture the live URL https://example.com and produce a validated standalone HTML clone.

Frequently Asked Questions about page-cloner

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

FAQPage Schema
How do I clone a live webpage into standalone HTML that preserves styles and assets?▼

Webpage cloning captures the live DOM after rendering, inlines accessible stylesheets, absolutises asset URLs, and removes scripts to produce a faithful standalone HTML clone of the original page.

Can Playwright capture a fully rendered web page for website archiving?▼

Playwright renders the live webpage to let JavaScript execution, lazy loading, and web fonts settle before capturing the DOM structure and taking full-page screenshots for visual validation during website archiving.

Do I need Claude in Chrome to extract CSS and markup for webpage cloning?▼

Claude in Chrome is required for source capture during webpage cloning, extracting the rendered markup and recovering CSSOM-injected rules before Playwright renders screenshots to validate the extracted clone.

What's the best way to validate visual fidelity when reproducing a legacy page?▼

Visual validation compares full-page and section screenshots of the clone against the original legacy page, iterating on concrete fidelity issues to ensure the standalone HTML accurately preserves the layout.

Why does my standalone HTML clone look different from the original live page?▼

Standalone HTML clones may lose visual fidelity if CSSOM-injected rules are not fully recovered, asset URLs are not properly absolutised, or lazy-loaded content and web fonts have not settled before capture.

Related Skills

Explore More Design & Creative Skills→
yonatangrossyonatangross
3

browser-content-capture

Capture content from JavaScript-rendered, login-protected, and multi-page sites.

Community
Advanced
ak8458ak8458

preview-import

Preview and validate imported HTML rendering in a local AEM Edge Delivery Services dev server.

Community
Intermediate
akobryan1akobryan1
1

web-artifacts-builder

Bundle React and Tailwind CSS projects into single portable HTML files.

Community
Intermediate
ivanov-iivanov-i

visual-generate-web-diagram

Generate self-contained HTML diagrams for architectures and workflows.

Community
Intermediate