CtrlK
BlogDocsLog inGet started
Tessl Logo

event-delegation

Use when reviewing scripts, client components, bundles, or runtime behavior related to Use event delegation for dynamic content. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

56

Quality

64%

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

Quality

Content

63%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 with an appropriately split one-level reference and a clear Check/Fix/Explain/Code Review sequence that includes a verification requirement. Its weaknesses are duplicated conceptual material (the intro appears verbatim in the reference) and the absence of any inline executable example for what is a code-refactoring skill.

Suggestions

Replace the opening paragraph and overlapping Quick Reference bullets with one or two lines stating only the rule, since the rationale already lives in references/rule.md's "Why It Matters" section.

Add one minimal inline delegated-listener snippet (parent.addEventListener with event.target.closest() and an early return) so the Fix step is executable without opening the reference file.

Trim the Code Review section's restatement of the frontmatter description, keeping only the rule-specific flags (per-element listeners in loops, handlers on dynamically added elements) and the browser-verification requirement.

DimensionReasoningScore

Conciseness

The body is short and mostly on-task, but includes unnecessary material: the opening paragraph explains why per-element listeners are costly (basic knowledge Claude already has) and is duplicated verbatim in references/rule.md's "Why It Matters"; the "Quick Reference" bullets restate that intro; and the "Code Review" section near-verbatim repeats the frontmatter description including its garbled "related to Use event delegation for dynamic content" clause. Not a 2 since there is no heavily padded section, and not a 4 because these are clear trim candidates.

3 / 5

Actionability

There is concrete guidance — the detection heuristic ("attaches the same event handler to multiple elements in a loop"), the specific API ("event.target.closest()"), and the refactor target ("event delegation on the common parent container") — but the body contains no executable code; all implementation examples are deferred to references/rule.md, leaving the Fix step as a single abstract sentence. More than high-level hints (not a 2), but missing the executable detail expected of a JavaScript refactoring skill (not a 4).

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections form a clear, coherent review sequence, and the Code Review section requires stating "how the change should be verified in the browser", giving an explicit verification checkpoint. Not a 5 because the actual verification steps are deferred to rule.md rather than stated inline and there is no error-recovery loop; not a 3 because the sequence is explicit and verification is required, not merely implicit, and no destructive/batch cap applies.

4 / 5

Progressive Disclosure

The body is a concise overview that appropriately splits all implementation detail (code examples, nested-element handling with closest(), when NOT to delegate, verification steps) into the single, real, one-level-deep references/rule.md file, clearly signaled with its purpose: "For full implementation details, code examples, and framework-specific guidance, see references/rule.md". No nested references, easy navigation.

5 / 5

Total

15

/

20

Passed

Description

66%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 answers both what and when with decent natural keywords centered on the event-delegation niche, but it is built from generic review-skill template phrasing with the rule title awkwardly pasted mid-sentence. This weakens specificity and makes it easy to confuse with sibling JavaScript review rules that share the same trigger prefix.

Suggestions

State the skill's concrete outputs explicitly, e.g., "Flags event handlers attached in loops across multiple elements and suggests the delegated single-listener alternative on a common parent."

Rewrite the garbled clause "runtime behavior related to Use event delegation for dynamic content" so the rule name reads as a natural noun phrase ("related to event delegation for dynamic content").

Narrow the trigger terms to the rule's actual niche (event listeners, addEventListener, click handlers, dynamically added DOM elements) to reduce overlap with sibling JS review skills that share the generic "scripts, client components, bundles" prefix.

DimensionReasoningScore

Specificity

The description names the domain ("related to Use event delegation for dynamic content") and one or two concrete actions — "reviewing scripts, client components, bundles, or runtime behavior" and "Inspect both source code and the browser execution path" — but stops short of listing several specific actions (e.g., flagging per-element listeners in loops, suggesting the delegated alternative), so it is not comprehensive.

3 / 5

Completeness

Both elements are explicitly present: the "when" via "Use when reviewing scripts, client components, bundles, or runtime behavior related to..." and the "what" via "Inspect both source code and the browser execution path so fixes target the real bottleneck or bug". Not a 5 because the "what" describes the inspection approach rather than the skill's actual operation (flag/refactor to delegation), and the embedded capitalized rule title makes the sentence garbled rather than a clear concrete statement.

4 / 5

Trigger Term Quality

Good keyword coverage with natural terms a user would say: "event delegation", "dynamic content", "scripts", "bundles", "runtime behavior", "browser execution path". A few common natural terms are missing, such as "event listeners", "addEventListener", or "click handlers", which keeps it below comprehensive synonym-level coverage.

4 / 5

Distinctiveness Conflict Risk

The opening trigger clause ("reviewing scripts, client components, bundles, or runtime behavior") is generic template language that would fire on almost any JavaScript review request and overlaps heavily with sibling frontendchecklist rules sharing this phrasing; distinctiveness rests solely on the embedded "event delegation for dynamic content" niche. It is more specific than a broadly generic description (not a 2), but the overlap risk with similarly templated JS review skills exceeds the "minor" threshold of a 4.

3 / 5

Total

14

/

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.