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%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, lean rule skill that defers detail to a real one-level reference and provides concrete named techniques. Its main weakness is workflow clarity: the body sequences Check/Fix/Explain/Review but lacks explicit verification checkpoints, which are buried in the reference.

Suggestions

Add an explicit 'Verify' step to the body (e.g., confirm in DevTools Performance panel that reflows dropped and no scroll-blocking listener warnings remain) rather than leaving verification only in references/rule.md.

Trim or remove the opening paragraph, which restates layout-thrashing concepts already explained in references/rule.md.

Make the Check → Fix → Explain → Code Review sequence explicit (numbered) so the workflow order is unambiguous.

Dimension	Reasoning	Score
Conciseness	The body is lean with tight bullet directives and short imperative sections, though the opening paragraph restates layout-thrashing concepts already covered in references/rule.md and could be trimmed.	4 / 5
Actionability	The Quick Reference names specific, executable techniques and APIs ('offsetHeight, getBoundingClientRect', 'requestAnimationFrame', 'DocumentFragment or innerHTML', 'passive listeners'), giving mostly actionable guidance with code deferred to the reference.	4 / 5
Workflow Clarity	Check/Fix/Explain/Code Review sections imply a rough sequence, but the body has no explicit validation or verification checkpoints — those live only in references/rule.md — leaving checkpoints implicit.	3 / 5
Progressive Disclosure	A clear overview with well-organized sections and a single, clearly signaled one-level-deep reference ('see references/rule.md') that exists as a real file, with content appropriately split between overview and detail.	5 / 5
	Total	16 / 20 Passed

Description

83%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 strong, explicit description with a clear 'Use when' trigger and concrete review/inspection actions, plus a useful React-specific smell example. It could be tightened by adding common natural synonyms (reflow, jank, layout thrashing) and trimming the broad review-target list that invites overlap with sibling performance skills.

Suggestions

Add natural synonyms users actually say — 'reflow', 'layout thrashing', 'jank', 'slow rendering' — to broaden trigger-term coverage.

Tighten the broad 'scripts, client components, bundles, or runtime behavior' list so it doesn't overlap with generic performance-review skills.

The phrase 'related to Minimize costly DOM read/write operations' reads as a pasted rule title; rephrase into a natural clause.

Dimension	Reasoning	Score
Specificity	Lists several concrete review targets ('scripts, client components, bundles, or runtime behavior') and a concrete inspection action ('Inspect both source code and the browser execution path'), with minor gaps in fix-side coverage.	4 / 5
Completeness	Explicitly answers 'when' ('Use when reviewing scripts, client components, bundles, or runtime behavior...') and 'what' ('Inspect both source code and the browser execution path so fixes target the real bottleneck or bug') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Good natural-term coverage ('scripts, client components, bundles, runtime behavior', 'React', 'requestAnimationFrame', 'performance smell'), though common synonyms like 'reflow', 'jank', or 'layout thrashing' are absent.	4 / 5
Distinctiveness Conflict Risk	The DOM read/write performance niche is fairly distinct and the React-specific rAF example narrows it, though the broad 'reviewing scripts/client components/bundles/runtime behavior' phrasing risks minor overlap with general performance-review skills.	4 / 5
	Total	17 / 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/dom-performance/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.