CtrlK
BlogDocsLog inGet started
Tessl Logo

accordion-accessibility

Use when reviewing templates, rendered HTML, or shared components related to Make accordions keyboard navigable. Validate the final browser-facing markup, not just the source framework abstraction.

60

Quality

70%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/accordion-accessibility/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 lean, well-structured review skill body that uses progressive disclosure correctly: a short overview with specific attribute-level guidance pointing to a real one-level-deep reference with full code. The main weakness is redundancy — the same attribute list is restated across four sections — and the absence of any explicit sequencing or validation checkpoint linking the Check/Fix/Explain/Review modes.

Suggestions

Consolidate the attribute requirements into one canonical list (Quick Reference) and have Check/Fix/Code Review reference it rather than restating 'button elements, aria-expanded, aria-controls, keyboard support' nearly verbatim in each section.

Add an explicit validation checkpoint for a review workflow, e.g., 'confirm the rendered/browser DOM (not just the template source) before flagging — re-render or fetch the page if only source is available'.

Sequence the modes explicitly (Check → Fix → Explain → Code Review) or state that they are independent use modes, so the intended workflow is unambiguous.

DimensionReasoningScore

Conciseness

The body is short and sectioned, but the core attribute list (button triggers, aria-expanded, aria-controls, keyboard/arrow support) is restated nearly verbatim across Quick Reference, Check, Fix, and Code Review — e.g., 'Verify accordions use button triggers with aria-expanded, aria-controls, and proper keyboard navigation' versus 'Implement accordions with button elements, aria-expanded state, aria-controls linking to content panels, and keyboard support'. This systematic repetition goes beyond the 'minor instances' of the score-4 anchor, though nothing is padded with background Claude already knows.

3 / 5

Actionability

Guidance is concrete and specific: exact elements ('button elements for accordion triggers'), exact attributes ('aria-expanded', 'aria-controls'), exact keys ('Enter, Space, arrows'), and a directive to 'Flag exact elements, attributes, and routes'. No executable code appears in the body itself, but for an instruction-oriented review skill the rubric notes that absence of code is not penalized when guidance is actionable, and a complete HTML example sits one reference away — leaving only a minor gap versus fully copy-paste-ready material.

4 / 5

Workflow Clarity

Check, Fix, Explain, and Code Review give clear, unambiguous per-mode guidance for this non-destructive review task, each stating what to verify and what to produce. It falls short of 5 because the modes are presented as parallel unsequenced sections with no explicit ordering or validation checkpoint (e.g., confirm the rendered DOM matches the source template) connecting them.

4 / 5

Progressive Disclosure

The body is a lean overview (under 50 lines) with clearly signaled, one-level-deep references: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md'. The referenced file exists in the bundle and contains the detailed code example, so content is appropriately split with easy navigation — a direct match to the score-5 anchor.

5 / 5

Total

16

/

20

Passed

Description

70%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 solid description with an explicit and specific 'Use when' clause and a clear, niche trigger target. Its main weakness is that the 'what' side covers only a single validation action and the natural-term set omits common accessibility synonyms (a11y, screen reader, ARIA).

Suggestions

Lead with a concise capability statement enumerating the concrete actions (e.g., 'Check accordion markup for button triggers, aria-expanded, aria-controls, and arrow-key navigation; flag and fix violations') before the 'Use when' clause.

Add natural accessibility synonyms such as 'accessibility', 'a11y', 'screen reader', and 'ARIA' to the trigger terms so users searching with those phrases match this skill.

Replace the awkward rule-name phrasing 'related to Make accordions keyboard navigable' with plain language like 'related to keyboard-accessible accordions' to improve both trigger quality and clarity.

DimensionReasoningScore

Specificity

The description names the domain ('Make accordions keyboard navigable', 'templates, rendered HTML, or shared components') and 1-2 concrete actions ('Validate the final browser-facing markup'), but does not enumerate several specific capabilities as the 4-5 anchors require. It is more concrete than the score-2 anchor ('names domain but actions minimal'), since two concrete actions are stated.

3 / 5

Completeness

Both parts are present: an explicit 'Use when…' clause with concrete trigger targets (reviewing templates, rendered HTML, shared components) and a clear what ('Validate the final browser-facing markup, not just the source framework abstraction'). It does not reach 5 because the 'what' states only a single validation action rather than comprehensively describing what the skill does (check, fix, explain, review), and the phrasing 'related to Make accordions keyboard navigable' reads as an awkward rule-name reference rather than a fully explicit capability statement.

4 / 5

Trigger Term Quality

Natural terms users would say are present: 'templates', 'rendered HTML', 'shared components', 'accordions', 'keyboard navigable', 'markup'. A few common synonyms are missing — notably 'accessibility', 'a11y', 'screen reader', and 'ARIA' — so it falls short of the comprehensive coverage of the score-5 anchor but is clearly above 'some relevant keywords' (3).

4 / 5

Distinctiveness Conflict Risk

The niche trigger ('accordions keyboard navigable' in rendered HTML) gives a clear specialty with distinct triggers. Minor overlap risk remains with closely related sibling skills (other HTML accessibility review rules) that would share the generic 'templates, rendered HTML, or shared components' trigger phrases, placing it just below the minimal-conflict score-5 anchor.

4 / 5

Total

15

/

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
thedaviddias/Front-End-Checklist
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.