playwright-cli-helpers

Verify local HTML pages for layout, overflow, and width consistency issues.

2|1|Updated Apr 9, 2026

Search Tags:#html #screenshots #responsive design #playwright #browser testing #visual regression #overflow detection

Ready to run

npx skills add https://github.com/timgranlundmarsden/claude-agent-flow --skill playwright-cli-helpers

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright-cli-helpers
Source: https://github.com/timgranlundmarsden/claude-agent-flow/tree/main/skills/playwright-cli-helpers
Command: npx skills add https://github.com/timgranlundmarsden/claude-agent-flow --skill playwright-cli-helpers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-cli, python3, lsof, git, and includes scripts (resource) components.

What problem does it solve?

This Skill removes the friction of manually inspecting local HTML pages by giving you a reliable way to verify layout, responsive behavior, and overflow issues in a single workflow.

Core Features & Use Cases

Visual Verification: Captures mobile, tablet, and desktop screenshots so you can confirm a page renders correctly across breakpoints.
Layout and Overflow Checks: Detects horizontal overflow and can assert uniform widths for repeated elements like cards or tiles.
Evidence Capture: Saves JPEG screenshots into a task folder so you can attach visual proof to backlog items or bug fixes.
Browser Fallback Guidance: Documents when to use the helper script first and when to fall back to raw playwright-cli for interactive browser work.

Quick Start

Use the playwright-cli-helpers skill to verify your local HTML file with visual-check.sh and save evidence if you need screenshots for review.

Frequently Asked Questions about playwright-cli-helpers

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

FAQPage Schema

How do I check local HTML pages for layout and overflow issues?▼

You can check local HTML pages for layout and overflow issues by running a visual verification script that captures screenshots across mobile, tablet, and desktop breakpoints. This detects horizontal overflow and verifies width consistency for repeated elements like cards or tiles.

How do I capture responsive design screenshots for frontend debugging evidence?▼

To capture responsive design screenshots for frontend debugging, run the visual check script against a local HTTP server. It saves JPEG screenshots of mobile, tablet, and desktop views into a task folder so you can attach visual proof to bug fixes or backlog items.

Do I need a local HTTP server to use playwright-cli for visual regression testing?▼

Yes, you need a local HTTP server running to serve your static HTML files. The visual verification process requires playwright-cli, python3, lsof, and git dependencies to safely execute sandbox-aware browser checks and screenshot pages reliably.

What is the best way to detect horizontal overflow in static HTML files?▼

The best way to detect horizontal overflow in static HTML files is using an automated browser testing script that checks responsive breakpoints. It identifies layout inconsistencies and captures evidence screenshots without requiring manual inspection of each page width.

Can I use this visual regression approach for interactive browser testing?▼

This approach is designed for static file verification and evidence capture, not interactive browser testing. The documentation provides guidance on when to use the helper script first and when to fall back to raw playwright-cli for interactive browser work.