skills.rest
mfuentescas
mfuentescasCOMMUNITY
Explore all skills by this author →
GitHub

page-2-context

Capture a webpage's visual rendering and live DOM using Playwright.

Updated Mar 5, 2026
Search Tags:#debugging#playwright#webpage#screenshot#dom#ai-assistance#visual-context
One-click install
npx skills add https://github.com/mfuentescas/page-2-context --skill page-2-context
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-2-context
Source: https://github.com/mfuentescas/page-2-context/tree/main
Command: npx skills add https://github.com/mfuentescas/page-2-context --skill page-2-context

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Web developers struggle to debug visual regressions and layout issues from static HTML. This Skill captures a real browser view (screenshot) and the live DOM into p2cxt_* artifacts for accurate inspection and AI-assisted analysis.

Core Features & Use Cases

  • Replay a full-page screenshot alongside the live DOM HTML to compare renderings.
  • Crop long pages into tiles with p2cxt_tile_N.png for focused context and easier AI digestion.
  • Persist per-project browser profiles under ./browser/<browser> to support authenticated pages.
  • Use cases include CSS/layout debugging, visual regression checks, and AI-assisted debugging workflows.

Quick Start

Run the page2context tool against a target URL to generate outputs in a dedicated output directory.

Frequently Asked Questions about page-2-context

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

FAQPage Schema
How do I capture a screenshot and live DOM for debugging a webpage?▼

The tool uses Playwright to run a real browser, capturing the visual rendering and live DOM into p2cxt_context.md, p2cxt_html.html, and p2cxt_screenshot.png files for inspection.

Can I use Playwright to capture visual context from authenticated pages?▼

The tool supports local dev sites and authenticated pages by leveraging Playwright's browser profile persistence, ensuring secure access to restricted content during capture.

What is the best way to crop long webpages into tiles for AI analysis?▼

The tool automatically splits long page captures into cropped tile images, preventing context overload and improving the accuracy of AI-assisted layout debugging.

Why does debugging visual regressions from static HTML fail to show live DOM issues?▼

Static HTML misses client-side rendering and dynamic DOM mutations, whereas capturing a real browser view with Playwright records the actual rendered state for accurate debugging.

Does this webpage screenshot tool work with local development sites?▼

It supports local dev sites and authenticated pages, capturing the full-page screenshot alongside the live DOM HTML to compare renderings for CSS and layout debugging.

What files do I get when capturing a webpage's visual rendering and DOM?▼

When cropping is enabled, the screenshot is split into p2cxt_tile_N.png files instead, providing focused visual tiles and the live DOM HTML for AI-assisted debugging workflows.

Related Skills

Explore More Software Engineering Skills→
ManzuetiManzueti

setup-browser-cookies

Import cookies from a Chromium browser into a headless browser session.

Community
Basic
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate
JaiminVadadoriyaJaiminVadadoriya
1

visual-testing

Automate visual regression testing by comparing screenshots against baselines.

Community
Advanced
Smooth-OperationSmooth-Operation

browser-automation-debugging

Control and inspect live Chrome browsers via Chrome DevTools MCP.

Official
Advanced