Skip to content
Get packs

Event Delegation Reviewer

Reviews JavaScript for per-element event listeners and suggests event delegation fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist rule about event delegation: attaching one listener to a parent element instead of many listeners to individual list items or table rows. When you ask the agent to review or fix front-end code, it looks for loops that attach the same handler to many elements, suggests refactoring to a shared parent listener using event.target.closest(), and reviews related scripts and browser behaviour for the issue. It is a code review guide, not a tool that changes your site on its own.

Great for

  • Front-end developers reviewing JavaScript that handles clicks on dynamic lists or tables
  • Teams auditing code for performance problems with many event listeners
  • Developers learning why event delegation works with content loaded after the page starts

Skip it if

  • Projects with no dynamic or repeated interactive elements, where the advice adds little value
  • Non-JavaScript code or back-end-only work, since the rule is specific to browser event handling
  • Anyone expecting automatic, verified performance gains: the skill gives guidance and the change still needs browser testing

Try asking

  • “Review this file for loops that add click listeners to every table row and suggest event delegation”
  • “Refactor these per-item event handlers in my todo list to use one listener on the parent container”
  • “Explain how event bubbling makes delegation work and when to use closest() versus event.target”
Step-by-step guide: how to use Event Delegation ReviewerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    event-delegation.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip event-delegation.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip event-delegation.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 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

  • Point the agent at the specific component or file you want reviewed so it can trace the real event handlers.
  • Ask it to state how to verify the change in the browser, such as clicking dynamically added items after the refactor.
  • Check the references/rule.md file for framework-specific examples before applying changes to a React or similar project.

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.