skills.rest
vhqtvn
vhqtvnCOMMUNITY
Explore all skills by this author →
GitHub

web-dev-loop

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
One-click install
npx skills add https://github.com/vhqtvn/vh-agent-harness --skill web-dev-loop
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
daithang-organizationdaithang-organization

Docker & Environment Setup

Configure a reproducible Docker-based development environment for the SE104_VLEAGUE project with PostgreSQL, NestJS, and React.

Official
Advanced
parisgroup-aiparisgroup-ai
1

design-critic

Analyze and auto-fix visual design issues in web applications.

Official
Advanced
clearclownclearclown
3

verify

Run tests, type checks, builds, and lint checks on code.

Community
Intermediate
aroidoaroido

React Testing with Vitest and RTL

Create unit and integration tests for React components with Vitest and React Testing Library.

Official
Intermediate