frontend-testing-debugging

Validates rendered frontend apps through Browser-first testing loops with Playwright fallback.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill frontend-testing-debugging-aarnavbaddam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-testing-debugging
Source: https://github.com/AarnavBaddam/skills/tree/main/frontend-testing-debugging
Command: npx skills add https://github.com/AarnavBaddam/skills --skill frontend-testing-debugging-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Rendered frontend changes often pass builds while hiding UI regressions, console errors, broken interactions, and responsive layout issues. This Skill enforces a structured validation loop that tests the actual rendered app before claiming a change works. ## Core Features & Use Cases - Browser-First Validation: Detects whether the Browser plugin is available and uses it for navigation, DOM snapshots, console logs, screenshots, and interaction checks, falling back to regular Playwright only with a recorded reason. - Structured QA Reporting: Produces a QA-style final report with pass/fail checks for page identity, blank-page detection, framework overlays, console health, screenshot evidence, and interaction proof. - Use Case: After editing a dashboard search component, run the validation loop to reload the page, exercise the search interaction, capture before/after screenshots, and deliver a reviewer-ready QA report. ## Quick Start Use the frontend testing skill to debug this localhost app and verify the broken interaction is fixed.

Frequently Asked Questions about frontend-testing-debugging

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

FAQPage Schema
What checks should a frontend QA validation include?

Verify page URL and title, confirm the page is not blank, check for framework error overlays, review console errors and warnings, capture screenshot evidence, and exercise at least one target-flow interaction with a state check.