CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

63

Quality

75%

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

Quality

Content

77%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 lean, well-structured review skill that defers detail appropriately to a real one-level-deep reference file. The main weaknesses are a background-heavy intro paragraph that restates what Claude already knows and a Code Review section that nearly duplicates the Check section.

Suggestions

Trim the opening paragraph to one sentence — the motivation ('Before :has()... required JavaScript... coupling between styling and application logic') is background Claude already knows; keep only the pattern-to-look-for.

Remove or merge the Code Review section with Check, since 'Flag any locations where a parent element's style is controlled by toggling a class from JavaScript' duplicates 'Look for patterns in this code where JavaScript toggles a class on a parent element'.

Add one inline example selector (e.g. `.form-group:has(input:invalid) { --border-color: var(--color-error); }`) in the Fix section so the expected replacement shape is concrete without opening the reference.

DimensionReasoningScore

Conciseness

The body is short overall, but the opening paragraph ("Before :has(), styling a parent based on its children required JavaScript: detecting state, toggling classes... :has() moves that relationship back into CSS where it belongs") and the flavor line "It is the parent selector CSS has needed for decades" re-explain background Claude already knows, and the Code Review section near-duplicates the Check section's instruction. Anchor 3 (mostly efficient with some unnecessary explanation) fits; it is not anchor 4 because the conceptual intro and duplicated instruction are noticeable rather than minor trims, and not anchor 2 because the Quick Reference and section instructions are tight and purposeful.

3 / 5

Actionability

Instructions are concrete and executable for an instruction-only review skill: "Look for patterns in this code where JavaScript toggles a class on a parent element based on the state or content of a child element" and "show the equivalent :has() rule", with a clearly signaled reference holding full code examples. It is not anchor 5 because no example selector appears inline (e.g. `.form-group:has(input:invalid)`) and "the relevant child condition" is left abstract; it is above anchor 3 because the guidance is specific enough to execute directly rather than pseudocode or high-level hints.

4 / 5

Workflow Clarity

This is a simple, single-purpose skill under 50 lines with a coherent Check → Fix → Explain → Code Review sequence and an unambiguous single action (identify JS class-toggling on parents, show the :has() replacement), so the simple-skill exception applies. No validation steps are required since the task is a non-destructive review; it is not anchor 4 because nothing in the sequence is missing or merely implied.

5 / 5

Progressive Disclosure

The body is a lean overview and defers implementation details via a clearly signaled, one-level-deep pointer: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — a real file (181 lines) with no further nested references. Content is appropriately split between overview and reference; it is not anchor 4 because there are no organization gaps — the single reference is well placed and easy to navigate.

5 / 5

Total

17

/

20

Passed

Description

73%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 highly specific, well-targeted trigger description with excellent 'when' guidance and low conflict risk. Its main weakness is the 'what': the capability is only implied via the hedged ':has() may replace the JavaScript entirely' rather than stated as concrete actions.

Suggestions

State the 'what' directly instead of hedged: e.g. 'Identifies JavaScript class-toggling on parent elements and shows the equivalent CSS :has() rule. Use when...'

Add the natural synonym 'parent selector' (the phrase users most commonly say when they want this) to the trigger terms.

Consider naming the concrete sub-cases users describe — form validation styling, checkbox-driven sections, empty-state styling — to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

The description names the domain precisely ("stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence") but the only actions offered are "reviewing" and a hedged ":has() may replace the JavaScript entirely" — roughly 1-2 concrete actions, matching anchor 3. It is not anchor 4 because it does not list several specific actions (e.g. flag, rewrite, or show equivalent selectors), and not anchor 2 because the language is highly concrete about the target pattern rather than generic.

3 / 5

Completeness

The 'when' is explicit and detailed ("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"), and a 'what' is present but hedged — ":has() may replace the JavaScript entirely" hints at the capability without stating what the skill does (identify the patterns, show equivalent :has() rules). This fits anchor 4 (both present, one could be more explicit). It is not anchor 5 because the 'what' is implied and tentative rather than clearly stated, and not anchor 3 because the 'when' clause is fully explicit with concrete triggers.

4 / 5

Trigger Term Quality

Good natural keyword coverage: "stylesheets", "components", "JavaScript", "toggle classes", "parent elements", "child state", "form input values", and the key term ":has()". It is not anchor 5 because common synonyms are missing — notably "parent selector", the phrase users most often say when asking for this, plus terms like "style a parent based on its child". It is above anchor 3 because several natural trigger phrases a user would actually say are present.

4 / 5

Distinctiveness Conflict Risk

Clear niche with a distinct trigger: JavaScript class-toggling on parents driven by child state is a precise, recognizable pattern, and the ":has()" term anchors it to exactly one capability. It would not plausibly fire for other CSS or JavaScript skills; minor overlap with generic 'CSS review' skills is excluded by the long, specific qualifier, so anchor 5 fits better than anchor 4.

5 / 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.