Guide · Agent skill
How to use the ES Modules Reviewer agent skill (es-modules)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The es-modules skill is an agent skill that makes an AI coding agent review JavaScript for CommonJS patterns such as require() and module.exports, then suggest or apply conversion to ES module import/export syntax. It is written for developers modernising older Node or CommonJS-style code, front-end engineers preparing code for tree-shaking bundlers, and teams checking module syntax in pull requests. After this guide you will know what the skill does, how to install it, how to trigger it, and what to check before trusting its changes.
ES Modules Reviewerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the es-modules skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Make a natural request. Ask the agent to review a named file or component for require(), module.exports or exports.
- 5Review the suggested change. Read the converted import/export code and check it still behaves as before.
- 6Verify in the browser or tests. For client code, load the page and confirm the module change works; run your test suite for Node code.
What is an agent skill and what does es-modules make the agent do?
An agent skill is a folder containing a SKILL.md file and supporting reference files. When a skill is installed, the agent can load its instructions when a request matches the skill's description. This skill's description is: Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export).
Once installed, the agent checks JavaScript for require() and module.exports (and exports) and suggests or applies conversion to import/export syntax. It explains the reasons for the change: ES modules are statically analyzable, so bundlers can determine at build time what code is used and remove the rest (tree-shaking), and they are the browser-native standard. When reviewing client code, it also looks at browser execution paths and states how to verify the change in the browser.
- Finds require(), module.exports and exports in JavaScript files
- Suggests or applies conversion to import/export
- Explains benefits: static analysis, tree-shaking, native browser support
- For client code, flags runtime side effects and blocking operations and describes how to verify in the browser
How do you install the es-modules skill?
Download the ZIP for the es-modules skill from this page and unzip it. You can install it in one of two places, depending on how you use the agent.
For a personal setup, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into the project's .claude/skills/ folder. In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills, then upload
What does the skill need to run?
The skill lists no requirements. It does not run scripts and does not use the network. Its files are references/rule.md and SKILL.md. The guidance applies to JavaScript code only.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
How do you trigger the skill with a natural request?
You do not need a special command. Describe the task in plain language, and mention JavaScript modules, require(), or the browser behaviour you care about. The skill's description covers reviewing scripts, client components, bundles and runtime behaviour related to ES modules, so requests in that area are the ones it is meant to match.
Point the agent at a specific file or component when you can. The skill's check step asks for the require(), module.exports or exports statements in a given file, so a named file gives the most precise result.
- "Review utils.js for CommonJS require() and module.exports and convert it to import/export."
- "Convert the require() calls in this Node module to ES module syntax and explain the tree-shaking benefit."
- "Check this client component's script loading and tell me how to verify the module change in the browser."
- "Look at this pull request and flag any files still using module.exports."
What does a typical conversion look like?
The reference file shows the pattern the skill moves toward. CommonJS code uses require() and module.exports. The ES module version uses import and export. The reference file notes that named exports scale better in large codebases than default exports, and that named exports improve IDE autocompletion and enable tree-shaking.
Before accepting a change, read the diff. The examples below are the forms the source names; check that your own code still does what it did before.
- Before: const utils = require('./utils') and module.exports = { myFunction }
- After: use import/export syntax such as named exports, which the reference recommends for large codebases
- For browsers without a bundler, add type="module" to the script tag
// Before (CommonJS)
const { formatDate } = require('./utils')
module.exports = { myFunction }
// After (ES modules, named exports)
// import { formatDate } from './utils'
// export { myFunction }What should you check before accepting the skill's changes?
The skill does not check whether converting a file will break runtime behaviour. Some projects must stay on CommonJS, including some legacy Node tooling, and converting those may break them. Confirm the project can use ES modules before applying changes.
For client code, the skill's review step asks for a browser check. Run the page after the change and confirm the module loads and the behaviour is unchanged. The source does not describe specific browser tools, so use the checks your team already uses.
- Confirm the project is not locked to CommonJS
- Run the tests or the app after conversion
- For client code, load the page in the browser and confirm the change works
What are good ways to use this skill?
The skill fits best where module syntax is inconsistent or where bundle size matters. It is not a fit for non-JavaScript projects, where its guidance does not apply.
- Modernising an older Node or CommonJS-style codebase
- Preparing front-end code for a bundler that relies on tree-shaking
- Reviewing pull requests for module syntax consistency
What people use it for
- Converting a Node utils file from require() to import/export
- Reviewing a client component's script loading before a release
- Checking a pull request for files that still use module.exports
- Preparing a front-end codebase for a tree-shaking bundler
Frequently asked questions
How do I install the es-modules 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.
Does the es-modules skill require anything else?
The skill lists no requirements. It does not run scripts and does not use the network, so it only supplies guidance and instructions to the agent.
Is the es-modules skill free?
The skill is published under the MIT licence. This page does not list pricing, so check the source repository for any terms beyond the licence.
Will the skill break my CommonJS project?
It might. The skill does not check whether conversion breaks runtime behaviour, and some legacy Node tooling must stay on CommonJS. Confirm your project can use ES modules before applying changes.
Why does the skill recommend ES modules?
ES modules are statically analyzable, so bundlers can remove unused code at build time (tree-shaking). They are also the browser-native standard, which reduces the need for build-time transformation.
Can I use this skill for non-JavaScript projects?
No. The guidance applies to JavaScript module syntax only, so it does not help with projects in other languages.
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 es-modules skill if you maintain CommonJS-style JavaScript and want an agent to find require() and module.exports and move the code to import/export, with reasons and browser checks. Pick something else if your project must stay on CommonJS, since the skill does not check whether conversion will break it, or if your code is not JavaScript.
Download the skill