CtrlK
BlogDocsLog inGet started
Tessl Logo

heading-order

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

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/heading-order/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-structured, appropriately short overview with excellent progressive disclosure to a real one-level reference, but it is padded with redundant/templated sections and its guidance stays high-level: no executable checks or named verification tooling appear in SKILL.md itself. Tightening the duplication and making the verify step concrete would lift the weaker dimensions.

Suggestions

Merge 'Quick Reference' into 'Check' and delete the intro sentence explaining why heading order matters, since Claude already knows this.

Add a concrete verification step with named tooling (e.g., 'Verify: run axe or Lighthouse, or inspect the accessibility tree, and confirm no level skips remain') instead of the vague 'browser accessibility tooling or assistive tech'.

Rewrite the templated 'Code Review' section in natural prose so the rule name is not awkwardly embedded ('...that affect Maintain logical heading order').

DimensionReasoningScore

Conciseness

The body is short but includes unnecessary material: an intro sentence explaining why heading order matters (a concept Claude already knows), a 'Quick Reference' section that largely duplicates 'Check', and templated filler such as 'Review the rendered markup and interactive states that affect Maintain logical heading order.'

3 / 5

Actionability

There are concrete micro-examples ('check that an <h2> follows an <h1>', 'change an <h3> to an <h2> if it follows an <h1>') but no executable commands or specific tooling in the body — verification is deferred vaguely to 'browser accessibility tooling or assistive tech' without naming any tool.

3 / 5

Workflow Clarity

The Check -> Fix -> Explain -> Code Review sequence is a coherent order for a simple single-purpose skill, but validation checkpoints are only implicit ('note how to verify the fix with browser accessibility tooling') with no explicit verify step or feedback loop in the body.

3 / 5

Progressive Disclosure

The body is a concise overview with a single clearly signaled one-level-deep pointer ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'); the reference file exists, contains the detailed material (code examples, best practices, verification), and nests no further.

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...' clause and an explicit action list, but the action list is templated accessibility boilerplate that does not describe what this skill actually does for heading order, and natural trigger variations (heading hierarchy, heading levels, skipped headings) are missing. It is serviceable but clearly below the strong examples.

Suggestions

Rewrite the action list to describe heading-order-specific capabilities, e.g., 'Verify heading levels (<h1>-<h6>) appear in sequential order and flag skipped levels, then recommend level adjustments to restore the hierarchy.'

Add natural trigger variations to the 'Use when' clause: 'when the user mentions heading hierarchy, heading levels, skipped headings, or h1/h2 structure'.

Remove the mismatched boilerplate actions (keyboard behavior, focus flow) that belong to interactive-component rules, not heading structure, to reduce conflict risk with sibling accessibility skills.

DimensionReasoningScore

Specificity

The description lists several explicit actions ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") but these are generic accessibility-review boilerplate that never describes the skill's heading-order capability (e.g., verifying or fixing sequential heading levels), so coverage is a major gap rather than a minor one.

3 / 5

Completeness

Both what and when are explicitly present ("Use when reviewing rendered HTML, interactive components, or design-system patterns related to..." plus an explicit action list), but the what is generic boilerplate rather than heading-specific and the when could name more concrete trigger phrases, keeping it below the level-5 anchor.

4 / 5

Trigger Term Quality

It includes some relevant natural keywords ("heading order", "rendered HTML", "screen-reader") but misses common variations users would say, such as "heading hierarchy", "heading levels", "skipped headings", or "h1/h2".

3 / 5

Distinctiveness Conflict Risk

The rule-name phrase "related to Maintain logical heading order" gives a specific anchor, but the templated keyboard/focus/screen-reader language overlaps heavily with sibling accessibility-rule skills that share the same description pattern, so it could still trigger for the wrong skill.

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.