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.
79
81%
Does it follow best practices?
Impact
55%
1.01xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Quality
Discovery
100%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 its purpose, tools, and trigger conditions. It uses third person voice, lists specific concrete capabilities, includes natural trigger terms that users would actually say, and has an explicit 'Use when' clause with well-chosen keywords. The mention of Chrome DevTools MCP and web.dev guidelines provides excellent distinctiveness.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: accessibility debugging and auditing, testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast. | 3 / 3 |
Completeness | Clearly answers both what ('accessibility debugging and auditing based on web.dev guidelines') and when ('Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'accessibility', 'a11y', 'semantic HTML', 'ARIA labels', 'focus states', 'keyboard navigation', 'tap targets', 'color contrast'. These are all terms a user would naturally use when seeking accessibility help. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche: accessibility auditing via Chrome DevTools MCP with web.dev guidelines. The specific tool (Chrome DevTools MCP), domain (a11y), and reference framework (web.dev) make it very unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
62%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured accessibility debugging skill with clear workflow patterns and good use of Chrome DevTools MCP tools. Its main weaknesses are moderate verbosity in explaining concepts Claude already understands and heavy reliance on external snippet files (references/a11y-snippets.md) that aren't provided in the bundle, reducing standalone actionability. The workflow sequencing is strong with logical steps and appropriate tool usage.
Suggestions
Trim the 'Core Concepts' section—Claude already understands the accessibility tree vs DOM distinction and CSS visibility semantics. Keep only the actionable tip about .md.txt URLs.
Include the actual code for at least the most critical snippets (e.g., 'Find Orphaned Form Inputs', 'Measure Tap Target Size') inline or ensure references/a11y-snippets.md is provided in the bundle, since multiple workflows depend on them.
Add the actual Lighthouse MCP tool call syntax (tool name and parameters) rather than describing parameters in prose, to make the audit step copy-paste ready.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Generally efficient but includes some unnecessary explanations (e.g., explaining what the accessibility tree is, explaining what CSS opacity does vs display:none). The 'Core Concepts' section explains things Claude likely already knows. Some workflow descriptions could be tighter. | 2 / 3 |
Actionability | Provides a mix of concrete and vague guidance. The Lighthouse jq/node one-liner is executable and useful, and tool names are specific. However, many steps rely on snippets in references/a11y-snippets.md which are not provided in the bundle, making them non-executable from this file alone. Several steps describe what to do conceptually rather than giving exact commands or code. | 2 / 3 |
Workflow Clarity | Workflows are clearly numbered and sequenced across 8 distinct patterns. The Lighthouse workflow includes explicit validation steps (analyze summary, review report). Focus testing has a clear loop (press Tab, take snapshot, verify). Each workflow has a logical progression with specific tool calls at each step. | 3 / 3 |
Progressive Disclosure | The skill references 'references/a11y-snippets.md' multiple times for detailed code snippets, which is good progressive disclosure design. However, no bundle files were provided, so we cannot verify these references exist. The main file itself is moderately long (~100 lines of content) but reasonably organized with clear section headers. The web.dev .md.txt tip is a nice touch for external references. | 2 / 3 |
Total | 9 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- ChromeDevTools/chrome-devtools-mcp
- Commit
2e039c0
- 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.