CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

a11y-debugging

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

Quality

87%

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

86%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 well-structured, highly actionable skill body: concrete Chrome DevTools MCP tool calls with parameter values, an executable report-parsing one-liner, and clean one-level-deep references to verified JavaScript snippets. Weaknesses are minor — a little known-concept padding in Core Concepts and implicit rather than explicit validation in some workflow sections.

DimensionReasoningScore

Conciseness

The body is largely lean, tool-specific instruction (parameter values, snippet pointers, a jq/Node parsing tip) rather than background exposition. Minor instances could be trimmed — the aside 'This is much easier to read!' and the re-explanation of opacity:0 vs display:none/aria-hidden screen-reader behavior, which Claude already knows — so it fits 'efficient with minor over-explanation' rather than the every-token-earns-its-place level 5.

4 / 5

Actionability

Guidance is fully executable: exact tool names with concrete parameter settings ('Set mode to "navigation"', 'types: ["issue"]', 'includePreservedMessages: true'), a copy-paste Node one-liner for extracting failing audits, and four named, complete JavaScript snippets verified to exist in references/a11y-snippets.md and directly usable with evaluate_script. This matches the copy-paste-ready anchor covering the common cases.

5 / 5

Workflow Clarity

The eight workflow patterns are clearly sequenced with numbered steps and concrete tool calls, and verification appears in places ('Locate the element marked as focused... to verify focus moved to the expected interactive element') plus a Troubleshooting fallback for failed contrast checks. Not all workflows carry explicit validation checkpoints — several sections end with a directional check like 'Ensure heading levels... are logical' — which fits anchor 4 rather than the explicit-checkpoint/feedback-loop anchor 5. The workflows are read-only diagnostics, so the destructive/batch cap does not apply.

4 / 5

Progressive Disclosure

The body is a well-sectioned overview (Core Concepts, eight workflow patterns, Troubleshooting), and the single bundle file is one level deep, referenced at each point of use by bolded snippet name with a markdown link ('the "Find Orphaned Form Inputs" snippet found in [references/a11y-snippets.md]'). The referenced file exists and contains exactly the four advertised, well-organized snippets — matching the clear-overview, well-signaled one-level-deep anchor.

5 / 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 description with explicit third-person 'what' and a concrete 'Use when' trigger list covering the main a11y testing areas. Keyword coverage is good but omits a few natural synonyms (screen reader, WCAG, alt text), and the core actions 'debugging and auditing' are slightly generic relative to the specific trigger enumeration.

DimensionReasoningScore

Specificity

The description names the tool ('Uses Chrome DevTools MCP') and the domain ('accessibility (a11y) debugging and auditing') and lists several specific capability areas ('semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast'). It stops short of 5 because coverage has minor gaps (e.g., no screen-reader or WCAG-report deliverables) and 'debugging and auditing' is itself fairly generic; it exceeds 3 because far more than 1-2 concrete actions are named.

4 / 5

Completeness

It explicitly answers both: 'what' ('Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines') and 'when' with a concrete 'Use when testing...' clause enumerating trigger phrases. This matches the anchor where both what and when are explicit and concrete.

5 / 5

Trigger Term Quality

It includes natural phrases users would actually say — 'ARIA labels', 'tap targets', 'color contrast', 'keyboard navigation', 'focus states' — plus the 'a11y' synonym. A few common natural terms are missing (e.g., 'screen reader', 'WCAG', 'alt text', 'accessibility audit'), keeping it below the comprehensive-synonym coverage of a 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche (a11y auditing via Chrome DevTools MCP) with domain-specific triggers makes wrong-skill triggering unlikely, but there is minor overlap risk with a closely related general browser-testing or frontend-QA skill via shared terms like 'focus states' and 'keyboard navigation' — the anchor-4 fit, not the minimal-conflict anchor 5.

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

ChromeDevTools/chrome-devtools-mcp

Path

skills/a11y-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.