CtrlK
BlogDocsLog inGet started
Tessl Logo

focus-styles

Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.

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

Quality

Content

78%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 well-structured, concise review skill with concrete accessibility rules, embedded verification steps, and a clean one-level reference to the detailed rule. Main gap is the absence of an explicit post-fix validation loop and the body duplicating a little rationale from the reference.

Suggestions

Add an explicit 'Verify' step after 'Fix' (e.g., re-check the rendered focus ring across breakpoints and interaction states) to close the validation loop.

Trim the WCAG rationale in the intro paragraph since it is repeated in references/rule.md, keeping only the rule statement in the body.

Consider including one minimal :focus-visible code snippet inline so the Fix step is copy-paste ready without opening the reference.

DimensionReasoningScore

Conciseness

Mostly lean with bulleted concrete rules and short sectioned guidance; the WCAG intro paragraph lightly duplicates rationale found in the reference and could be trimmed, but no severe padding.

4 / 5

Actionability

Provides concrete, actionable specifics — ':focus-visible', '3:1 contrast ratio', 'at least 2px solid outline with an offset', and selectors to find — though no copy-paste code lives in the body itself (it is in the reference).

4 / 5

Workflow Clarity

Clear Check → Fix → Explain → Code Review sequence with verification checkpoints embedded in Check ('verify the ring cannot be clipped', 'verify the visible focus ring follows the actual interactive element'); minor gaps as it lacks an explicit post-fix validation loop.

4 / 5

Progressive Disclosure

Well-organized overview sections with a clearly signaled, one-level-deep reference ('see references/rule.md'), and the referenced file exists in the bundle.

5 / 5

Total

17

/

20

Passed

Description

78%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 specific, well-triggered description that clearly scopes the skill to focus-indicator review across breakpoints and interaction states. It answers both 'what' and 'when' with concrete language and minimal conflict risk.

DimensionReasoningScore

Specificity

Names several concrete actions — 'reviewing stylesheets, component styles, and responsive behavior' and 'Check the rendered layout across breakpoints and interaction states before proposing a fix' — with only minor coverage gaps.

4 / 5

Completeness

Explicitly answers both what ('Check the rendered layout across breakpoints and interaction states before proposing a fix') and when ('Use when reviewing stylesheets, component styles, and responsive behavior'), though the 'what' is somewhat entangled with the 'when'.

4 / 5

Trigger Term Quality

Includes natural terms users would say ('stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states', 'focus indicators'); a few synonyms are missing but coverage is good.

4 / 5

Distinctiveness Conflict Risk

Targets a clear niche — visible custom focus indicators — with distinct, specific triggers that are unlikely to fire for unrelated skills.

5 / 5

Total

17

/

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.

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.