run-web

Drive a running Next.js server to capture SSR-verified screenshots of web routes.

Updated Jun 2, 2026

Search Tags:#automation #qa #nextjs #ui-testing #screenshot #driver

Ready to run

npx skills add https://github.com/rgvalguna/hanapbahayai --skill run-web

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: run-web
Source: https://github.com/rgvalguna/hanapbahayai/tree/main/web/.claude/skills/run-web
Command: npx skills add https://github.com/rgvalguna/hanapbahayai --skill run-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates end-to-end verification of the HanapBahay AI web frontend by driving a running Next.js server and capturing visual results.

Core Features & Use Cases

Automates starting the Next.js dev server, builds, and runs the driver to navigate routes and produce SSR-verified screenshots.
Validates that important UI routes render correctly and that automated QA markers appear in the page markup for quick verification.
Use Case: In development, trigger automated visual checks after code changes to ensure the home page and key routes render as expected.

Quick Start

Run the driver against a running server to capture a screenshot of the home route.

Frequently Asked Questions about run-web

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

FAQPage Schema

How do I automate UI testing and capture screenshots of a Next.js web frontend?▼

Automate Next.js UI testing and screenshot capture by running a driver script against a local dev server. The driver navigates specified routes, renders pages, and saves visual results for automated verification. Requires a running Next.js server and a Chrome or Edge browser accessible to the script.

What's the best way to verify that Next.js routes render correctly after code changes?▼

Verify Next.js route rendering by running an automated driver script that navigates to key URLs and checks for automated QA markers in the page markup. This visual check ensures the home page and important routes render as expected after development changes.

Do I need a running web server to generate automated UI screenshots?▼

Yes, generating automated UI screenshots requires a running local web server. The driver script located at web/.claude/skills/run-web/driver.mjs must connect to a live Next.js workspace and access a Chrome or Edge browser to drive route navigation and capture visual results.

Can I use this automated screenshot generation tool in CI workflows?▼

Yes, automated screenshot generation applies to CI workflows that require automated route rendering checks. The driver script validates that important UI routes render correctly and produces SSR-verified screenshots suitable for continuous integration environments.

Why does the visual QA driver script need a Chrome or Edge browser?▼

The visual QA driver script needs a Chrome or Edge browser to physically render the Next.js pages and capture accurate screenshots. The browser acts as the rendering engine, allowing the script to navigate routes and verify that page markup and UI elements display correctly.

Does the screenshot automation tool support checking automated QA markers in page markup?▼

Yes, the screenshot automation tool validates that automated QA markers appear directly in the page markup. This allows for quick verification that important UI routes render correctly during development, QA, or CI workflows without manual visual inspection.