Guide · Agent skill
How to use the Event Delegation Reviewer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Event Delegation Reviewer is an agent skill, a packaged set of instructions that an AI agent such as Claude loads when your request matches its purpose. This guide explains what the event-delegation skill makes the agent check and change, how to install it from a ZIP file, and how to ask for a review in plain language. After reading it, you will be able to add the skill, trigger it on your own front-end code, and know what to verify in the browser afterwards.
Event Delegation Reviewerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the skill ZIP. Download the event-delegation ZIP from this page. It contains SKILL.md and references/rule.md.
- 2Choose an install location. Use ~/.claude/skills/ for a personal install or the .claude/skills/ folder inside a project for a single repository.
- 3Unzip the skill. Extract the ZIP so the event-delegation folder sits in your chosen skills location.
- 4Or upload it in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 5Ask for a review in plain language. Describe the code, for example a click handler on a dynamic list, and ask the agent to review it for event delegation.
- 6Apply and test the change. Review the agent's suggested refactor, apply what you agree with, and test clicks in the browser, including items added after load.
What the event-delegation skill makes the agent do
The skill gives the agent one front-end rule: use event delegation for dynamic content. Instead of attaching a listener to every list item or table row, the rule is to attach one listener to a stable parent element and let the click bubble up to it.
When you ask for a review or fix, the agent looks for loops that attach the same handler to many elements, suggests moving that handler to the common parent, and recommends event.target.closest() to identify the intended element. It also reviews related scripts, client components and browser behaviour for the issue.
The skill is a review guide. It does not change your site on its own, and the source does not claim any verified performance gain. Changes still need testing in the browser.
- Flags loops that attach one handler to many children
- Suggests a shared parent listener as the replacement
- Explains event bubbling and when to use closest() versus target
- Notes that listeners added to a parent also work for items added later
document.querySelectorAll('.list-item').forEach(item => {
item.addEventListener('click', handleItemClick)
})Install the Event Delegation Reviewer skill
Download the ZIP for the event-delegation skill from this page. The skill folder contains SKILL.md and references/rule.md. Unzip it into one of the locations below, depending on whether you want it for all your projects or one repository.
For a personal install that applies everywhere, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in the project's .claude/skills/ folder. If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: the .claude/skills/ folder inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How to trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent to use it when reviewing scripts, client components, bundles or runtime behaviour related to event delegation for dynamic content. Ask for that work in ordinary words, and name the kind of code you have, such as a click handler on a list or table.
Mention the file or component if you can. The more specific the request, the more likely the agent is to apply the checklist to the right code instead of general JavaScript advice.
- Review this file for per-item click listeners and suggest event delegation.
- Refactor the row click handlers in this table component to use one listener on the table.
- Check whether the click handling for items loaded with AJAX will still work after an update.
- Audit this script for many event listeners that could be replaced by a parent listener.
Examples of what the review looks for
The source's main example is a loop that adds one click listener to each element matching a list-item selector. The rule points out two problems with that pattern. It creates a listener for every item, which adds memory use and overhead when there are hundreds of items. It also fails for items added later, because a newly appended element has no listener attached to it.
The fix the skill suggests is to attach one listener to the container that stays on the page, then identify the clicked item from the event. The source names event.target.closest() for finding the intended element.
- Look for forEach or similar loops that call addEventListener on each child
- Look for dynamically added items that have no handler
- Check that the handler identifies the right item from the event target
const newItem = createItem()
list.appendChild(newItem)
// newItem has no click listener!What the skill needs and the safety notes
The skill lists no requirements. It does not run scripts and does not use the network. It consists of a SKILL.md file and a references/rule.md file, which the agent reads as instructions.
Because the skill does not run code or use the network, the risk is mainly in acting on its advice. Review each suggested change, then check the result in the browser, including clicks on items that were added after the page loaded.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Verify every change in the browser before shipping
Tips for getting useful results
Give the agent the code that handles the interaction, and say whether the content is loaded by AJAX or rendered after user actions. The rule applies most clearly to dynamic lists and tables. The source notes that projects without repeated interactive elements may get little value from it.
Ask the agent to also review the cleanup side. The rule says listeners on the parent should be cleaned up when the container is removed.
- Name the container element that should hold the single listener
- Ask for the browser check you want, such as testing clicks on newly added rows
- Skip the skill for back-end or non-JavaScript work, since the rule is specific to browser event handling
What people use it for
- Reviewing a product list where each row has its own click handler and the list is updated by AJAX.
- Refactoring a table component that attaches a listener to every row to use one listener on the table.
- Checking a client component so items rendered after a user action still respond to clicks.
- Auditing a bundle or script for many event listeners that could share one parent listener.
Frequently asked questions
How do I install the event-delegation agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for a personal install, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can upload it under Settings → Capabilities → Skills instead.
What do I need to run the event-delegation skill?
The source lists no requirements. The skill does not run scripts and does not use the network, so it is a set of instructions the agent reads.
Is the event-delegation skill free to use?
The skill is listed under the MIT licence. The source does not mention prices, so check the licence file in the repository for the full terms.
Will this skill make my site faster automatically?
No. The skill gives review guidance and suggested refactors, and does not change your site on its own. The source does not claim verified performance gains, so test the change in the browser.
Why isn't the skill triggering when I ask for a review?
Check that the folder is in ~/.claude/skills/ or the project's .claude/skills/, or that you uploaded it under Settings → Capabilities → Skills. Then ask in terms that match its purpose, such as reviewing click handlers on dynamic lists or tables.
When should I choose a different approach instead of this skill?
Pick something else if your project has no dynamic or repeated interactive elements, or if your work is non-JavaScript or back-end only. The source describes the rule as specific to browser event handling, and the source does not compare it with other tools.
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 the event-delegation skill if you write or review browser JavaScript that handles clicks on dynamic lists or tables, or you want to audit many per-element listeners. Skip it for projects without repeated interactive elements, for back-end work, or if you expect automatic performance gains, since every suggested change still needs browser testing.
Download the skill