CtrlK
BlogDocsLog inGet started
Tessl Logo

accessible-tooltips

Use when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips. Validate the final browser-facing markup, not just the source framework abstraction.

52

Quality

58%

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/accessible-tooltips/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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.

The body is a well-disclosed overview that correctly pushes implementation detail to a single one-level-deep reference, and its Fix section names the exact ARIA attributes needed. Its weaknesses are redundancy across the Quick Reference/Check/Explain sections, a 'why it matters' preamble, and the absence of any concrete verification loop in the body itself.

Suggestions

Merge the redundant Check/Explain sections into the Quick Reference and drop the opening 'why it matters' sentence — the requirements list already implies it.

Add a concrete validation checkpoint to the workflow, e.g., 'After any fix: tab to the trigger (tooltip must appear), press Escape (tooltip must close), confirm the screen reader announces the tooltip via aria-describedby' — mirroring the Verification section already in references/rule.md.

Include a minimal compliant markup snippet (button with aria-describedby + div with role='tooltip') or an inline pointer to the exact Code Example section of references/rule.md so the Fix is directly executable from the body.

DimensionReasoningScore

Conciseness

The body is short and mostly lean, but it opens with a 'why it matters' sentence explaining accessibility consequences Claude already knows ('leave keyboard and screen reader users without important contextual information'), and the Check/Explain sections largely restate the Quick Reference bullets. This matches 'mostly efficient but includes some unnecessary explanation or could be tightened'; it is not anchor 4 because the redundancy spans several sections rather than being a minor trim.

3 / 5

Actionability

Concrete guidance exists at the attribute level ('role='tooltip', aria-describedby, keyboard triggering, and Escape key dismissal'; 'focusable trigger'; 'hover and focus to show'), but the body contains no markup or code example and the Check section is high-level ('Verify tooltips are keyboard accessible, use appropriate ARIA roles') with no concrete verification method. This fits 'some concrete guidance but incomplete... missing key details'; the executable code exists only in the reference file, so the body alone is not 'mostly executable guidance' (anchor 4).

3 / 5

Workflow Clarity

A rough Check → Fix → Explain → Code Review sequence is present, but it is implicit rather than sequenced, and there is no validation checkpoint confirming a fix actually works (e.g., tab to trigger → tooltip appears → Escape closes). This matches 'steps listed but validation gaps; sequence present but checkpoints missing or implicit'. It is not capped at 3 by the destructive/batch rule since this is a review skill, but it also does not reach anchor 4's 'clear sequence with most checkpoints present'.

3 / 5

Progressive Disclosure

The body is a genuinely concise overview (requirements, check, fix, review scope) and all detailed material — code examples, framework components, CSS, verification checklist — is appropriately split into a single real file, clearly signaled: 'For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`.' The reference is one level deep (verified to exist and contain the details) with no nested references, matching 'clear overview with well-signaled one-level-deep references; content appropriately split; easy navigation'.

5 / 5

Total

14

/

20

Passed

Description

58%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.

The description has an explicit 'Use when...' trigger and a clear review-oriented intent, but it under-specifies what is actually validated and relies on generic review phrasing that overlaps with sibling HTML-rule skills. The awkward inline rule title 'related to Create accessible tooltips' also reads as template boilerplate rather than natural trigger language.

Suggestions

Enumerate the concrete checks performed, e.g., 'Validate keyboard access, aria-describedby association, role=tooltip, and Escape-key dismissal in the final rendered markup.'

Add natural trigger synonyms users would say: 'accessibility', 'a11y', 'ARIA', 'screen reader', 'keyboard navigation', 'WCAG'.

Make the trigger tooltip-specific rather than the generic 'reviewing templates, rendered HTML, or shared components' shared by sibling rules — e.g., 'Use when reviewing or building tooltip/hover-hint UI and the user mentions tooltips, ARIA, or accessibility.'

DimensionReasoningScore

Specificity

The description names the domain ('accessible tooltips', 'rendered HTML') and one concrete action ('Validate the final browser-facing markup'), but does not enumerate several specific actions (e.g., checking keyboard access, aria-describedby, Escape dismissal). It matches 'names domain and 1-2 concrete actions, but not comprehensive' and falls short of anchor 4, which requires several listed specific actions.

3 / 5

Completeness

Both parts are explicit: the 'what' is 'Validate the final browser-facing markup, not just the source framework abstraction' and the 'when' is 'Use when reviewing templates, rendered HTML, or shared components'. It falls short of anchor 5 because the 'what' does not state what accessibility criteria are validated (keyboard access, ARIA roles, dismissal), leaving the capability description thin rather than concrete.

4 / 5

Trigger Term Quality

Relevant keywords are present ('tooltips', 'rendered HTML', 'templates', 'shared components', 'markup'), but common natural variations are missing: 'accessibility'/'a11y', 'ARIA', 'screen reader', 'keyboard', 'WCAG'. This fits 'some relevant keywords but missing common variations or synonyms'; it is above anchor 2 because the terms present are domain-relevant rather than generic.

3 / 5

Distinctiveness Conflict Risk

'Create accessible tooltips' pins a clear niche, but the trigger clause 'reviewing templates, rendered HTML, or shared components' is generic boilerplate that would equally fire for sibling frontend-checklist HTML rules (modals, forms, images), creating overlap risk. This matches 'somewhat specific but could still overlap with similar skills'; it is not anchor 4 because the shared review-trigger phrasing is broad rather than tooltip-distinct.

3 / 5

Total

13

/

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.