CtrlK
BlogDocsLog inGet started
Tessl Logo

breadcrumb-navigation

Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. 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/breadcrumb-navigation/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 with concrete attribute-level criteria and a clean single-reference progressive-disclosure design. The main weaknesses are triple restatement of the same requirements across Quick Reference/Check/Fix and a missing inline verification pointer in the review workflow. Note also that the referenced rule.md contains broken code blocks (missing component function signatures, an empty 'Usage' block) that undermine the skill's promised 'code examples'.

Suggestions

Collapse the Quick Reference/Check/Fix duplication into one statement of the required markup pattern, keeping the body at a single source of truth for the criteria.

Add a verification step to the Code Review workflow that points to the checklist in references/rule.md (e.g. 'Confirm findings against the rendered DOM using the Verification checklist in references/rule.md').

Fix the code examples in references/rule.md — the React/Next.js snippets are missing their component function declarations and the 'Usage' section is an empty code block — since the body promises complete, framework-specific code examples there.

DimensionReasoningScore

Conciseness

The body is short but noticeably redundant: the same requirements (nav + aria-label, ordered list, aria-current='page') are restated three times across 'Quick Reference' ('Use nav element with aria-label'), 'Check' ('Verify breadcrumbs use nav element with aria-label, ordered list markup, and aria-current'), and 'Fix' ('Implement breadcrumbs using semantic nav, ol/li structure, and proper ARIA attributes including aria-current'). The opening motivation sentence ('Proper breadcrumb markup helps screen reader users understand site hierarchy...') is also explanation Claude does not need. It is not a 2 because nothing explains basic concepts and the body stays lean overall.

3 / 5

Actionability

The 'Quick Reference' gives concrete, executable attribute-level instructions ('Use nav element with aria-label=Breadcrumb', 'Use ordered list (ol) for semantic structure', 'Mark current page with aria-current=page'), and the 'Code Review' section directs concrete output ('Flag exact elements, attributes, and routes where the rendered HTML violates the rule'). It is not a 5 because no valid/invalid markup example appears inline and 'Keep any structured data aligned with the visible breadcrumb trail' lacks the specifics (order, labels, when to omit) needed to act without opening the reference.

4 / 5

Workflow Clarity

For a simple single-purpose review skill, the Check → Fix → Explain → Code Review structure is unambiguous and the review targets are named ('Review templates, server-rendered HTML, and shared components that output markup'). It is not a 5 because the body contains no verification checkpoint for confirming findings against the final rendered DOM (that checklist lives only in references/rule.md and is not pointed to from the review steps).

4 / 5

Progressive Disclosure

The body is a concise overview with well-organized sections and a single, clearly signaled, one-level-deep pointer: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md exists in the bundle and is the only bundled reference file. This matches the anchor 'Clear overview with well-signaled one-level-deep references; content appropriately split'.

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 solidly written description with an explicit 'Use when' trigger clause, a concrete validation action, and third-person phrasing. Its main weaknesses are limited action coverage in the 'what' and missing natural synonyms (breadcrumbs, accessibility, ARIA, structured data) in the trigger terms.

Suggestions

Enumerate the concrete actions the skill performs, e.g. 'Reviews rendered breadcrumb markup, flags missing aria-label/aria-current violations, and provides corrected nav/ol markup' to raise specificity and completeness.

Add natural trigger synonyms such as 'breadcrumbs', 'accessibility', 'ARIA', or 'structured data (JSON-LD)' so the description matches more of the phrases users actually say.

DimensionReasoningScore

Specificity

The description names its domain ('Implement accessible breadcrumb navigation', 'rendered HTML') and one concrete action — 'Validate the final browser-facing markup, not just the source framework abstraction' — but stops there. It does not enumerate the other activities the skill performs (check, fix, explain, flag violations), so it matches 'names domain and 1-2 concrete actions' rather than 'several specific actions'.

3 / 5

Completeness

Both parts are explicit: the 'when' is 'Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation' and the 'what' is 'Validate the final browser-facing markup, not just the source framework abstraction'. It falls short of the 5 anchor because the 'what' is a single validation action and does not concretely enumerate the review behaviors (check/fix/flag routes) the skill actually performs.

4 / 5

Trigger Term Quality

'templates, rendered HTML, or shared components' and 'breadcrumb navigation' are natural phrases a user would say when requesting this review, giving good keyword coverage. It is not a 5 because common synonyms and related terms users would plausibly say — 'breadcrumbs', 'accessibility', 'ARIA', 'structured data', 'JSON-LD' — are absent.

4 / 5

Distinctiveness Conflict Risk

The breadcrumb-navigation niche with distinct triggers (templates, rendered HTML, shared components) makes it largely distinguishable, as the good-example descriptions are. It is not a 5 because 'reviewing templates, rendered HTML, or shared components' would also plausibly fire for sibling HTML/accessibility review rules in the same family, creating minor overlap risk.

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.