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.

58

Quality

67%

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

57%

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

The body is well-structured with a clean Quick Reference and a properly signaled one-level reference, but it carries some explanatory padding Claude doesn't need and keeps its executable code and verification steps in the reference rather than inline.

Suggestions

Trim or remove the opening paragraph explaining keyboard users and WCAG rationale; Claude already knows this, and it duplicates rule.md's "Why It Matters".

Add a minimal inline CSS snippet (a before/after outline:none → :focus-visible pair) so the body is self-sufficient for the common case without requiring a file hop.

Add an explicit verify step to the Check or Code Review section (e.g. confirm the computed :focus-visible style is visible in DevTools) so the workflow has a validation checkpoint in the body itself.

DimensionReasoningScore

Conciseness

The body is mostly efficient (tight Quick Reference bullets), but the opening paragraph explains who keyboard users are and why focus matters — concepts Claude already knows — and largely duplicates rule.md's "Why It Matters" section.

2 / 3

Actionability

The Quick Reference gives concrete, specific guidance (3:1 contrast, 2px outline, prefer :focus-visible), but no executable CSS code block lives in the body — copy-paste examples are delegated to references/rule.md.

2 / 3

Workflow Clarity

Check, Fix, and Code Review sections imply a loose find-then-flag sequence, but there is no explicit validation/verification checkpoint in the body; the verification steps live only in the reference file.

2 / 3

Progressive Disclosure

The body is a well-organized overview that clearly signals a single one-level-deep reference ("see `references/rule.md`"), which exists as a real file, splitting detail appropriately.

3 / 3

Total

9

/

12

Passed

Description

77%

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 an explicit Use-when trigger and lists concrete review actions, but its trigger terms are generic CSS-review language rather than the focus-specific keywords users would naturally say, raising overlap risk.

Suggestions

Add focus-specific natural trigger terms (e.g. "focus styles", "focus indicator", "outline:none", "keyboard navigation", "accessibility") so users searching for those phrases land on this skill.

Tighten "reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators" into a cleaner third-person action clause so the skill's purpose reads as a capability rather than a review of a titled rule.

DimensionReasoningScore

Specificity

Names multiple concrete actions — "reviewing stylesheets, component styles, and responsive behavior" and "Check the rendered layout across breakpoints and interaction states before proposing a fix" — matching the multi-action anchor.

3 / 3

Completeness

An explicit "Use when reviewing..." clause supplies the trigger, and the reviewing/checking actions state what the skill does, answering both what and when.

3 / 3

Trigger Term Quality

Relevant CSS-review terms appear (stylesheets, breakpoints, interaction states) but the focus-specific natural triggers users would say (focus styles, outline, keyboard navigation, accessibility, :focus-visible) are largely absent.

2 / 3

Distinctiveness Conflict Risk

The focus-indicator niche is distinct, but the generic trigger phrasing (stylesheets, component styles, responsive behavior) could overlap with other CSS review skills.

2 / 3

Total

10

/

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.