Guide · Agent skill
How to use the Avoid Inline JavaScript Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Avoid Inline JavaScript Review skill (skill name javascript-inline) is an instruction set that teaches an AI agent to review web pages and front-end code for JavaScript written directly inside HTML, such as onclick handlers. When it finds them, the agent flags the problem and suggests moving the logic into external script files using addEventListener. This guide covers what the skill does, how to install it, how to ask for it in plain language, and what to watch for.
Avoid Inline JavaScript Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the javascript-inline skill ZIP from the skill's page on this site.
- 2Unzip into the right folder. Unzip into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask in plain language. Name the page or component and say you want an inline JavaScript review or fix.
- 5Review the flagged lines. Check each flagged onclick or inline script and decide whether it is a real problem or an allowed exception.
- 6Verify in the browser. Test the moved event handlers in the browser before you ship the change.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This skill is about one rule from the Front-End Checklist: avoid inline JavaScript. Its main file, SKILL.md, explains that inline JavaScript breaks browser caching, conflicts with Content Security Policy (CSP), and mixes markup with behavior in a way that is hard to maintain.
When the skill applies, the agent looks for inline handlers such as onclick and onmouseover, and for inline script blocks. It then suggests moving that logic into external files and wiring it up with addEventListener. The skill also notes one exception: critical above-the-fold JavaScript can be inlined. The skill is a checklist-style guide. It does not run anything by itself.
Install the skill: download the ZIP and unzip it
Download the skill's ZIP file from the skill's page on this site. Then choose one of these locations:
For a personal setup available across your projects, unzip the skill into ~/.claude/skills/.
For a single project, unzip it into the project's .claude/skills/ folder.
If you use the Claude apps instead, upload the ZIP in the app under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. The skill is meant to load when your request matches its description, which is about reviewing scripts, client components, bundles, or runtime behavior related to avoiding inline JavaScript. Say what you want in plain words and name the files or pages involved.
Being specific helps. Point the agent at a page or folder and say whether you want a review, a fix, or an explanation.
- Review index.html for inline onclick handlers and suggest fixes.
- Check this page for inline JavaScript before we apply a strict Content Security Policy.
- Explain why the inline event handlers in components/menu.html are a problem.
- Move the onclick logic in this template into an external file using addEventListener.
What the agent checks and how it reports
The skill's code review guidance asks the agent to flag exact event handlers, script blocks, or other runtime side effects that break the rule. It should also state how to verify the change in the browser. The reference file, references/rule.md, shows the pattern: an inline button with an onclick alert is marked as the bad example, and the fix uses external JavaScript and addEventListener.
Expect the agent to explain the reasons as well as the changes. Those reasons are caching, CSP compatibility, and separation of markup from behavior. Check the agent's suggestions against the page in your browser, since the skill itself says the change should be verified there.
Know the exception before you act on every flag
The skill allows critical above-the-fold JavaScript to be inlined. Some projects need a small inline script for performance reasons. The agent may still flag these, so decide for yourself whether a flagged script is one of the legitimate exceptions. The skill does not apply to non-web projects or back-end-only code.
Safety notes and requirements
The skill requires nothing beyond the agent itself, according to its listing. It does not run scripts and does not use the network. Because it is a set of instructions, its effect comes from the changes the agent proposes and you accept. Review those changes like any other code edit before committing them.
The skill is licensed under MIT.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Tips for better results
Give the agent the real files, not a description. Ask for the change to be tested in the browser, since the skill's review process includes stating how to verify fixes. For a strict CSP project, mention that goal in your request so the agent weighs the right concerns.
- Start with one page or component to keep the review focused.
- Ask the agent to list each flagged line with its file name.
- Test event handlers after the move, including keyboard use where relevant.
- Keep the exception for critical above-the-fold scripts in mind.
What people use it for
- Auditing a marketing page for onclick handlers before a strict CSP rollout.
- Refactoring a template so button behavior lives in an external file using addEventListener.
- Preparing a web app for better caching by moving scripts out of HTML.
- Teaching a junior developer why separating HTML, CSS and JavaScript matters, using the skill's explanations.
Frequently asked questions
How do I install the javascript-inline agent skill?
Download the skill's ZIP from the skill's page on this site 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 the ZIP under Settings → Capabilities → Skills.
Does this skill require anything else to run?
The skill's listing says it requires nothing. It does not run scripts and does not use the network, so it works as a set of instructions for the agent.
Is the Avoid Inline JavaScript skill free to use?
The skill is licensed under MIT, as stated on its listing. Check the license file in the repository for the full terms.
Why does the skill say inline JavaScript is bad?
The skill says inline JavaScript breaks browser caching, violates Content Security Policy rules, and mixes markup with behavior, which makes code harder to maintain. External files can be cached and are easier to keep separate from HTML.
Will the agent flag all inline scripts, even necessary ones?
The rule allows critical above-the-fold JavaScript to be inlined, but the agent may over-flag these. Review each flagged script yourself before changing it.
Can I use this skill for non-web or back-end projects?
No. The skill's description limits it to web front-end work, and the rule does not apply to non-web projects or back-end-only code.
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
This skill suits front-end developers auditing a site, teams preparing for a strict Content Security Policy, and students learning separation of concerns. It is less suited to projects that need small critical inline scripts for performance, since the agent may flag those too, and it does not help with non-web or back-end-only code.
Download the skill