CtrlK
BlogDocsLog inGet started
Tessl Logo

semantic-lists

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic list elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

58

Quality

67%

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/semantic-lists/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 skill body for a simple rule: it states the problem, gives element-selection guidance, orders the workflow logically, and correctly pushes code examples to a single real reference file. The main drag is repetition — the same screen-reader announcement fact appears three times, and the Explain/Code Review sections could be merged.

Suggestions

State the "list with X items" screen-reader announcement once (e.g. in the intro) and remove the duplicate mentions in Quick Reference and Explain.

Merge or clearly differentiate the overlapping Check and Code Review sections — one for detection, one for verification — to remove the redundancy and sharpen the workflow.

DimensionReasoningScore

Conciseness

The body is short and free of concept over-explanation, but the fact "Screen readers announce 'list with X items'" is repeated three times (intro, Quick Reference bullet, Explain), and the Explain and Code Review sections partially restate each other. This fits 'Mostly efficient but includes some unnecessary explanation or could be tightened' — not level 4, which requires only minor trimming.

3 / 5

Actionability

The Fix section gives specific, executable guidance — "Wrap related items in appropriate list elements: ul for unordered lists, ol for numbered sequences, dl for definition pairs. Use li for list items and proper dt/dd" — and Quick Reference maps each element to its use case. Per the rubric's instruction-skill note, the absence of inline code is not penalized since the guidance is actionable; it stays at 4 rather than 5 because the concrete before/after markup examples live only in the referenced file.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is clearly ordered and unambiguous for a simple single-purpose skill, and the Code Review section supplies a verification hint ("note how to verify the fix with browser accessibility tooling"). It falls just short of 5 because the Check and Code Review sections overlap in purpose without an explicit distinction, leaving a minor clarity gap.

4 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview and defers implementation details, code examples, and framework guidance to a single one-level-deep reference, clearly signaled at the end: "see `references/rule.md`" — the file exists in the bundle. This matches the anchor 'Clear overview with well-signaled one-level-deep references; content appropriately split'.

5 / 5

Total

16

/

20

Passed

Description

63%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 a solid explicit trigger clause and several concrete actions, but it is clearly auto-generated from a shared template: the action list is identical across sibling accessibility rules, and the trigger phrase "related to Use semantic list elements" is ungrammatical stitching that hurts both naturalness and distinctiveness. A light rewrite to name list-specific checks (ul/ol/dl markup, li vs styled divs) would move it to the top anchors.

Suggestions

Rewrite the broken trigger phrase to natural language, e.g. "Use when reviewing rendered HTML or design-system markup that renders groups of related items (navigation menus, feature lists, step sequences) and the markup may be styled divs instead of ul/ol/dl lists."

Replace the generic boilerplate action list with list-specific checks so it cannot collide with sibling accessibility skills: "Check whether item groups use ul, ol, or dl with li/dt/dd children instead of divs or spans styled as lists; verify screen readers announce 'list with X items'."

Add the natural trigger terms users would actually say — "ul", "ol", "dl", "list markup", "semantic HTML" — to the description's trigger clause.

DimensionReasoningScore

Specificity

The description lists several concrete inspection actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — which matches the anchor for several specific actions with minor gaps. It falls short of 5 because coverage is inspection-only (no fix/implementation actions) and the action list is generic accessibility boilerplate rather than comprehensive for the list-semantics niche.

4 / 5

Completeness

Both parts are present: an explicit "Use when reviewing rendered HTML, interactive components, or design-system patterns" trigger clause and a 'what' via the concrete inspection actions. It sits at the level-4 anchor because the 'when' could be more precise — the differentiating phrase "related to Use semantic list elements" is grammatically broken, weakening what would otherwise be a level-5 explicit trigger.

4 / 5

Trigger Term Quality

Relevant keywords are present ("rendered HTML", "interactive components", "design-system patterns", "semantic list elements", "screen-reader") but the phrase "related to Use semantic list elements" is awkward template stitching, and natural variations users would say — "ul", "ol", "dl", "list markup", "accessibility audit" — are missing. This fits the anchor 'Some relevant keywords but missing common variations or synonyms' better than the level-4 anchor, where a user would find most natural trigger terms present.

3 / 5

Distinctiveness Conflict Risk

The only differentiator from sibling accessibility skills is the phrase "Use semantic list elements"; the entire action list ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") is generic template text that would equally trigger semantic-tables, landmarks, or heading-structure skills. This matches 'Somewhat specific but could still overlap with similar skills' rather than level 4, which requires only minor overlap risk.

3 / 5

Total

14

/

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.