CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

72

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

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 strong skill body: concrete executable commands and Browser APIs, clearly sequenced workflows with explicit validation checkpoints and a reload-and-recheck feedback loop, and a well-defined QA report format. The only improvements are trimming minor redundant passages and considering whether the report template or checklists belong in a separate reference file.

DimensionReasoningScore

Conciseness

The body is dense, imperative, and free of explanations of concepts Claude already knows; nearly every line is task-specific guidance. Minor redundancy (the screenshot-gallery placement rules are stated twice around lines 124 and 126, and the do-not-write-into-repo rules repeat across lines 128-130) keeps it just below the lean anchor 5.

4 / 5

Actionability

Guidance is fully executable with copy-paste-ready commands and API calls: 'agent.browser.nameSession("...")', 'tab.goto(url)', 'await tab.playwright.domSnapshot()', 'await tab.dev.logs({ levels: ["error", "warn"], limit: 50 })', and 'pnpm exec playwright screenshot <url> /tmp/frontend-check.png'. Specific examples cover both the Browser and Playwright paths and the common cases.

5 / 5

Workflow Clarity

Multi-step processes are clearly sequenced (5-step invocation loop, 7-step Browser sequence, ordered Playwright branch) with an explicit feedback loop ('After edits, call await tab.reload(), then repeat the checks and the failing interaction') and a required-checks validation checklist plus a final validation checklist. This matches the anchor for clear sequence with explicit validation, feedback loops, and checklists.

5 / 5

Progressive Disclosure

Sections are well organized with clear headers, no nested or buried references, and no bundle files exist to inline incorrectly. However, everything lives in one ~140-line file: the detailed QA report template and checklists could arguably be split into a reference file, which is a minor organization gap consistent with anchor 4 rather than the fully split, reference-driven anchor 5.

4 / 5

Total

18

/

20

Passed

Description

88%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 description: it states concrete capabilities, includes an explicit and specific 'Use when' trigger clause, and defines a clear Browser-plugin-first routing policy. The only gaps are a few missing natural synonyms (localhost, e2e, screenshot) and mild overlap risk with generic frontend development triggers.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions and coverage areas ('testing, debugging, or making targeted improvements to rendered frontend apps', 'UI regressions, interaction bugs, console errors, responsive layout, and visual QA') plus a concrete Browser-then-Playwright routing behavior, matching the comprehensive-coverage anchor. It uses third-person/imperative voice with no first- or second-person phrasing, so no voice penalty applies.

5 / 5

Completeness

It explicitly answers 'when' with a concrete 'Use when testing, debugging, or making targeted improvements to rendered frontend apps' trigger clause and answers 'what' with the specific validation surfaces and the Browser-first/Playwright-fallback policy. Both what and when are explicit with concrete triggers, matching anchor 5.

5 / 5

Trigger Term Quality

Good natural keyword coverage including 'testing', 'debugging', 'UI regressions', 'interaction bugs', 'console errors', 'responsive layout', 'visual QA', and named plugins a user would mention. A few common natural phrases users would say ('localhost', 'e2e', 'screenshot', 'browser testing') are absent, keeping it below the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

The scope is tied to rendered frontend QA through named plugins (Build Web Apps / web dev plugin), making it mostly distinct with minimal conflict risk. Generic frontend testing and the broad 'web dev plugin' trigger could slightly overlap with general frontend development skills, so it is not a clear niche-with-minimal-conflict 5.

4 / 5

Total

18

/

20

Passed

Validation

100%

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

Reviewed

Table of Contents

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.