CtrlK
BlogDocsLog inGet started
Tessl Logo

focus-not-obscured

Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.

65

Quality

78%

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/focus-not-obscured/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, appropriately split skill body that delegates detail to a real one-level-deep reference and provides specific audit/fix targets. It is held back by mild conceptual redundancy across the Check/Fix/Explain/Code Review modes and the absence of any executable code or explicit numbered validation workflow in the body itself.

Suggestions

Move executable examples (e.g. a minimal `scroll-padding` snippet) inline or ensure the body explicitly points to the code section of references/rule.md so the Fix step is copy-paste ready.

Consolidate the overlapping Check/Fix/Explain/Code Review sections to remove the conceptual restatement and tighten the intro rationale.

Express the audit workflow as a numbered sequence with an explicit validation checkpoint (check → apply fix → re-test at zoom/mobile → confirm focus visible) to make the feedback loop explicit.

DimensionReasoningScore

Conciseness

The body is mostly lean, but the opening rationale ('A visible focus ring is not enough...') and the overlapping Explain/Code Review modes restate the Check/Fix content; it is not level 3 because some conceptual explanation and redundancy could be tightened, and not level 1 because it avoids explaining basic concepts Claude already knows.

2 / 3

Actionability

It names concrete fixes ('scroll-padding', reduce overlay height) and specific UI to audit, but the body contains no executable code — examples are deferred to references/rule.md; it is not level 3 because guidance describes rather than providing copy-paste-ready instructions, and not level 1 because the named selectors and fixes are specific rather than vague.

2 / 3

Workflow Clarity

A check → fix → re-test flow is discernible (the Quick Reference includes 'Re-test at zoomed and mobile layouts'), but the body is organized by mode (Check/Fix/Explain/Code Review) rather than a numbered sequence with explicit validation checkpoints; it is not level 3 because checkpoints are implicit rather than an explicit validate→fix→retry loop, and not level 1 because the audit and remediation steps are present.

2 / 3

Progressive Disclosure

A concise overview points to a well-signaled one-level-deep reference ('see references/rule.md' for full implementation details, code examples, and framework-specific guidance), and that file exists; it is not level 2 because the split is clean and clearly navigated rather than inline-bloated or poorly signaled.

3 / 3

Total

9

/

12

Passed

Description

100%

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 strong, concise description that uses third-person/imperative voice, names concrete validation actions, includes natural trigger terms, and explicitly answers both what it does and when to use it. It is distinctive within the accessibility domain and free of fluff.

DimensionReasoningScore

Specificity

Lists concrete actions and targets — 'Validate the actual tab order and viewport behavior at realistic zoom levels' plus named UI elements (sticky navigation, consent banners, chat widgets, skip links) — matching the 'lists multiple specific concrete actions' anchor; it is not level 2 because it goes beyond naming a domain to enumerating specific validation actions.

3 / 3

Completeness

Explicit 'Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI' answers when, and 'Validate the actual tab order and viewport behavior at realistic zoom levels' answers what; it is not level 2 because the 'Use when' trigger is explicit rather than implied.

3 / 3

Trigger Term Quality

Natural terms an accessibility reviewer would actually say are well covered ('sticky navigation', 'consent banners', 'chat widgets', 'skip links', 'tab order', 'viewport behavior', 'zoom levels'); it is not level 2 because it includes common variations rather than just a single keyword.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear accessibility niche (WCAG focus-not-obscured) with distinctive fixed-position-UI triggers unlikely to match unrelated skills; it is not level 2 because the triggers are specific enough to avoid overlap with general accessibility skills.

3 / 3

Total

12

/

12

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.

Validation15 / 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.