Skip to content
Get packs

Avoid Inline JavaScript Review

Reviews code to move inline JavaScript into external files for caching, CSP and maintainability

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

What it does

This skill teaches an AI agent to review web pages and front-end code for inline JavaScript, such as onclick handlers written directly into HTML. When it finds them, the agent flags them and suggests moving the logic into external script files using addEventListener. It also explains why this matters: external files can be cached by the browser, work better with Content Security Policy security rules, and keep markup and behavior separate. It is a checklist-style guide rather than a tool that runs anything by itself.

Great for

  • Front-end developers auditing a website or web app for code quality and security hygiene
  • Teams preparing a page for a strict Content Security Policy
  • Students learning why separating HTML, CSS and JavaScript matters

Skip it if

  • Projects that legitimately need small critical inline scripts for above-the-fold performance; the rule itself allows exceptions, but the agent may over-flag them
  • Non-web projects or back-end-only code, where the rule does not apply

Try asking

  • “Review this login page for inline onclick handlers and suggest how to move them to external JS”
  • “Check my bundle and templates for inline JavaScript that would break a strict CSP”
  • “Explain why inline JavaScript hurts caching and how to fix it in my React-free HTML site”
Step-by-step guide: how to use Avoid Inline JavaScript ReviewInstall, 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.

    javascript-inline.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip javascript-inline.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip javascript-inline.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 specific files or a directory so it can inspect real markup rather than guessing
  • Ask it to state how to verify the fix in the browser, as the skill's review step requires, and test in devtools afterwards
  • Treat the output as guidance; check exceptions such as critical above-the-fold scripts before refactoring

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.