Skills
.Work. You
Rest

page-2-context

Community

Capture pages: visuals + live DOM for debugging.

Software Engineering#debugging#playwright#webpage#screenshot#dom#ai-assistance#visual-context
Authormfuentescas
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: page-2-context
Download link: https://github.com/mfuentescas/page-2-context/archive/main.zip#page-2-context

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.