CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

64

Quality

76%

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

70%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 concrete, well-sequenced debugging workflows with strong validation checkpoints and thoughtful security guidance, though the security theme is restated multiple times and the ~310-line single file would benefit from splitting reference material into bundle files. Tool guidance is actionable but stops short of exact MCP tool-call names.

Suggestions

Consolidate the untrusted-data guidance: it currently appears in Security Boundaries, Common Rationalizations, Red Flags, and the Verification checklist — state the rules once and reference them, reclaiming roughly 15-20 lines.

Move the example test plan template, accessibility verification, and console analysis patterns into a references/ file (e.g., references/test-plans.md) and keep one-line pointers in SKILL.md, since no bundle files currently exist.

Name the actual MCP tool calls (e.g., the exact screenshot/console/network tool identifiers from chrome-devtools-mcp) in the Available Tools table so the workflows are directly executable without looking them up.

DimensionReasoningScore

Conciseness

Mostly efficient — the workflows, tool table, and security rules are largely novel content Claude would not already know — but the untrusted-data theme is repeated four times (Security Boundaries, Common Rationalizations, Red Flags, Verification) and prose sections like the Overview and Profile Isolation paragraph could be tightened. Matches 'mostly efficient but includes some unnecessary explanation or could be tightened'; not 4 because the repetition is substantive padding, not minor.

3 / 5

Actionability

Copy-paste-ready MCP server config JSON, a capability table with per-tool usage guidance, concrete step-by-step debugging workflows, and a complete example test plan with expected network payloads (e.g., "PATCH /api/tasks/:id with { status: \"completed\" }"). Falls short of 5 because the tools are named descriptively ("Screenshot", "DOM Inspection") rather than by their actual MCP tool-call names, leaving a small gap between the instructions and executing them.

4 / 5

Workflow Clarity

All three workflows (UI bugs, network issues, performance) have clearly sequenced numbered steps with explicit verification phases — screenshot comparison against the Step-1 baseline, "Confirm console is clean", baseline-vs-after trace comparison — plus a final checklist and a diagnose-then-fix-then-replay feedback loop. This matches the 5 anchor: clear sequence, explicit validation steps, feedback loops, and checklists.

5 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/ directories), and at ~310 lines the SKILL.md is a single well-headered file with everything inlined. Section structure is good, but content that would naturally live in separate reference files (the detailed test-plan template, accessibility verification, console analysis patterns) is inline with no external navigation, matching 'some structure but could be better organized... content that should be separate is inline'.

3 / 5

Total

15

/

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 capabilities, explicit multi-condition triggers, and a prerequisite, with excellent natural trigger vocabulary. Its only deductions are a broad 'anything that runs in a browser' scope that risks overlap with general web-dev skills, and second-person phrasing in the trigger clause.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions ("inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output") approaching comprehensive coverage, but the second-person phrasing "Use when you need to inspect the DOM..." triggers the rubric's one-point voice penalty, capping this at 4 rather than 5.

4 / 5

Completeness

It explicitly answers both what ("Tests in real browsers via Chrome DevTools MCP... inspect the DOM, capture console errors, analyze network requests, profile performance") and when ("Use when building or debugging anything that runs in a browser. Use when you need to..."), plus a concrete prerequisite ("Requires the chrome-devtools MCP server to be configured"). This matches the anchor for clearly and explicitly answering both with concrete trigger phrases; not 4 because the 'when' guidance is already explicit and multi-condition.

5 / 5

Trigger Term Quality

Strong natural keywords users would actually say — "browser", "debugging", "console errors", "network requests", "DOM", "performance" — but common variations like "UI", "frontend", or "rendering" are missing, matching the 'good keyword coverage; a few natural terms missing' anchor.

4 / 5

Distinctiveness Conflict Risk

The Chrome DevTools MCP framing plus DOM/console/network triggers give it a clear niche, but "building or debugging anything that runs in a browser" is broad enough to overlap with general frontend-development or web-testing skills. Mostly distinct with minor overlap risk — matches the 4 anchor rather than 5'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
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.