CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-a11y

Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building or reviewing forms, modals, dropdowns, tooltips, or tabs, fixing a11y lint or code-review findings, or wiring up keyboard navigation and focus management.

69

Quality

85%

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

75%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 highly actionable, well-organized pattern reference whose code examples are uniformly executable and whose anti-patterns and checklist directly serve the code-review use case. The main cost is token weight: the complete-form example duplicates earlier snippets, and a couple of longer worked examples could move to reference files.

Suggestions

Trim or cut the 'Complete Accessible Form' example — it recombines the three preceding snippets — or replace the snippets with the single full example to remove the redundancy.

Move the longest worked examples (complete form, custom dropdown, modal) into a references/ file and keep one-line pointers plus the short BAD/GOOD pairs in SKILL.md to reduce token load.

Add a short 'fixing a review finding' sequence (find the matching pattern → apply the GOOD variant → re-run the checklist) to make the remediation workflow explicit.

DimensionReasoningScore

Conciseness

The BAD/GOOD pairs are tight and lean, but the ~70-line "Complete Accessible Form" largely restates the three preceding snippets (label pairing, required fields, error messages), and a few framing sentences ("Every interactive element must be reachable and operable by keyboard alone") restate what Claude already knows. It could be tightened without losing value.

3 / 5

Actionability

Nearly all guidance is copy-paste-ready executable TSX covering the common cases: label/id pairing, aria-describedby errors, semantic replacements for div onClick, dropdown keyboard handling, modal focus restoration, decorative vs. meaningful images, and a reduced-motion hook.

5 / 5

Workflow Clarity

This is a pattern-reference skill rather than a multi-step process, and the "When to Activate" section plus the closing Checklist ("Every <input>... has a connected <label>") give an unambiguous apply-then-verify flow. It falls short of a 5 because there is no explicit locate-pattern → apply → re-check sequence for working through a review finding.

4 / 5

Progressive Disclosure

No bundle files exist, and the single-file body is organized into well-labeled sections (forms, semantic HTML, ARIA, keyboard, focus, images, motion, anti-patterns, checklist) with a related-skills pointer list. At ~440 lines, the longer full-component examples (complete form, dropdown) are candidates for reference files, which is a minor rather than significant organization gap.

4 / 5

Total

16

/

20

Passed

Description

96%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 that clearly states concrete capabilities and provides an explicit, natural-language activation clause. The only weakness is slight overlap with general code-review/lint-fixing skills via the review-findings trigger.

Suggestions

Consider narrowing the review-findings trigger (e.g. "fixing accessibility findings from a11y lint or code review") to further reduce overlap with generic code-review skills.

DimensionReasoningScore

Specificity

The description enumerates six concrete capability areas — "semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support" — with third-person voice, giving comprehensive coverage of the domain.

5 / 5

Completeness

It explicitly answers both questions: "what" via the enumerated capability list and "when" via a full "Use when building or reviewing forms, modals, dropdowns, tooltips, or tabs, fixing a11y lint or code-review findings..." clause.

5 / 5

Trigger Term Quality

Natural trigger phrases users and reviewers actually say are well covered: "forms, modals, dropdowns, tooltips, or tabs", "a11y lint or code-review findings", plus synonyms ("a11y", "screen reader"). Only minor variations like "WCAG" are absent.

5 / 5

Distinctiveness Conflict Risk

The niche (React/Next.js accessibility) is clear and triggers are distinct, but "fixing a11y lint or code-review findings" has minor overlap risk with generic code-review and lint-fixing skills.

4 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
affaan-m/ECC
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.