CtrlK
BlogDocsLog inGet started
Tessl Logo

decorative-elements

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant. If an image is clearly decorative, default to no finding unless the snippet shows an actual issue such as broken semantics, focusability, or visible layout instability.

59

Quality

69%

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/decorative-elements/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 well-structured, actionable body with excellent progressive disclosure (a verified one-level-deep reference and clean section organization). The main drag is conciseness: the no-finding guardrail is stated three times and the Explain section restates generic screen-reader knowledge that could be trimmed or pushed to the reference.

Suggestions

State the "default to no finding unless the snippet shows a concrete issue" guardrail once (in Check) and delete the duplicated bullets in Quick Reference — this alone would tighten the body noticeably.

Replace the generic "Explain" section with a one-line pointer to the Why It Matters section of references/rule.md, since the explanation of how screen readers work is knowledge Claude already has.

Add a short before/after violation example (e.g., an icon rendered as <img src="icon.png"> missing alt='' vs. the corrected form) to lift actionability from 4 to 5.

DimensionReasoningScore

Conciseness

Mostly efficient — short sections, one useful safe-pattern snippet — but the "default to no finding" guidance is repeated three times ("Do not automatically raise performance findings on decorative micro-assets", "Do not report decorative images as accessibility or performance failures", and the safe-pattern bullet), and the intro sentence plus the generic "Explain" section restate things Claude already knows. Not 4 because the duplication and generic explanation go beyond minor trimming; not 2 because the body is short and largely earns its tokens.

3 / 5

Actionability

Concrete, executable guidance for an instruction-only skill: exact attribute values ("alt='' (empty)", "aria-hidden='true'", "Role='presentation'"), a specific safe pattern (`<img src="/divider.svg" alt="" aria-hidden="true">`), and direct fix instructions ("Add alt='' to decorative img elements... Use CSS background-image for purely decorative visuals"). Not 5 because there is no before/after example of an actual violation, which the common cases would benefit from.

4 / 5

Workflow Clarity

The single-purpose review flow is legible: Quick Reference → Check → Fix → Explain → Code Review, with Check stating exactly what to verify ("Verify decorative images have empty alt attributes (alt=''), decorative icons use aria-hidden='true'"). Not 5 because the body omits any verification step (how to confirm the fix with browser accessibility tooling is mentioned only in passing, and the actual Verification section lives in the reference without being signposted); no destructive/batch operations, so no cap applies.

4 / 5

Progressive Disclosure

This is a simple skill under 50 lines with well-organized sections and a clearly signaled one-level-deep reference: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — the file exists and its headers (Code Example, Decorative SVGs and Icons, Verification, etc.) match the promised content. Content split is appropriate and navigation is easy.

5 / 5

Total

16

/

20

Passed

Description

67%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 "Use when" clause, third-person imperative voice, and several concrete review actions. Its main weaknesses are trigger-term coverage (missing the natural synonyms users most often say for this topic, like "alt text" and "accessibility") and a "when" clause anchored to the rule name rather than user-observable phrases.

Suggestions

Add natural trigger synonyms to the description, e.g., "Use when the user mentions alt text, decorative images or icons, aria-hidden, or screen-reader clutter" — these are the phrases users would actually type.

Rewrite the 'when' clause around user-observable triggers instead of the rule title: "Use when reviewing markup containing decorative images, icon fonts, or SVGs" rather than 'patterns related to Hide decorative elements from assistive technology'.

Include the concrete attribute-level checks (alt='', aria-hidden='true', role='presentation') in the description to sharpen the 'what' and improve specificity from 4 toward 5.

DimensionReasoningScore

Specificity

The description lists several concrete review actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" and "default to no finding unless the snippet shows an actual issue" — with only minor coverage gaps (e.g., no mention of alt-attribute or ARIA-specific checks). Not 5 because it stops short of a comprehensive action list; not 3 because it clearly exceeds 1-2 concrete actions.

4 / 5

Completeness

Both are present: the "what" is the concrete review process ("Check native semantics first, then inspect keyboard behavior...") and the "when" is explicit ("Use when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements"). Not 5 because the "when" clause is scoped to the rule name rather than concrete user-observable trigger phrases (e.g., "when the user mentions alt text, decorative images, or screen-reader noise").

4 / 5

Trigger Term Quality

Relevant keywords are present ("rendered HTML", "interactive components", "design-system patterns", "assistive technology", "screen-reader output", "focus") but common natural variations are missing: users would likely say "alt text", "accessibility", "a11y", "screen reader", "SVG icons", or "icon fonts". Not 4 because the missing synonyms are among the most likely user phrasings for this topic; not 2 since more than a couple of relevant terms are present.

3 / 5

Distinctiveness Conflict Risk

The decorative-elements/assistive-technology niche is fairly distinct, and the guidance about defaulting to no finding differentiates it from general linting skills. Not 5 because the broad opener "reviewing rendered HTML, interactive components, or design-system patterns" overlaps with other accessibility-review skills before the rule-specific qualifier narrows it.

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.