skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

headless-screenshot-verify

Captures headless Chromium screenshots of running web apps to verify UI changes render.

Updated Jun 9, 2026
Search Tags:#next.js#playwright#ui testing#screenshot#visual verification#chromium#headless browser
One-click install
npx skills add https://github.com/timikalo7/Execute --skill headless-screenshot-verify-timikalo7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: headless-screenshot-verify
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skills/headless-screenshot-verify
Command: npx skills add https://github.com/timikalo7/Execute --skill headless-screenshot-verify-timikalo7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? A green build only proves code compiles, not that the UI actually renders. Images, fonts, and layouts can silently fail while the build passes. This Skill captures real screenshots of a running app so visual changes are verified with pixel proof before being declared done. ## Core Features & Use Cases - Headless browser capture: Uses Playwright with Chromium to screenshot a locally running web app at a chosen viewport. - Next.js workflow guidance: Covers rebuilding and restarting the server on a fresh port so the screenshot reflects the latest code, since next start serves a startup snapshot. - Known-trap avoidance: Documents the pkill -f "next start" pitfall that kills the calling shell (exit 144) and recommends killing by port or using fresh ports instead. - Use Case: After swapping a landing page background or font in a Next.js app, run the build, start the server on a fresh port, capture a full-page screenshot, and visually confirm the change before reporting completion. ## Quick Start Screenshot my running Next.js app with headless Chromium and show me the image so I can confirm the UI change rendered.

Frequently Asked Questions about headless-screenshot-verify

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

FAQPage Schema
How do I screenshot a web app with headless Chromium?▼

Install Playwright and Chromium, launch a browser with chromium.launch(), open a page with a set viewport, navigate with waitUntil networkidle, then call page.screenshot with fullPage true. Read the resulting PNG to visually confirm the render.

How to verify a Next.js UI change actually rendered?▼

Rebuild the app and restart the server, because next start serves the snapshot captured at startup and new code will not appear otherwise. Then capture a headless Chromium screenshot of the running app and inspect the image.

Why does my Next.js server not show new code after rebuild?▼

next start serves the build snapshot captured when the server started, so rebuilding alone is not enough. You must rebuild and restart the server, ideally on a fresh port, before capturing a screenshot.

Why does pkill next start kill my own shell with exit 144?▼

pkill -f matches the pattern against full command strings, including your own shell command, so it kills the calling process. Kill the server by port instead, or start each new server on a fresh port and avoid pkill entirely.

When is a screenshot better than a passing build for verification?▼

A green build only proves compilation succeeded; images, fonts, and layouts can silently fail to render while the build stays green. A screenshot is the right check after any visual deliverable, taste-level change, or when someone doubts something rendered.

Related Skills

Explore More Software Engineering Skills→
MeshJSMeshJS
2

verify

Run build, type checks, lint, and security audits before PRs.

Official
Intermediate
githubgithub
38.5k

gh-attach

Uploads and downloads GitHub user-attachments and embeds them in issues and pull requests.

Official
Basic
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate
fusenginefusengine
1

fuse-browser-usage

Routes mcp__fuse-browser__ tool calls across fetch, crawl, live session, and screenshot profiles.

Community
Intermediate