dom-performance

Use when reviewing scripts, client components, bundles, or runtime behavior related to Minimize costly DOM read/write operations. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug. In React, repeated requestAnimationFrame-driven state updates across multiple mounted components are a valid performance smell when visible in the source.

Quality

78%

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/dom-performance/SKILL.md

Quality

Content

72%

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

The body is a well-organized overview with a single verified one-level reference and concrete actionable guidance. Weakest points are the opening concept re-explanation and the absence of an explicit validation/verification loop within the body itself.

Suggestions

Tighten the opening paragraph: drop the general explanation of what layout thrashing is and keep only the rule-specific framing, since Claude already knows the concept.

Add an explicit verification checkpoint to the body (e.g., 'After refactoring, confirm in DevTools Performance panel that forced reflows are gone and no scroll-blocking listener warnings remain') rather than relying solely on the referenced file's Verification section.

Surface 1-2 short inline code snippets (bad read-write-interleaved loop vs. batched reads-then-writes) so the core fix is actionable without opening the reference.

Dimension	Reasoning	Score
Conciseness	Mostly efficient with lean Quick Reference and task bullets, but the opening paragraph re-explains layout thrashing (a concept Claude already knows), fitting the score-2 'mostly efficient but could be tightened' anchor rather than the score-3 lean ideal.	2 / 3
Actionability	Provides specific actionable directives with named APIs ('Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes', 'Use passive listeners for scroll, touch, and wheel') and executable examples in the verified reference, matching the score-3 actionable anchor rather than the incomplete score-2 case.	3 / 3
Workflow Clarity	Task modes (Check, Fix, Explain, Code Review) are clearly listed but the body only implicitly references browser verification with no explicit validate->fix->retry checkpoint, fitting the score-2 'steps listed but validation gaps' anchor rather than the score-3 explicit-validation case.	2 / 3
Progressive Disclosure	A concise overview body with clearly signaled one-level-deep reference to the real file 'references/rule.md' and well-organized sections, matching the score-3 anchor for clear overview with appropriately split content.	3 / 3
	Total	10 / 12 Passed

Description

85%

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 specific, has an explicit 'Use when' trigger covering both what and when, and occupies a clear DOM-performance niche. Its main weakness is trigger-term quality: the phrasing is somewhat technical and lacks the everyday terms users would naturally say.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions ('reviewing scripts, client components, bundles, or runtime behavior', 'Inspect both source code and the browser execution path so fixes target the real bottleneck or bug'), matching the score-3 anchor for multiple specific concrete actions rather than the score-2 partial coverage.	3 / 3
Completeness	An explicit 'Use when reviewing...' clause answers when, and the listed actions answer what, satisfying the score-3 anchor for clearly answering both what AND when with explicit triggers rather than the score-2 implied-when case.	3 / 3
Trigger Term Quality	Contains relevant keywords ('reviewing scripts, client components, bundles, runtime behavior') but leans technical and misses common natural variations a user would say ('janky', 'reflow', 'scroll lag', 'DOM performance'), so it fits score 2 rather than the broad coverage of score 3.	2 / 3
Distinctiveness Conflict Risk	Tied to a clear DOM-performance niche (layout thrashing, React rAF-driven state updates) with distinct triggers unlikely to fire for unrelated skills, matching the score-3 clear-niche anchor rather than the score-2 overlap case.	3 / 3
	Total	11 / 12 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/dom-performance/SKILL.md
Commit: 48405aa

Reviewed: about 8 hours 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.