Can I stop the automated screenshots?

Yes, you can deactivate the sidecar mode at any time by telling Claude 'stop playw' or 'no more screenshots'.

Do I need to trigger screenshots manually?

No, once activated with a target URL, the skill runs automatically in the background after every relevant code change to maintain your flow.

Which file types trigger a visual update?

The skill tracks changes to frontend-related files including .blade, .css, .js, .html, .vue, and .tsx files.

How does Playwright Sidecar work?

It monitors your file edits and triggers a headless Playwright browser to capture a screenshot of your app whenever you change visual files like HTML or CSS.

What is the default viewport size for screenshots?

The skill uses a standard 1920x1080 viewport and captures the 'above the fold' content to ensure fast performance and quick feedback.

Playwright Sidecar

Name: Playwright Sidecar
Author: giobi

bygiobi

0•

浏览器自动化

Automates visual verification by capturing instant browser screenshots after every frontend code change.

Playwright Sidecar is a powerful extension for Claude Code that provides real-time visual feedback during the development process. Once activated, it monitors modifications to frontend files—such as CSS, HTML, and JavaScript—and automatically generates a high-resolution screenshot of the target URL without requiring manual prompts. This 'sidecar' mode allows developers to instantly see the visual impact of their code changes, identify broken layouts, and verify UI adjustments in a seamless, automated workflow.

主要功能

010 GitHub stars

02Zero-prompt interaction that captures and displays visuals automatically

03Automatic screenshot generation after CSS, HTML, and JS edits

04Intelligent filtering to skip screenshots for non-visual backend changes

05Headless browser rendering using Playwright with 1920x1080 viewports

06Support for custom URLs or project-specific target detection

使用场景

01Monitoring visual regressions in real-time during live coding sessions

02Rapidly iterating on CSS and layout changes with instant visual confirmation

03Verifying UI consistency across frontend framework components like Vue or React

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add giobi/claude-skills playw

For use in Claude.ai and ChatGPT