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

88%

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

The canonical home for this skill is browser-testing-with-devtools in addyosmani/agent-skills

Quality

Content

77%Scale 1-3

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

This is a strong, actionable skill with excellent workflow clarity and concrete guidance for browser testing via Chrome DevTools MCP. Its main weaknesses are verbosity (the security section, rationalizations table, and red flags list have significant overlap) and the monolithic structure that could benefit from splitting detailed reference material into separate files. The security guidance is thorough and well-considered, though it could be more concise.

Suggestions

Consolidate the 'Common Rationalizations' table and 'Red Flags' list into a single section — they cover largely the same ground and the duplication wastes tokens.

Extract the Security Boundaries section into a separate SECURITY.md reference file, keeping only a brief summary and link in the main SKILL.md to improve progressive disclosure.

Trim explanatory prose that Claude doesn't need (e.g., 'This bridges the gap between static code analysis and live browser execution', 'Use Chrome DevTools MCP to give your agent eyes into the browser') — the overview could be 2 lines instead of 4.

Dimension	Reasoning	Score
Conciseness	The skill is well-structured but verbose in several areas. The 'When to Use' list, the 'Common Rationalizations' table, and the 'Red Flags' section overlap significantly. The security boundaries section, while important, is lengthy and could be tightened. The 'Content Boundary Markers' ASCII box and some explanatory prose (e.g., 'This bridges the gap between static code analysis and live browser execution') add tokens without adding information Claude needs.	2 / 3
Actionability	The skill provides concrete, executable guidance throughout: a copy-paste-ready MCP configuration JSON, specific workflow steps with exact tool names, a detailed test plan template with expected outcomes, and clear checklists. The debugging workflows specify exactly what to check at each step (e.g., 'Check response status code', '4xx → Client is sending wrong data').	3 / 3
Workflow Clarity	Multi-step workflows are clearly sequenced with explicit validation checkpoints. The UI bug workflow has a clear REPRODUCE → INSPECT → DIAGNOSE → FIX → VERIFY flow with verification steps (screenshot comparison, clean console check). The network and performance workflows similarly include baseline/measure feedback loops. The final verification checklist serves as a comprehensive checkpoint.	3 / 3
Progressive Disclosure	The content is a single monolithic file with no references to supporting documents, despite being ~250 lines covering installation, security, multiple workflow types, test plans, accessibility, and console analysis. The security boundaries section alone could be a separate reference file. However, the content is well-organized with clear headers, making navigation reasonable within the single file.	2 / 3
	Total	10 / 12 Passed

Description

100%Scale 1-3

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

This is a strong skill description that clearly communicates what the skill does (browser testing and debugging via Chrome DevTools) and when to use it (building or debugging browser-based applications). It lists multiple specific capabilities as trigger terms and is distinctive enough to avoid conflicts with other skills. The prerequisite mention of the chrome-devtools MCP server adds useful context.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: inspect the DOM, capture console errors, analyze network requests, profile performance, verify visual output with real runtime data.	3 / 3
Completeness	Clearly answers both what (tests in real browsers, inspect DOM, capture console errors, analyze network requests, profile performance, verify visual output) and when ('Use when building or debugging anything that runs in a browser'). Includes explicit 'Use when' clauses.	3 / 3
Trigger Term Quality	Includes strong natural trigger terms users would say: 'browser', 'DOM', 'console errors', 'network requests', 'performance', 'visual output', 'Chrome DevTools'. These cover common variations of what users would mention when needing browser debugging.	3 / 3
Distinctiveness Conflict Risk	Clearly scoped to browser-based testing and debugging via Chrome DevTools MCP, with distinct triggers like DOM inspection, console errors, network requests, and performance profiling. The mention of the specific MCP server requirement further narrows the niche and reduces conflict risk.	3 / 3
	Total	12 / 12 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: finlay611/agent-skills
Path: skills/browser-testing-with-devtools/SKILL.md
Commit: e8c9b46

Reviewed: 4 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.