CtrlK
BlogDocsLog inGet started
Tessl Logo

accessibility-standards

WCAG 2.2 Level AA accessibility patterns for React/HTML/CSS. Use when creating or modifying UI components, forms, navigation, tables, images, or any user-facing elements. Covers keyboard navigation, screen reader semantics, low vision contrast, voice access, inclusive language.

71

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

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.

An excellent, dense standards body: every section is a concrete, actionable rule with exact thresholds, attributes, and tooling, and a genuine validate-and-re-run loop. The main weakness is the dangling REFERENCE.md pointer — the deferred composite-widget patterns are neither inlined nor available in the bundle, leaving the skill's most complex topic (roving tabindex, aria-activedescendant) unaddressed.

Suggestions

Create references/REFERENCE.md with the composite widget patterns (roving tabindex, aria-activedescendant) and link it properly (e.g., "in [REFERENCE.md](references/REFERENCE.md)"), or inline the two patterns as short bullet rules and drop the pointer — currently the referenced file does not exist in the bundle.

Add one line ordering the workflow (e.g., apply section rules while building, then run the Validation section before finishing) so the rule sections and the validation loop have an explicit sequence.

Clarify the navigation pattern section: it says "roving tabindex across top-level items" but defers the actual implementation to the missing REFERENCE.md — either include a minimal code snippet or move both mentions to the same location.

DimensionReasoningScore

Conciseness

The body is a lean rule set: exact ratios ("≥4.5:1", "≥3:1"), exact attributes, one precise CSS snippet, and tool names — with zero explanation of concepts Claude already knows. Every token earns its place, matching the "lean and efficient" anchor.

5 / 5

Actionability

Guidance is fully concrete and executable throughout: exact contrast ratios and pixel thresholds, exact ARIA attributes ("aria-invalid=\"true\" + aria-describedby"), a copy-paste-ready skip-link CSS rule, a page-title format template, and named validation commands ("axe-core (axe-playwright or pa11y in CI)"). This is instruction-only guidance at copy-paste specificity, matching the 5 anchor for non-code skills.

5 / 5

Workflow Clarity

The Validation section provides a real feedback loop ("fix all high/critical findings and re-run until clean", plus manual tab-through), which is strong. It falls between anchors 4 and 5 rather than clearly at 5 because the body is a set of parallel rule sections with no guidance on sequencing the checks within a development workflow (e.g., when the tab-order or contrast checks apply relative to building a component).

4 / 5

Progressive Disclosure

Sections are well-organized and the body is appropriately short, but the one external pointer — "Composite widget patterns (roving tabindex, `aria-activedescendant`) in REFERENCE.md" — is not clearly signaled (no path or link) and no such file exists in the bundle (no references/ directory is present). This matches the anchor for references present but not clearly realized, rather than the good-structure anchor 4.

3 / 5

Total

17

/

20

Passed

Description

87%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, well-formed description: concise, third-person, with an explicit and specific "Use when" clause and a concrete coverage list anchored to a named standard. The only softness is that the what-clause lists covered topic areas rather than discrete actions, and a few common trigger synonyms (a11y, aria, alt text) are absent.

DimensionReasoningScore

Specificity

The description names the domain ("WCAG 2.2 Level AA accessibility patterns for React/HTML/CSS") and lists several specific coverage areas ("keyboard navigation, screen reader semantics, low vision contrast, voice access, inclusive language"). It stops short of the 5 anchor because it enumerates topics/patterns covered rather than multiple discrete concrete actions, leaving minor gaps in coverage of what is actually done.

4 / 5

Completeness

It explicitly answers both questions with concrete trigger phrases: a clear what ("WCAG 2.2 Level AA accessibility patterns for React/HTML/CSS ... Covers keyboard navigation, screen reader semantics, low vision contrast, voice access, inclusive language") and an explicit when ("Use when creating or modifying UI components, forms, navigation, tables, images, or any user-facing elements"). This matches the 5 anchor directly and is above the 4 anchor because the when-clause is specific, not generic.

5 / 5

Trigger Term Quality

The when-clause includes natural phrases users would say ("UI components, forms, navigation, tables, images, or any user-facing elements"), giving good keyword coverage. A few natural terms are missing — common variations like "a11y", "aria", "alt text" are absent, and "accessibility" appears only in the what-clause rather than as an explicit trigger phrase.

4 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche (WCAG 2.2 Level AA compliance for React/HTML/CSS) with distinct triggers around UI construction, so it is unlikely to fire for unrelated skills. Conflict risk is minimal — it would not plausibly trigger for a wrong skill.

5 / 5

Total

18

/

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
monkilabs/opencastle
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.