skills.rest
navapbc
navapbcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

playwright-debug

Diagnose UI bugs through a three-tier hypothesis-first workflow with static analysis.

6|1|Updated Mar 16, 2026
Search Tags:#debugging#cli#playwright#ui-bug#hypothesis-first#tiered-workflow
One-click install
npx skills add https://github.com/navapbc/digital-service-orchestra --skill playwright-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-debug
Source: https://github.com/navapbc/digital-service-orchestra/tree/main/plugins/dso/skills/playwright-debug
Command: npx skills add https://github.com/navapbc/digital-service-orchestra --skill playwright-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers diagnose UI or browser-visible bugs by enforcing a structured 3-tier hypothesis-first process that minimizes Playwright CLI usage and token costs through static code analysis and targeted evidence before engaging browser automation.

Core Features & Use Cases

  • 3-tier workflow (Tier 1: Code Analysis, Tier 2: Targeted Evidence, Tier 3: Full CLI Interaction)
  • Pre-flight checks for Playwright CLI availability and correct version
  • Session management with unique session names and cleanup traps
  • Guidance on when to use visual regression gates and how to escalate between tiers
  • Safe, rule-based escalation to Tier 2 or Tier 3 when static analysis is inconclusive
  • Project-specific, reference-driven configuration hooks to tailor the debugging process

Quick Start

Initiate a Playwright debugging session and begin Tier 1 code analysis to generate hypotheses before any browser interaction.

Frequently Asked Questions about playwright-debug

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

FAQPage Schema
How do I debug Playwright UI bugs without wasting CLI tokens?▼

Debug Playwright UI bugs using a 3-tier hypothesis-first workflow that minimizes CLI token costs by starting with static code analysis before browser automation. This structured approach escalates to targeted evidence and full interaction only when initial analysis is inconclusive.

What is the best way to troubleshoot Playwright rendering discrepancies?▼

Troubleshoot Playwright rendering discrepancies using a tiered workflow that starts with static code analysis to form hypotheses. You escalate to targeted browser automation only when static analysis is inconclusive, ensuring efficient and structured UI debugging.

How do I start a Playwright debugging session safely?▼

Start a Playwright debugging session safely by running preflight checks to verify CLI availability and correct versions. The workflow enforces safe session management using unique session names and cleanup traps to prevent browser automation conflicts during UI bug analysis.

When should I escalate Playwright UI debugging to full browser automation?▼

Escalate Playwright UI debugging to full browser automation when Tier 1 static code analysis and Tier 2 targeted evidence are inconclusive. The workflow enforces rule-based escalation to Tier 3 full CLI interaction only after lower tiers fail to validate the hypothesis.

Does this Playwright debugging workflow require specific CLI versions?▼

Yes, the workflow requires preflight checks to verify the correct Playwright CLI version and availability before initiating browser automation. Ensuring proper environment setup prevents session management errors and automation failures during UI bug analysis.

Can I use static code analysis instead of Playwright CLI for UI interaction bugs?▼

Yes, you can use static code analysis as the primary method for UI interaction bugs to minimize Playwright CLI usage. The tiered workflow uses this analysis first to generate hypotheses, escalating to browser automation only when needed for targeted evidence.

Related Skills

Explore More Software Engineering Skills→
zero-rehqzero-rehq

nextjs-ssr-optimization

Analyze Next.js projects and implement SSR, SSG, ISR, and streaming optimizations.

Community
Advanced
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced
CleanExpoCleanExpo
1

playwright-browser

Automate headless browser tasks and end-to-end tests with Playwright.

Community
Advanced
nonputtipongnonputtipong

playwright-mcp

Automate live browser interactions via Playwright MCP server tools.

Community
Intermediate