CtrlK
BlogDocsLog inGet started
Tessl Logo

autofocus-avoidance

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

61

Quality

73%

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/autofocus-avoidance/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-organized single-purpose skill with a textbook progressive-disclosure structure: short overview body plus a clearly signaled, verified one-level reference file. Its weaknesses are redundancy — the Quick Reference and Code Review sections largely restate other sections and the description — and verification guidance that stays generic.

Suggestions

Delete the 'Quick Reference' section (its bullets restate the intro and Check/Fix sections) and cut the 'Code Review' section down to the one non-duplicated sentence about verifying fixes with browser accessibility tooling.

Name the concrete verification step, e.g. 'Verify with Tab navigation from page load or a screen reader (NVDA/VoiceOver) that focus stays at the page top' instead of the generic 'browser accessibility tooling'.

Add one inline example of the check, such as the grep/search pattern for autofocus (e.g. `grep -rn 'autofocus' --include='*.html'`), so the Check section is copy-paste executable without opening the reference.

DimensionReasoningScore

Conciseness

The body is short but noticeably redundant: the 'Quick Reference' bullets restate the intro ('Autofocus disrupts screen reader users who lose page context') and the Check/Fix sections, and the 'Code Review' section largely repeats the frontmatter description ('Review the rendered markup and interactive states that affect Avoid autofocus on form fields'). This fits 'mostly efficient but includes some unnecessary explanation or could be tightened' rather than anchor 4's 'minor instances', since whole sections are duplicative; it is far from anchor 2's heavy padding.

3 / 5

Actionability

Concrete, executable instruction-only guidance: 'Search for autofocus attributes on form elements', 'Remove autofocus attributes from form elements', 'use JavaScript to set focus after user interaction rather than automatically on page load'. Per the code-vs-instruction note, absent code is not penalized since the guidance is actionable; minor gaps remain (no grep pattern, no named browser a11y tooling) keeping it below 5 but above anchor 3's 'incomplete, missing key details'.

4 / 5

Workflow Clarity

A clear implied sequence — Check (find autofocus, verify focus doesn't jump on load) → Fix (remove attribute / JS focus after interaction) → Explain → Code Review (flag elements, 'note how to verify the fix with browser accessibility tooling') — with the verification step present but generic. Not 5 because verification names no specific tool or procedure; not 3 because the sequence and its verify step are explicit rather than missing.

4 / 5

Progressive Disclosure

The body is a concise overview and cleanly delegates detail with a well-signaled, one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md exists as a real 131-line file with code examples and framework guidance. This matches the anchor for a clear overview with appropriately split content and easy navigation.

5 / 5

Total

16

/

20

Passed

Description

75%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 solid description with an explicit 'Use when' trigger and several concrete inspection actions. Its main weakness is templated phrasing: the opening clause and the title-restating 'related to Avoid autofocus on form fields' blur its distinctiveness from sibling accessibility skills and miss natural trigger variations.

Suggestions

Rewrite the trigger to name the natural phrases users would say, e.g. 'Use when a form field steals focus on page load, when reviewing autofocus attributes on inputs, or when screen-reader users report landing mid-page'.

Replace the generic 'Check native semantics first, then inspect keyboard behavior...' with autofocus-specific actions such as 'Search for autofocus attributes on form elements and flag pages with content before the form' so the what is rule-unique.

DimensionReasoningScore

Specificity

Names several concrete actions — 'Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output' — which are specific review procedures, though they are generic a11y-review actions not unique to autofocus. This fits 'lists several specific actions; minor gaps in coverage' rather than score 3 (only 1-2 actions) and falls short of 5 (no autofocus-specific actions like 'search for autofocus attributes' or 'remove the autofocus attribute').

4 / 5

Completeness

Both parts are present: an explicit 'Use when reviewing rendered HTML, interactive components, or design-system patterns related to...' trigger and a 'what' (check semantics, inspect keyboard behavior, focus flow, accessible names, screen-reader output). Not score 5 because the 'what' reads as generic inspection steps rather than concrete capability statements, and the trailing 'where relevant' hedges; not score 3 because both what and when are explicit.

4 / 5

Trigger Term Quality

Good natural keyword coverage: 'autofocus', 'form fields', 'rendered HTML', 'keyboard behavior', 'focus flow', 'screen-reader', 'accessible names'. Missing some common variations users would say ('focus on page load', 'autofocus attribute', 'login page focus') and the phrasing 'related to Avoid autofocus on form fields' awkwardly restates the title rather than adding natural terms — fits anchor 4, not 3 (keywords are more than 'some relevant') and not 5 (synonym coverage is incomplete).

4 / 5

Distinctiveness Conflict Risk

The rule-specific phrase 'Avoid autofocus on form fields' carves a clear niche, but the boilerplate opening 'Use when reviewing rendered HTML, interactive components, or design-system patterns' would identically match sibling accessibility-rule skills, creating minor overlap risk with closely related skills — anchor 4 rather than 5; clearly more distinct than anchor 3's broad 'works with document files' level.

4 / 5

Total

16

/

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.