CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

Quality

78%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/browser-testing-with-devtools/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%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.

The body delivers excellent workflow sequencing with real validation checkpoints and strong security guidance that is genuinely novel for agent-driven browser testing. However, it is noticeably verbose — roughly a third of the content re-explains standard debugging, HTTP, and accessibility knowledge Claude already has — and it is a monolithic single file where several detailed sections belong in reference files. Tightening and splitting would substantially improve token efficiency without losing value.

Suggestions

Remove or drastically trim sections that re-explain knowledge Claude already has: Console Analysis Patterns (the 4xx/5xx and error-level taxonomy), the Screenshot-Based Verification five-step list, and the Accessibility Verification basics (heading hierarchy, 4.5:1 contrast ratio) — keep only the DevTools-specific steps such as reading the accessibility tree via MCP.

Delete the "Common Rationalizations" persuasion table and the ASCII trust-boundary diagram; both duplicate adjacent content, and their one-line essence can be folded into the Security Boundaries rules they restate.

Split the three debugging workflow trees and the test-plan template into one-level-deep reference files (e.g., references/workflows.md, references/test-plan-template.md) linked from SKILL.md, keeping the body focused on setup, the tool table, and security boundaries.

DimensionReasoningScore

Conciseness

Several sections re-explain knowledge Claude already has: the console taxonomy ("Uncaught exceptions → Bug in code", "4xx → Client is sending wrong data"), accessibility basics ("h1 → h2 → h3 (no skipped levels)", "Verify text meets 4.5:1 minimum ratio"), the trivial five-step screenshot comparison, and the motivational "Common Rationalizations" table. This is noticeably verbose with several padded sections (2 anchor) rather than only "some" unnecessary explanation (3 anchor); it avoids the 1 anchor because the setup, tool table, and security sections genuinely earn their tokens.

2 / 5

Actionability

Provides copy-paste-ready MCP config JSON, specific flags ("--isolated", "--autoConnect" with the chrome://inspect prerequisite), a capability table, and a fully worked test plan with concrete expectations ("Network should show PATCH /api/tasks/:id with { status: \"completed\" }"). The minor gap keeping it below fully-executable 5 is that actual MCP tool invocations are described generically ("Take a screenshot", "Read computed styles") without exact tool names or call syntax.

4 / 5

Workflow Clarity

All three workflows are clearly sequenced with explicit validation steps and feedback loops: REPRODUCE→INSPECT→DIAGNOSE→FIX→VERIFY with before/after screenshot comparison and console-clean confirmation, BASELINE→FIX→MEASURE trace comparison, and a closing verification checklist. This matches the 5 anchor (explicit validation, feedback loops, checklists); no destructive/batch validation cap applies since the operations are read-mostly.

5 / 5

Progressive Disclosure

Section organization is good (clear headers, logical flow), but the skill is a single ~320-line monolithic file with no references at all — the debugging workflow trees, the test-plan template, and the accessibility checklist are exactly the content that should be split into one-level-deep reference files. This fits the 3 anchor ("content that should be separate is inline") better than 2 (structure is far from minimal) or 4 (nothing is split out, so placement is not "mostly appropriate").

3 / 5

Total

14

/

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 description that clearly states what the skill does and when to use it, with concrete capability triggers and a distinct DevTools MCP niche. Its only flaws are the broad "anything that runs in a browser" trigger creating mild overlap risk, a few missing natural synonyms (frontend, UI, layout), and second-person phrasing in one trigger clause. Minor rewording ("Use when inspecting the DOM…" instead of "Use when you need to…") would lift it to top marks.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data" — which matches the comprehensive-coverage 5 anchor. However, the judging guideline penalizes second-person voice by reducing specificity by 1, and the trigger clause "Use when you need to inspect the DOM" shifts into second person ("you need"), so an otherwise-5 description scores 4.

4 / 5

Completeness

Explicitly answers both questions: the "what" is "Tests in real browsers via Chrome DevTools MCP", and the "when" is given in two explicit trigger clauses — "Use when building or debugging anything that runs in a browser" and "Use when you need to inspect the DOM, capture console errors...". This clearly matches the 5 anchor (both what and when with concrete trigger phrases); it is not the 4 anchor because the when-clauses are explicit and specific, not merely present.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "building or debugging anything that runs in a browser", "inspect the DOM", "console errors", "network requests", "profile performance". A few natural terms users would say are missing (e.g., "frontend", "UI", "layout", "CSS"), which fits the 4 anchor (good coverage, a few natural terms missing) rather than the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The DevTools MCP niche is clear ("Requires the chrome-devtools MCP server to be configured") with distinct capability triggers, but the deliberately broad trigger "anything that runs in a browser" creates minor overlap risk with general web/frontend development skills. This fits the 4 anchor (mostly distinct, minor overlap with closely related skills) better than the 5 anchor's "minimal conflict risk".

4 / 5

Total

17

/

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

addyosmani/agent-skills

Path

skills/browser-testing-with-devtools/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.