CtrlK
BlogDocsLog inGet started
Tessl Logo

debounce-throttle

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

56

Quality

63%

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/debounce-throttle/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 well-structured, brief skill body with excellent progressive disclosure — a clean overview that correctly pushes code examples and framework guidance into a real one-level reference file. Its weaknesses are a Fix section that is directive but not executable, concept re-teaching that wastes tokens, and verification steps that are implied rather than stated.

Suggestions

Cut the concept explanations Claude already knows — the debounce/throttle definition bullets and the UI jank/INP intro — and keep only the non-obvious specifics (delay values, cleanup reminder).

Make the Fix section executable: inline a minimal debounce/throttle snippet or link `references/rule.md` at the point of need in the Fix section rather than only at the bottom of the file.

Surface explicit verification checkpoints in the Code Review flow (e.g., the four verification steps currently buried in references/rule.md) so the review-to-verify loop is explicit.

DimensionReasoningScore

Conciseness

The body re-teaches concepts Claude already knows: 'Debounce: delays execution until activity stops (search inputs, form validation)' and 'High-frequency events fire hundreds of times per second, causing UI jank, excessive API calls, and poor Interaction to Next Paint (INP) scores.' The genuinely non-obvious specifics ('Use 150-300ms delay for user input, 100ms for scroll/resize', 'Clean up event listeners to prevent memory leaks') do earn their place, so this is mostly efficient with some unnecessary explanation — anchor 3 rather than 4, and well above anchor 2's pervasive padding.

3 / 5

Actionability

Concrete elements exist — specific delay values ('150-300ms delay for user input, 100ms for scroll/resize'), named events ('scroll, resize, input, mousemove'), and specific flagging instructions ('Flag exact imports, event handlers, runtime side effects, or blocking operations') — but the Fix directive 'Add debounce or throttle to high-frequency event handlers to limit execution rate and improve performance' is abstract, with no inline code and the pointer to the executable examples relegated to the bottom of the file. This lands at anchor 3 (some concrete guidance but incomplete) rather than 4.

3 / 5

Workflow Clarity

Check, Fix, Explain, and Code Review are parallel task modes rather than a sequenced workflow, and validation is only implicit — 'state how the change should be verified in the browser' — with the actual verification steps deferred to references/rule.md instead of being surfaced as checkpoints. Anchor 3 (steps listed but validation gaps, checkpoints implicit) fits; not 4 because no explicit validation sequence appears in the body, not 2 because each mode's action is clearly delineated.

3 / 5

Progressive Disclosure

The body is a concise, well-sectioned overview that defers implementation detail via a clearly signaled one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`' — and that file exists and appropriately contains the debounce/throttle implementations, React/Vue examples, and verification checklist. This matches anchor 5: clear overview, well-signaled single-level reference, content appropriately split.

5 / 5

Total

14

/

20

Passed

Description

70%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 solid description with an explicit and well-targeted 'Use when' trigger clause and a distinct debounce/throttle niche. Its main weakness is a thin 'what' — the actions are limited to reviewing/inspecting without stating the concrete outputs (flagging handlers, recommending delays, browser verification) — and it lacks natural trigger synonyms like scroll, resize, or input handlers.

Suggestions

Strengthen the 'what' by enumerating the concrete actions the skill performs, e.g., 'Flags unrate-limited high-frequency handlers, applies debounce/throttle with recommended delays, and specifies how to verify the fix in the browser.'

Add natural trigger terms users would actually say, such as 'scroll', 'resize', 'search input', 'mousemove', or 'event handler fires too often', to broaden keyword coverage.

Cap the broad framing ('reviewing scripts, client components, bundles, or runtime behavior') so the description leads with the debounce/throttle niche and reduces overlap with generic performance-review skills.

DimensionReasoningScore

Specificity

The description names its domain ('Debounce and throttle event handlers') and offers about two concrete actions — 'Inspect both source code and the browser execution path' — but the coverage is not comprehensive: 'reviewing scripts, client components, bundles, or runtime behavior' is an umbrella verb over objects rather than a list of specific actions. It matches anchor 3 (domain plus 1-2 concrete actions) and falls short of anchor 4, which expects several distinct specific actions such as flagging handlers, applying delays, or verifying fixes.

3 / 5

Completeness

Both halves are present: the 'when' is explicit and specific ('Use when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event handlers') and the 'what' is stated ('Inspect both source code and the browser execution path so fixes target the real bottleneck or bug'). It sits at anchor 4 rather than 5 because the 'what' is thin — it never says what the review actually produces (e.g., flag unrate-limited handlers, apply debounce/throttle, verify in browser).

4 / 5

Trigger Term Quality

It contains the primary natural terms users would say — 'Debounce', 'throttle', 'event handlers' — plus useful context terms ('scripts', 'client components', 'runtime behavior'). It misses common natural variations like scroll, resize, search input, or performance/jank phrasing, so it fits anchor 4 (good coverage, a few natural terms missing) rather than anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

The 'Debounce and throttle event handlers' niche is clearly distinct with a strong anchor term, but the broad framing 'reviewing scripts, client components, bundles, or runtime behavior' creates minor overlap risk with general JavaScript or performance-review skills. This matches anchor 4 (mostly distinct, minor overlap risk with closely related skills) rather than anchor 5's minimal conflict risk.

4 / 5

Total

15

/

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.