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 any interactive UI component or form.

72

Quality

88%

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

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, actionable patterns reference with executable examples and a useful verification checklist, weakened mainly by redundancy between the partial and complete form examples and by a monolithic single-file structure with no progressive disclosure.

Suggestions

Collapse the 'Complete Accessible Form' into a pointer that combines the prior Label/Required/Error snippets, or move it to a reference file to remove redundancy and trim the body.

Move the larger worked components (Dropdown, Modal, full LoginForm) into a references/ file linked from a concise overview section to improve progressive disclosure.

Tighten section intros that restate the description (e.g., the opening paragraph repeats the frontmatter scope) to recover token budget.

DimensionReasoningScore

Conciseness

Mostly efficient BAD/GOOD contrasts that assume Claude's competence, but the full 'Complete Accessible Form' largely restates the preceding Label/Required/Error subsections and the ~430-line body could be tightened.

2 / 3

Actionability

Provides complete, executable TSX components (LoginForm, Dropdown, Accordion, Modal, useReducedMotion) that are copy-paste ready with specific attribute usage.

3 / 3

Workflow Clarity

A 'When to Activate' section sequences entry conditions and a terminal 'Checklist' gives explicit pre-submit verification; as a pattern reference with no destructive ops, the single-action flow is unambiguous.

3 / 3

Progressive Disclosure

Sections are well-organized, but no bundle files exist and the entire body is inline in one ~430-line file — substantial worked examples (full form, dropdown) could be split into one-level-deep references.

2 / 3

Total

10

/

12

Passed

Description

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.

A concise, well-constructed description that states concrete capabilities, includes an explicit 'Use when' trigger, and occupies a distinct niche. Voice is appropriately third-person and impersonal.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support' — rather than vague abstractions.

3 / 3

Completeness

Explicitly answers both what ('Accessibility patterns for React and Next.js — ...') and when ('Use when building any interactive UI component or form.').

3 / 3

Trigger Term Quality

Uses natural terms developers actually say — 'accessibility', 'ARIA', 'form', 'keyboard navigation', 'screen reader', 'interactive UI component' — with good coverage of common variations.

3 / 3

Distinctiveness Conflict Risk

Targets a clear accessibility niche with React/Next.js framing and distinct triggers, making it unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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.

Validation15 / 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.