has-selector

Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence — :has() may replace the JavaScript entirely.

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/has-selector/SKILL.md

Quality

Content

71%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 well-structured as an overview with clean progressive disclosure to a single reference file, and the review workflow is clearly sequenced. Its main weakness is actionability: the body lacks concrete :has() selector examples to make the guidance immediately executable.

Suggestions

Add one or two concrete :has() selector examples in the body (e.g., `form:has(input:checked)` or `div:has(> img)`) to make the Fix guidance copy-paste ready.

Trim the opening motivational paragraph to a single sentence so the file leads with actionable content.

Disambiguate the overlap between the Check and Code Review sections, or merge them, so the review sequence reads as one clear flow.

Dimension	Reasoning	Score
Conciseness	Mostly lean with directive Check/Fix/Explain/Code Review sections, but the opening paragraph re-explains motivation ("Before :has(), styling a parent based on its children required JavaScript...") that Claude could infer — a minor instance of over-explanation that could be trimmed.	4 / 5
Actionability	The sections give directional guidance ("Replace the JavaScript class-toggling logic with a CSS :has() selector. Show the selector...") but the body includes no concrete :has() selector examples, leaving the common cases without copy-paste-ready reference.	3 / 5
Workflow Clarity	A clear sequenced review flow (Check → Fix → Explain → Code Review) with unambiguous directives, though the Check and Code Review sections overlap and no validation checkpoint is present.	4 / 5
Progressive Disclosure	The body is a concise overview that delegates full details to a single, clearly signaled one-level-deep reference ("see `references/rule.md`"), matching the anchor for well-structured easy navigation.	5 / 5
	Total	16 / 20 Passed

Description

87%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 is strong: it pairs an explicit "Use when..." trigger clause with a concrete statement of what the skill does, and occupies a distinct niche. Minor gaps in action breadth and synonym coverage keep specificity and trigger-term quality just below full marks.

Dimension	Reasoning	Score
Specificity	Names a concrete domain (JS class-toggling on parents driven by child state, form input values, content presence) and a concrete action (":has() may replace the JavaScript entirely"), but covers essentially one action rather than a comprehensive set.	4 / 5
Completeness	Explicitly answers both: the "Use when..." clause gives concrete triggers, and ":has() may replace the JavaScript entirely" states what it does — matching the anchor for a clear what+when with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural frontend phrasing ("reviewing stylesheets", "toggle classes on parent elements", "child state", "form input values", ":has()"), but omits common synonyms and lacks file extensions or broader variants.	4 / 5
Distinctiveness Conflict Risk	Targets a narrow, well-defined niche (:has() replacing JS parent-class toggling) with distinct triggers, posing minimal conflict risk with other skills.	5 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/has-selector/SKILL.md
Commit: 30756a7

Reviewed: 20 days ago

Table of Contents

Discovery Implementation Validation

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.