CtrlK
BlogDocsLog inGet started
Tessl Logo

landmark-regions

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

53

Quality

60%

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/landmark-regions/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 compact, well-structured overview that uses progressive disclosure correctly — a real, one-level-deep reference file carries the code example and verification steps. Its weaknesses are in the in-body guidance itself: the Check step is circular, the opening paragraph explains a concept Claude already knows, and the Check/Fix/Explain/Code Review scaffold is template-generic rather than landmark-specific, leaving actionability and workflow clarity at mid-scale.

Suggestions

Make the 'Check' section concrete: list what to actually verify (one <main> per page, landmarks not duplicated unlabeled, no role='banner'/complementary redundancy, visible labels via aria-label on repeated <nav> elements) instead of the circular 'verify that they are correctly structured'.

Drop the concept-explaining intro paragraph and the meta 'Explain' section; both restate knowledge Claude already has and duplicate the Quick Reference.

Pull the verification checkpoints from references/rule.md (accessibility tree inspection, axe/Lighthouse, keyboard re-test) into the body's Check→Fix flow so the review workflow has explicit validation steps.

DimensionReasoningScore

Conciseness

The body is short and mostly tight, but it opens with a concept explanation Claude already knows ('Landmark regions allow screen reader users to quickly identify and jump to major sections of a page, significantly improving navigation efficiency') and the 'Check' and 'Explain' sections restate the rule circularly ('Verify that the page uses appropriate HTML5 landmark elements and that they are correctly structured'; 'Explain how landmark regions assist assistive technology users'). This matches the 3 anchor ('mostly efficient but includes some unnecessary explanation or could be tightened') rather than 4, whose over-explanation is only minor.

3 / 5

Actionability

The Quick Reference and Fix sections give some concrete guidance ('Use HTML5 landmark elements like <header>, <nav>, <main>, and <footer>'; 'Provide labels for multiple landmarks of the same type using aria-label'; 'Replace generic <div> containers with semantic landmark elements'), but the 'Check' section is circular — 'Verify that the page uses appropriate HTML5 landmark elements and that they are correctly structured' restates the rule rather than telling Claude what to look for — and the 'Code Review' section is generic template text. This fits the 3 anchor ('some concrete guidance but incomplete') rather than 4's 'concrete code or commands with minor gaps'; the executable example lives only in references/rule.md, which is acceptable for an instruction-only skill but the in-body guidance itself has real gaps.

3 / 5

Workflow Clarity

A rough review sequence is present (Check → Fix → Explain → Code Review), but the body's 'Check' step gives no concrete checkpoints and verification steps (accessibility-tree inspection, axe/Lighthouse, keyboard re-test) exist only in the referenced references/rule.md, not in the body's flow. This matches the 3 anchor ('steps listed but validation gaps; checkpoints missing or implicit') rather than 4, which requires most checkpoints present in the sequence itself.

3 / 5

Progressive Disclosure

The body is a short, well-sectioned overview that explicitly and cleanly defers detail one level deep — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md exists and delivers exactly what is promised (code example, why-it-matters, exceptions, verification). This matches the 5 anchor ('clear overview with well-signaled one-level-deep references; content appropriately split; easy navigation') with no nested references or buried pointers.

5 / 5

Total

14

/

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 an explicit 'Use when...' trigger and a concrete check sequence, but the actual subject — landmark regions — is only present via a grammatically broken template insertion, and the listed actions are generic accessibility-review steps rather than landmark-specific capabilities. Natural trigger vocabulary (accessibility, a11y, semantic HTML, landmarks) is missing, and the description would conflict with sibling accessibility skills built from the same template.

Suggestions

Rewrite the trigger clause into a grammatical sentence that names the capability, e.g. 'Reviews pages for correct use of HTML5 landmark regions (header, nav, main, footer) and labels duplicate landmarks with aria-label' instead of the template-stuffed 'related to Use landmark regions correctly'.

Add natural trigger terms users would actually say — 'accessibility', 'a11y', 'semantic HTML', 'landmarks', 'screen reader navigation' — to improve trigger-term coverage and distinctiveness.

Make the 'what' landmark-specific (which elements to check, single-main rule, aria-label for repeated landmarks) so the description cannot be mistaken for a generic accessibility-review skill.

DimensionReasoningScore

Specificity

The description lists several concrete actions — 'Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output' — which matches the 'several specific actions; minor gaps' anchor rather than the 3 anchor's '1-2 concrete actions'. It falls short of 5 because none of the actions are landmark-specific (no mention of header/nav/main/footer or aria-label) and the phrase 'related to Use landmark regions correctly' is a template-stuffed title, not a capability statement.

4 / 5

Completeness

Both parts are present: the 'when' is explicit ('Use when reviewing rendered HTML, interactive components, or design-system patterns') and the 'what' is a concrete check sequence. It does not reach 5 because the 'what' describes generic accessibility-review actions rather than what the skill actually does with landmark regions, and the trigger clause is diluted by the broken phrase 'related to Use landmark regions correctly'.

4 / 5

Trigger Term Quality

Relevant keywords present include 'rendered HTML', 'interactive components', 'design-system patterns', and 'screen-reader output', but common natural terms users would say are missing: 'accessibility', 'a11y', 'semantic HTML', and 'landmarks' (beyond the awkwardly embedded title). This matches the 3 anchor ('some relevant keywords but missing common variations or synonyms') and not the 4 anchor, whose example shows good coverage of the domain's natural vocabulary.

3 / 5

Distinctiveness Conflict Risk

The phrase 'related to Use landmark regions correctly' names the niche, but everything else ('rendered HTML, interactive components, or design-system patterns... keyboard behavior, focus flow, accessible names') is generic to the entire accessibility category and would equally match sibling skills on color contrast, alt text, or form labels. This fits the 3 anchor ('somewhat specific but could still overlap with similar skills') rather than 4, which requires mostly distinct triggers.

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.