Content
85%Weight 40%Scale 1-5Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
A lean, standards-style skill body: precise numeric thresholds, named tools, an explicit CI/manual validation gate, and a well-structured single-level reference file with runnable code examples. Its one real weakness is redundancy — the Anti-Patterns section and parts of the Semantic HTML section restate earlier rules verbatim — plus scattered grammar slips in otherwise unambiguous rules.
Suggestions
Trim the duplicated guidance: the Anti-Patterns section restates the Semantic HTML ('No onClick on <div>'), Focus style ('No outline: none'), and Color ('No color-only status') rules already covered above — either delete those recap bullets or drop the original inline rules and keep only the consolidated checklist.
Remove the redundant bullet '`<button>` not `<div onClick>`, `<a>` not `<span onClick>`' in the Semantic HTML section, since the preceding two bullets already state the same rule.
Fix grammar slips that slightly blur the otherwise precise rules, e.g., 'Every `<img>` must `alt` attribute' → 'Every `<img>` must have an `alt` attribute', 'All interactive elements MUST reachable' → 'must be reachable', and 'may harmed' → 'may be harmed'.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The body is dense and assumes Claude's knowledge (no explaining what HTML/ARIA is), but contains real redundancy that could be tightened: the "Anti-Patterns" section restates rules already given ("No `onClick` on `<div>`: Use `<button>`..." vs. "Never `<div>`/`<span>` for interactive elements"; "No `outline: none` without replacement focus style" vs. the Focus style rule; "No color-only status" vs. "Never convey information through color alone"), and the Semantic HTML section repeats itself ("`<button>` not `<div onClick>`" duplicates the two bullets above it). This matches anchor 3 ('Mostly efficient but... could be tightened') rather than 4, since a whole section plus intra-section bullets are duplicated, not just minor trims. | 3 / 5 |
Actionability | Quotes: "Normal text: ≥ 4.5:1 ratio. Large text (≥ 18pt or 14pt bold): ≥ 3:1", "Minimum interactive target size: 44×44px... 24×24px minimum", "CI gate: `axe-core` zero critical violations", "Test with: axe DevTools, WAVE, Lighthouse" — precise, measurable, executable rules with named tools and a concrete testing gate. Code examples are appropriately delegated to references/REFERENCE.md (verified to exist with runnable HTML snippets), so per the scoring notes the absence of inline code is not penalized. Matches 'concrete, specific guidance... specific examples cover the common cases' — not 4, since there are no real gaps in the guidance. | 5 / 5 |
Workflow Clarity | This is a single-purpose standards skill with an explicit validation section: "CI gate: `axe-core` zero critical violations" and "Manual: keyboard-only full flow + screen reader (NVDA/VoiceOver) + 200% zoom" provide the enforcement/verification loop. The action (apply these standards, then verify with these named tools) is unambiguous, and the priority is stated up front ("Priority: P1 (HIGH)"), so under the simple-skill exception workflow clarity can score 5. Not 4 because validation checkpoints are explicitly present, not implicit. | 5 / 5 |
Progressive Disclosure | The body is a well-organized ~70-line overview with clear section headers, and detailed code patterns are correctly pushed to a single one-level-deep reference: "[Semantic HTML, ARIA & Focus Patterns](references/REFERENCE.md)" — verified to exist (59 lines of concrete HTML examples), so the link is real and appropriately scoped. Additional external pointers (WCAG 2.2 Quick Reference, ARIA APG, axe-core rules) are clearly listed. Matches 'Clear overview with well-signaled one-level-deep references; content appropriately split; easy navigation'. | 5 / 5 |
Total | 18 / 20 Passed |