frontend-testing-debugging

Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

88%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-sequenced skill body with concrete Browser/Playwright APIs, explicit validation checkpoints, and a feedback loop. The main improvement would be consolidating repeated screenshot-placement guidance and optionally externalizing the elaborate QA report template.

Suggestions

Consolidate the screenshot-placement rules (currently restated in Evidence, the 'Do not interleave screenshots' line, and Final Response) into a single canonical statement.

Consider moving the detailed QA Final Response Report template into a references/ file and linking to it, reducing SKILL.md length while preserving the format.

Tighten the Validation Checklist by merging near-duplicate items (e.g. the responsive-viewport guidance appears in both Required Browser Checks and Validation Checklist).

Dimension	Reasoning	Score
Conciseness	The body is efficient and assumes Claude's competence (it never explains what Playwright, viewports, or dev servers are), but screenshot-placement guidance is restated across the Evidence, Screenshots, and final-response sections and could be consolidated.	4 / 5
Actionability	Provides copy-paste-ready executable commands throughout, e.g. `agent.browser.nameSession("...")`, `await tab.playwright.domSnapshot()`, `await tab.dev.logs({ levels: ["error", "warn"], limit: 50 })`, and `pnpm exec playwright screenshot <url> /tmp/frontend-check.png`, covering both Browser and Playwright paths.	5 / 5
Workflow Clarity	Sequenced numbered workflows (Required sequence, Required Browser Checks, Playwright Loop) with explicit validation checkpoints and a reload-and-repeat feedback loop ("After edits, call await tab.reload(), then repeat the checks and the failing interaction"), plus a validation checklist.	5 / 5
Progressive Disclosure	Well-organized into clearly headed sections with no nested references and no bundle files to navigate; at ~140 lines it exceeds the simple-skill threshold, so the fully inlined QA report format and checklists could arguably live in a reference file, but the single-file structure remains coherent and easy to navigate.	4 / 5
	Total	18 / 20 Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, specific description that explicitly pairs a 'Use when' trigger with concrete actions and surfaces, and carves out a clear rendered-frontend-testing niche. It could be tightened by converting a few surface nouns into actions and adding a couple of common synonyms.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ("testing, debugging, or making targeted improvements", "Check whether the Browser plugin is available", "use regular Playwright") alongside specific surfaces, though several listed items ("local dev servers", "responsive layout", "visual QA") are domains rather than actions, leaving minor gaps versus a fully comprehensive action list.	4 / 5
Completeness	Opens with an explicit "Use when..." trigger clause and lists concrete capabilities, clearly and explicitly answering both what the skill does and when Claude should use it.	5 / 5
Trigger Term Quality	Strong natural keyword coverage ("testing, debugging", "UI regressions", "interaction bugs", "console errors", "responsive layout", "visual QA", "Playwright") that users would actually say, though a few common synonyms (e.g. "screenshots", "e2e") are absent.	4 / 5
Distinctiveness Conflict Risk	The rendered-frontend-testing niche through named plugins (Build Web Apps, web dev plugin) with Browser/Playwright routing is mostly distinct, with only minor overlap risk against closely related frontend skills like frontend-app-builder or react-best-practices.	4 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: openai/plugins
Path: plugins/build-web-apps/skills/frontend-testing-debugging/SKILL.md
Commit: 1e28582

Reviewed: 9 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.