How to use the DOM Performance Review agent skill

What is an agent skill and what does this one do?

An agent skill is a folder containing a SKILL.md file and optional reference files. When installed, the agent reads the skill when a request matches its description, then follows its instructions. This skill has two files: SKILL.md and references/rule.md.

The skill targets layout thrashing. Every time code reads a layout property such as offsetHeight or getBoundingClientRect after changing the DOM, the browser must synchronously recalculate layout before returning the value. Repeating this in a loop can make the page stutter. The skill tells the agent to look for these interleaved reads and writes, suggest batching all reads before all writes, recommend requestAnimationFrame for visual updates, and flag scroll, touch and wheel listeners that should be passive.

• Finds places where reads and writes alternate inside loops
• Suggests batching reads first, then writes
• Recommends requestAnimationFrame for visual updates and DocumentFragment or innerHTML for bulk insertion
• Flags scroll, touch and wheel listeners that do not call preventDefault
• In React, flags repeated requestAnimationFrame-driven state updates across many mounted components when visible in the source

How do you install the dom-performance skill?

Download the ZIP for the skill from the page you are reading. Unzip it so that the dom-performance folder, containing SKILL.md and references/rule.md, sits in one of the skills locations below.

For a personal install that applies to all your projects, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder so it travels with the repository.

If you use the Claude apps instead of a local folder, upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/dom-performance/
• Project: .claude/skills/dom-performance/ inside your repository
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a natural request?

You do not need a special command. The agent matches your request against the skill description, which covers reviewing scripts, client components, bundles and runtime behaviour related to costly DOM read and write operations. Name the file or component and describe the symptom so the match is clear.

Good requests mention the code and the problem, for example asking the agent to check a scroll handler for layout thrashing, or asking whether a React component updating state on every animation frame is a performance problem.

• Review src/components/Carousel.jsx for layout thrashing and passive listener issues
• Check this scroll handler for interleaved DOM reads and writes
• This React component updates state on every requestAnimationFrame. Is that a performance smell across these mounted components?
• Explain why this animation loop is janky and suggest a batched fix

What does a review look like?

The skill defines four modes of work: Check, Fix, Explain and Code Review. A Check identifies interleaved reads and writes and non-passive listeners. A Fix refactors the code to batch reads before writes and marks listeners passive where they do not need to cancel scrolling. An Explain covers layout thrashing and why batching prevents it. A Code Review flags exact imports, event handlers, side effects or blocking operations and states how to verify the change in a browser.

The reference file includes a before-and-after example. The bad version reads offsetHeight and then writes a style inside a forEach loop, so each iteration forces a reflow. The good version performs all reads first and all writes afterwards.

What do you need before you start?

The skill lists no required tools, does not run scripts, and does not use the network. It works on source files you give it and on browser behaviour you describe or can check. Without code to review, it cannot give useful output, so have the script, component or bundle file ready.

Verification is part of the workflow. The skill asks the agent to state how a change should be checked in the browser, so have browser developer tools available to confirm that a fix actually changed the behaviour.

• Access to the source files you want reviewed
• A browser with developer tools to verify the change
• No scripts, network access or extra software required by the skill itself

What are the safety notes?

According to the skill metadata, it runs no scripts and uses no network access. Its contents are instructions and reference text. Review any skill before installing it, as you would any code you add to your agent setup, and check the files that the agent edits before accepting changes.

Tips for getting useful results

Give the agent the exact file and the symptom. The skill is generic, so concrete code produces concrete findings. Treat its suggestions as hypotheses. Profile the page before and after the change to confirm that the edit addressed the real bottleneck, because the guidance may suggest changes that do not fix it. Remember the rule only covers DOM read and write patterns. If the slowness comes from the server or network, this skill will not find it.

• Name the file, component or handler you want reviewed
• Describe what you see, such as jank while scrolling
• Verify each change in the browser before and after
• Do not use the skill as a replacement for profiling