skills.rest
rgvalguna
rgvalgunaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/rgvalguna/hanapbahayai --skill run-web
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dezverevdezverev

animal-kernel-web-dev

Start the AnimalKernel.Web dev server and verify UI with Cursor's browser.

Community
Intermediate
AGIBuildAGIBuild
10

dotnet-ci-benchmarking

Compare BenchmarkDotNet JSON results against GitHub Actions artifact baselines.

Community
Advanced
nathanvalenathanvale
2

bun-runtime

Manage Bun runtime workflows for monorepos with bunx and bun.lockb.

Community
Advanced
web-infra-devweb-infra-dev
286

Browser Automation

Automate web browser interactions using visual cues from screenshots.

Official
Intermediate