DOM Performance Review
Finds layout thrashing and non-passive scroll listeners in front-end code and suggests batching fixes.
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
Once installed, the agent reviews front-end JavaScript, React components and bundles for code that repeatedly reads and writes the page layout in a way that forces the browser to slow down (called layout thrashing). It points out interleaved reads and writes, suggests batching them, recommends requestAnimationFrame for visual updates, and flags scroll, touch and wheel listeners that should be marked passive. It also explains the reasoning and how to verify the fix in a browser.
Great for
- Front-end developers debugging janky scrolling or slow animations
- Teams reviewing React components that update state on every animation frame
- Developers who want a checklist-style performance review of a specific script
Skip it if
- Non-developers without access to the code, since the skill works on source files and browser behaviour rather than general advice (it needs code to review)
- Projects where the bottleneck is server-side or network speed, because the rule only covers DOM read/write patterns
- Relying on it as a substitute for profiling: its guidance is generic and may suggest changes that do not fix the real bottleneck
Try asking
- “Review this React component for layout thrashing and tell me which reads and writes are interleaved.”
- “Check my scroll and touch listeners and tell me which ones should be passive.”
- “Refactor this loop so all DOM measurements happen before any style changes.”
- “Explain why my animation stutters and how batching reads and writes would help.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
dom-performance.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip dom-performance.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip dom-performance.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Paste or point the agent at the specific file or component, and mention the symptom (for example, stutter on scroll) so it targets the right code.
- Ask it to state how to verify the change in the browser, such as with the Performance panel, and run that check yourself before accepting the refactor.
- Treat its suggestions as hypotheses; confirm the bottleneck with profiling before large refactors.
What's inside
- references/rule.md
- SKILL.md
Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.