CtrlK
BlogDocsLog inGet started
Tessl Logo

focus-management

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

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

Quality

Content

65%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, lean overview with excellent progressive disclosure — implementation detail is correctly split into a real, clearly signaled reference file. Its weaknesses are inside the overview itself: the Check/Fix sections stay at the level of general directives with named techniques but no executable examples or verification steps, and the Check and Code Review sections partially duplicate each other.

Suggestions

Add one small executable snippet to the body (e.g., a minimal focus-trap/restore pattern or a keyboard Tab-walkthrough verification step) so the overview gives copy-paste-ready guidance instead of only naming tabindex, focus(), and focus trapping.

Name specific verification tooling and checkpoints in the Check section (e.g., 'Tab through the modal, confirm focus returns to the trigger, verify with an accessibility inspector or screen reader') so the review workflow has explicit validation steps rather than implicit ones.

Merge or differentiate the overlapping Check and Code Review sections — they currently restate the same 'verify focus is properly managed' directive — and fold the freed tokens into concrete checks.

DimensionReasoningScore

Conciseness

The body is short and largely efficient — the Quick Reference bullets and one-sentence sections earn their tokens with no explanation of concepts Claude already knows. Minor trimming is possible: the "Check" and "Code Review" sections restate each other ("Verify that focus is properly managed..." vs "Review the rendered markup and interactive states..."), which fits anchor 4 rather than the fully lean 5.

4 / 5

Actionability

Concrete technique names are present ("Use tabindex='-1' to make non-interactive elements focusable", "using tabindex, focus(), and focus trapping"), but the body contains no executable code, no specific commands, and no named accessibility tooling — the specifics are entirely deferred to the reference file. This matches anchor 3: 'some concrete guidance but incomplete; missing key details'.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections imply a rough review-then-fix sequence, matching anchor 3 ('steps listed but validation gaps; checkpoints missing or implicit'). There is no explicit step ordering, no named verification commands, and no guidance on re-checking after a fix — e.g., how to confirm focus return with a keyboard walkthrough or accessibility tooling.

3 / 5

Progressive Disclosure

The body is a clear overview: short well-organized sections, plus a single well-signaled, one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — and the referenced file exists with that exact content. This matches anchor 5: clear overview, appropriately split content, easy navigation.

5 / 5

Total

15

/

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 solidly good description: it explicitly states both capability and trigger in third person with several concrete inspection actions and natural keywords. Its main weaknesses are the awkwardly embedded rule title in the when-clause, a review-heavy action list that omits fix/verify actions, and a broad 'design-system patterns' trigger that slightly blurs distinctiveness.

DimensionReasoningScore

Specificity

The description lists several concrete inspection actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — which matches the 'several specific actions; minor gaps' anchor. It falls short of 5 because coverage is review-only: no fix or verification actions are stated, and the phrase "related to Manage focus during dynamic interactions" is a templated rule title rather than a concrete capability.

4 / 5

Completeness

Both 'what' ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") and 'when' ("Use when reviewing rendered HTML, interactive components, or design-system patterns...") are explicitly present. The when-clause is explicit but awkward and broad — the rule title is embedded verbatim and 'design-system patterns' is a vague trigger surface — so it matches 'when could be more explicit or specific' (4) rather than the fully concrete 5 anchor.

4 / 5

Trigger Term Quality

Natural terms like "rendered HTML", "interactive components", "keyboard behavior", "focus flow", and "screen-reader" give good keyword coverage matching the 'a few natural terms missing' anchor. Missing common variations such as "accessibility", "a11y", "modal", "dialog", and "tab order" keep it below 5.

4 / 5

Distinctiveness Conflict Risk

The focus-management niche (focus flow, focus management during dynamic interactions) is mostly distinct with clear triggers, matching anchor 4. It carries minor overlap risk with sibling accessibility rules (keyboard access, ARIA/semantics checks) whose descriptions share the same 'reviewing rendered HTML... check native semantics' framing.

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.