CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

anchor-smooth-scroll

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

56

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/anchor-smooth-scroll/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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 well structured as an overview with excellent progressive disclosure to a genuine, one-level-deep reference file, and the Check workflow is specific for a simple audit skill. Its weaknesses are repetition of the vestibular rationale and Fix details, and a Fix instruction whose media-query direction is ambiguous without the reference's code. The Fix section also duplicates the Quick Reference bullets, so two of four dimensions sit at 3.

Suggestions

State the exact fix pattern inline to remove ambiguity: '@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }' — one line makes the Fix unambiguous and lifts actionability.

Deduplicate: the vestibular-disorder rationale appears in both the intro and Explain, and the Fix restates the Quick Reference bullets — consolidate to tighten conciseness.

Add the key verification detail to Check (how to emulate reduced motion, e.g., Chrome DevTools rendering tab or OS 'Reduce motion' setting) so the workflow's validation step is self-contained.

DimensionReasoningScore

Conciseness

The body is short and mostly efficient, but the vestibular-disorder rationale appears nearly verbatim in both the intro ("can trigger vertigo, nausea, and disorientation for users with vestibular disorders") and the Explain section, the Fix section restates the Quick Reference bullets, and the Code Review section is generic boilerplate ("Flag exact elements, roles, labels, focus behavior..."). This matches 'mostly efficient but includes some unnecessary explanation or could be tightened' rather than level 4, which requires only minor trimming.

3 / 5

Actionability

The Fix section names the concrete mechanism ("Use scroll-behavior: smooth only within a prefers-reduced-motion media query check", "Ensure focus moves to the anchor target") but includes no code and leaves the media-query direction ambiguous — the correct pattern is '@media (prefers-reduced-motion: no-preference)' while the body's phrasing could be read as wrapping in a 'reduce' query. This lands at 'some concrete guidance but incomplete... missing key details' rather than level 4's mostly executable guidance; the absence of code itself is acceptable for an instruction-only skill, but the ambiguity is not.

3 / 5

Workflow Clarity

For a simple single-purpose review skill the Check/Fix/Explain/Code Review structure is coherent, and the Check step is specific ("Click anchor links... and verify smooth scrolling is disabled when prefers-reduced-motion is set. Confirm anchor navigation works correctly with keyboard and screen readers"). It misses 5 because the body omits how to actually enable prefers-reduced-motion when testing (that checkpoint lives only in references/rule.md), leaving a minor validation gap characteristic of level 4.

4 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview that defers implementation detail to a real, one-level-deep, clearly signaled reference ("For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`"). The referenced file exists (verified: references/rule.md contains the CSS/JS/React examples and verification steps), the split is appropriate, and navigation is easy — matching the top anchor.

5 / 5

Total

15

/

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' clause and a concrete list of inspection actions, giving it solid completeness and specificity. However, it omits the natural trigger vocabulary of the rule itself (smooth scroll, reduced motion, scroll-behavior), which weakens both trigger matching and distinctiveness against sibling accessibility skills built from the same template.

Suggestions

Add the natural trigger terms users would say for this rule — "smooth scroll", "scroll-behavior", "prefers-reduced-motion", "reduced motion", "vestibular disorders" — to the description so it matches real user phrasing and improves trigger_term_quality.

Rewrite "related to Provide instant anchor scroll option" as a natural descriptive clause (e.g., "when reviewing anchor-link scrolling and motion-preference handling") so the description is distinguishable from sibling accessibility skills sharing the same template.

State the rule's concrete subject matter (CSS scroll-behavior and reduced-motion fallbacks) as a capability, raising specificity from 4 toward 5.

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 anchor for several specific actions with minor gaps. It falls short of 5 because the core technical subject (scroll-behavior, prefers-reduced-motion) is never named as an action, only embedded via the awkward rule title "related to Provide instant anchor scroll option".

4 / 5

Completeness

Both parts are explicit: the 'what' is "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" and the 'when' is "Use when reviewing rendered HTML, interactive components, or design-system patterns related to...". It misses 5 because the trigger clause leans on the embedded rule title rather than concrete natural trigger phrases, fitting level 4's 'when could be more explicit or specific'.

4 / 5

Trigger Term Quality

Relevant keywords are present ("rendered HTML", "interactive components", "anchor scroll", "keyboard behavior", "screen-reader output"), but the natural phrases a user would actually say for this rule — "smooth scroll", "scroll-behavior", "prefers-reduced-motion", "reduced motion" — are all missing. This matches 'some relevant keywords but missing common variations or synonyms' rather than level 4's 'good keyword coverage'.

3 / 5

Distinctiveness Conflict Risk

The generic scaffolding ("reviewing rendered HTML, interactive components, or design-system patterns... inspect keyboard behavior, focus flow, accessible names, and screen-reader output") is boilerplate that would equally describe many sibling accessibility-review skills; only the embedded rule title distinguishes it. This matches 'somewhat specific but could still overlap with similar skills' rather than level 4's 'mostly distinct'.

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

Path

skills/anchor-smooth-scroll/SKILL.md

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.