Guide · Agent skill
How to use the DOM Size Performance Audit agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The dom-size skill is a guidance document that teaches an AI agent how to check whether a page is slow because its HTML structure (the DOM) has too many elements or too much nesting. It is aimed at front-end developers, teams that run Lighthouse audits, and reviewers who need a clear reason why a large DOM hurts performance. After this guide you will know what the skill asks the agent to do, how to install it, and how to phrase a request that triggers it.
DOM Size Performance Auditthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the dom-size skill ZIP file from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Describe the symptom. Ask about slow loads, janky scrolling, or rendering delays related to DOM size.
- 5Provide a measurement. Share a Lighthouse report or DevTools DOM node count and depth so the agent can verify the bottleneck.
- 6Apply the fix and re-measure. Simplify markup, remove unnecessary wrappers, or virtualize long lists, then measure again.
What the dom-size skill makes the agent do
The skill focuses on one performance problem: an excessive DOM size increases memory use, slows style calculations, and makes layout reflows more expensive, which leads to poor interaction performance.
When it applies, the agent follows a fixed sequence: check the total number of DOM nodes and the maximum DOM depth using Lighthouse or Chrome DevTools, confirm the real bottleneck before suggesting changes, then recommend simplifying the HTML structure, removing unnecessary wrapper elements, or implementing virtualization for large lists.
- Quick reference thresholds: keep total DOM nodes below 1,500 and maximum depth below 32.
- Avoid deep nesting of elements, sometimes called 'div-itis'.
- Use virtualization for long lists, rendering only the visible window plus a small overscan buffer.
Install the dom-size skill
Download the ZIP file for the skill from this page. Then choose one of the two install options below.
For Claude Code, unzip the file into ~/.claude/skills/ to make it available everywhere, or into a project's .claude/skills/ folder to limit it to that project.
In the Claude apps, you can upload the skill instead under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent when to use it, so describe the symptom you are seeing. Requests about slow page loads, heavy assets, rendering delays, or janky scrolling related to DOM size are the ones it is designed for.
Mention the measurement tool if you have one. The skill expects the agent to verify the bottleneck in DevTools, Lighthouse, or field data before recommending changes, so a report or a DOM count gives it something concrete to work from.
- "This product listing page scrolls janky. Audit the DOM size and tell me if it is the cause."
- "Here is our Lighthouse report. Check whether the DOM node count or depth is flagged, and confirm the bottleneck."
- "Our feed has 1,000 rows rendered at once. Should we virtualize it? Measure first."
What the skill needs and what it does not do
The skill needs Chrome DevTools or Lighthouse to measure DOM node count and depth. The source does not mention API keys or accounts. The skill is a guidance document: it does not run tools itself, so the agent (or you) must perform the measurement.
The skill runs no scripts and makes no network requests, according to its listing.
- Requires: Chrome DevTools or Lighthouse
- Runs scripts: no
- Uses network: no
- License: MIT
Safety notes on scripts and network use
Because the skill runs no scripts and uses no network, it does not send your page or data anywhere. Its effect comes only from the advice the agent gives you, so review any suggested code changes before applying them.
The skill itself warns against changing code without measuring first. If you ask the agent to edit markup without a measurement, it should push back under this skill's guidance.
- Review every recommended change before merging it.
- Measure before and after a change to confirm it helped.
Tips for getting useful results
Give the agent a real measurement. A DevTools node count or a Lighthouse finding is more useful than a general complaint about speed.
Expect the skill to be most useful on large or deeply nested pages. Simple static sites or small pages already under the thresholds gain little from it.
- Provide the page URL or the markup involved, if you can share it.
- Ask for the measurement method to be described in the answer.
- Use the 1,500-node and depth-32 thresholds as rules of thumb to check against.
<!-- Bad: Excessive nesting -->
<div class="wrapper">
<div class="container">
<div class="inner">
<p>Hello World</p>
</div>
</div>
</div>
<!-- Good: Clean structure -->
<article class="content">
<p>Hello World</p>
</article>What people use it for
- Investigating why a long product listing page scrolls slowly
- Reviewing a Lighthouse report to see whether DOM size is flagged
- Deciding whether a long feed or table should use list virtualization
- Explaining to a non-specialist reviewer why a deeply nested layout costs performance
Frequently asked questions
How do I install the dom-size agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Is the dom-size skill free to use?
The skill is published under the MIT licence, as stated on this page. The source does not mention any price or paid tier.
What do I need to run the dom-size audit?
You need Chrome DevTools or Lighthouse to measure total DOM node count and maximum depth. The source does not mention API keys or accounts.
Does the skill run scripts or access the network?
According to its listing, the skill runs no scripts and uses no network. It is a guidance document, so measurement must be done with the tools you have.
What DOM size is considered too large?
The skill's quick reference suggests keeping total DOM nodes below 1,500 and maximum depth below 32. These are rules of thumb from the skill, not hard limits.
What are alternatives if this skill does not fit my needs?
The source does not compare this skill with alternatives. For a manual check, you can run Lighthouse or inspect the DOM in Chrome DevTools yourself.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or reviewer trying to decide whether a large or deeply nested DOM is behind a slow page, and you want the agent to confirm that before suggesting changes. Pick something else for small static pages already well under the thresholds, or if you want an agent to change code without any measurement.
Download the skill