Avoid inline JavaScript
SkillWeb & browsingjavascript-inline is a skill for AI agents that reviews web projects for inline JavaScript. It inspects source code and the browser execution path to find scripts mixed into HTML markup, then points to fixes that separate behavior from markup. The rule it encodes is Avoid inline JavaScript.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills and access the project's source code.
Then ask your AI: use the Avoid inline JavaScript skill
What your AI can do with it
- Detects JavaScript mixed with HTML markup in scripts, client components, and bundles
- Flags inline onclick/onmouseover handlers and suggests moving them to external JS files
- Recommends addEventListener instead of inline event handlers
- Inspects the browser execution path to target the real bottleneck or bug
- Explains how separation improves caching, CSP compliance, and maintainability
- States how each change should be verified in the browser
Getting started
- Have an agent that can load skills and access the project's source code.
- Add the javascript-inline skill to the agent's available skills.
- Ask the agent to review scripts, client components, or bundles for inline JavaScript.
- Apply the suggested fixes, such as moving handlers to external files and using addEventListener.
- Verify the changes in the browser as the agent's review recommends.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/javascript-inline/SKILL.md and read by ahel’s review.
Inline JavaScript breaks browser caching, violates Content Security Policy (CSP), and creates unmaintainable spaghetti code mixing markup with behavior.
Quick Reference
- Move onclick/onmouseover handlers to external JS files
- Use addEventListener instead of inline event handlers
- Exception: critical above-the-fold JS can be inlined
- External files enable browser caching across pages
Check
Verify that JavaScript code is not mixed with HTML markup using external script files and proper separation of concerns for better maintainability and performance.
Fix
Move inline JavaScript to external files, implement proper event handling, and use modern JavaScript patterns for DOM interaction.
Explain
Explain why separating JavaScript from HTML improves maintainability, enables caching, reduces security risks, and follows best practices for separation of concerns.
Code Review
Review scripts, client components, and browser execution paths related to Avoid inline JavaScript. Flag exact imports, event handlers, runtime side effects, or blocking operations that violate the rule, and state how the change should be verified in the browser.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/javascript/javascript-inline
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing scripts, client components, bundles, or runtime behavior related to avoiding inline JavaScript. It inspects both source code and the browser execution path so fixes target the real bottleneck or bug.
- Why avoid inline JavaScript?
- Inline JavaScript breaks browser caching, violates Content Security Policy (CSP), and creates unmaintainable code that mixes markup with behavior.
- Is inline JavaScript ever acceptable?
- Yes. The skill notes one exception: critical above-the-fold JavaScript can be inlined.
Advanced
- Item type
- skill
- Key
javascript-inline- Source
- github.com/thedaviddias/front-end-checklist