web-dev-loop

Name: web-dev-loop
Availability: InStock
Author: vhqtvn

Run Playwright frontend tests in a Compose-managed browser environment.

1|Updated Jun 25, 2026

Search Tags:#frontend #nextjs #playwright #docker compose #browser testing #ui debugging

Ready to run

npx skills add https://github.com/vhqtvn/vh-agent-harness --skill web-dev-loop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-dev-loop
Source: https://github.com/vhqtvn/vh-agent-harness/tree/main/docs/adoption-examples/web/skills/web-dev-loop
Command: npx skills add https://github.com/vhqtvn/vh-agent-harness --skill web-dev-loop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers run reliable browser-assisted frontend debugging and testing workflows without creating separate browser infrastructure.

Core Features & Use Cases

Playwright Frontend Testing: Runs browser smoke tests for Next.js applications through the repository's Compose-managed browser lane.
Debug Artifact Collection: Captures traces, screenshots, videos, and reports in repo-scoped locations for investigating UI issues.
Workflow Selection: Guides choosing fixture-backed checks or live web stack validation when testing frontend behavior.

Quick Start

Use the web-dev-loop skill to run Playwright checks for the frontend and collect debugging artifacts in the repository.

Frequently Asked Questions about web-dev-loop

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

FAQPage Schema

How do I run Playwright browser tests for a Next.js frontend?▼

To run Playwright browser tests for a Next.js frontend, you can use this Skill to execute browser-assisted workflows through a Compose-managed environment. It applies repository-scoped execution paths to validate your live web stack.

What is the best way to collect UI debugging artifacts during frontend testing?▼

Collecting UI debugging artifacts during frontend testing involves capturing traces, screenshots, videos, and reports in repository-scoped locations. This Skill provides controlled browser automation workflows to gather these verification outputs.

Can I use Docker Compose to manage browser automation for smoke testing?▼

Yes, you can use Docker Compose to manage browser automation for smoke testing. This Skill routes Playwright checks through a Compose-managed browser lane to ensure controlled and repeatable frontend development loops.

When do I need fixture-backed checks versus live web stack validation?▼

You need fixture-backed checks versus live web stack validation when testing different frontend behaviors. This Skill guides workflow selection, helping you choose between fixture-backed checks or live web stack validation for your specific scenario.

Does web-dev-loop require a separate browser infrastructure for UI validation?▼

No, web-dev-loop does not require separate browser infrastructure for UI validation. It helps developers run reliable browser-assisted frontend debugging workflows directly without creating separate browser infrastructure.