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.

59

Quality

68%

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.

The body is a tight, actionable overview: concrete numeric rules in Quick Reference, a coherent Check/Fix/Explain/Code Review workflow, and correct delegation of code examples and verification detail to a well-signaled single reference file. Its only real weaknesses are a slightly redundant motivational intro and the absence of an explicit post-fix verification step in the body itself.

DimensionReasoningScore

Conciseness

The body is lean and well-sectioned with no padding and no explanation of basic CSS concepts; the only trimmable part is the 2-sentence intro justifying why focus indicators matter — motivation Claude already knows — a minor instance of over-explanation matching anchor 4 rather than 5.

4 / 5

Actionability

Concrete, measurable guidance throughout: 'Never use outline: none or outline: 0 without a visible :focus-visible replacement', 'at least 2px solid outline with an offset', '3:1 contrast ratio', and exact search targets ('Find all instances of outline: none, outline: 0'). Per the rubric's instruction-only note the absent code isn't penalized; only the vague 'appropriate contrast' phrasing in Fix keeps it at anchor 4 rather than 5.

4 / 5

Workflow Clarity

A clear, unambiguous Check → Fix → Explain → Code Review sequence for a simple single-purpose skill, but the post-fix verification checkpoint (confirm the replacement ring actually renders and isn't clipped) lives only in references/rule.md, not the body — a minor validation gap matching anchor 4 rather than 5. No destructive or batch operations, so no cap applies.

4 / 5

Progressive Disclosure

The ~30-line body is a clean overview with a single clearly signaled one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'); the bundle verifies this — one reference file containing the code examples and verification details, with no nested references — matching anchor 5.

5 / 5

Total

17

/

20

Passed

Description

58%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 a proper 'Use when...' trigger structure and reasonable domain keywords, but the generic review-the-stylesheets framing buries the actual niche (focus indicators/accessibility) in a capitalized rule title, weakening both what it does and how it distinguishes itself from sibling CSS skills.

Suggestions

State the core capability with action verbs and specifics, e.g. 'Audit and fix keyboard focus indicators (outline:none removals, :focus-visible replacements, 3:1 contrast, 2px rings) per WCAG 2.4.7', instead of the generic 'reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators'.

Add natural trigger terms users would actually say: 'focus ring', 'outline: none', 'keyboard navigation', 'accessibility'/'a11y' — these are absent and would raise trigger-term quality.

Lead with the focus-indicator/accessibility niche rather than shared stylesheet/breakpoint boilerplate so it doesn't collide with sibling CSS-rule skills that use the same framing.

DimensionReasoningScore

Specificity

Names the domain ('reviewing stylesheets, component styles, and responsive behavior') and 1-2 concrete actions ('Check the rendered layout across breakpoints and interaction states'), but the core capability is only implied through the embedded rule title 'related to Provide visible custom focus indicators' — no explicit fix/audit action on focus styles, so coverage is not comprehensive (anchor 3, not 4).

3 / 5

Completeness

An explicit 'Use when reviewing stylesheets...' clause answers 'when', and 'Check the rendered layout across breakpoints and interaction states before proposing a fix' covers 'what', but the what is indirect — it never plainly states what the skill does with focus indicators, so it fits anchor 4 rather than the fully explicit anchor 5.

4 / 5

Trigger Term Quality

Includes relevant keywords ('focus indicators', 'stylesheets', 'breakpoints', 'interaction states') but misses the natural phrases users actually say for this problem — 'focus ring', 'outline: none', 'keyboard navigation', 'accessibility'/'a11y', 'CSS' — matching anchor 3 (missing common variations or synonyms).

3 / 5

Distinctiveness Conflict Risk

The scaffolding ('reviewing stylesheets, component styles, and responsive behavior... breakpoints and interaction states') is generic boilerplate that would trigger for nearly any CSS-rule skill; only the embedded rule title distinguishes it from siblings, matching anchor 3 (could still overlap with similar skills) rather than anchor 4's 'minor overlap risk'.

3 / 5

Total

13

/

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.