neo-javascript

Modern JavaScript (ES6+) Expert Skill

Trigger On

• The user asks to write, debug, refactor, or review JavaScript code.
• The project directory contains *.js, *.mjs, or JavaScript configuration files (e.g., eslint.config.js, vite.config.js).
• HTML files (*.html) or Razor views (*.cshtml) contain inline <script> blocks or reference external .js files via <script src="...">.
• The target runtime is a modern browser (Chrome 80+, Firefox 78+, Safari 14+) or a pure JS environment.
• Code modernization is needed (e.g., converting var to const/let, callbacks to async/await, legacy scripts to ESM).

Workflow

1. Perceive (Environment Awareness):
   • Inspect ESLint / Biome configuration to identify the project's ecmaVersion and coding conventions.
   • Determine runtime target: browser (check for DOM APIs, bundler config like vite.config.js, webpack.config.js).
   • Detect JavaScript embedded in HTML (*.html) or Razor views (*.cshtml): identify inline <script> blocks and external <script src="..."> references. For .cshtml files, note the interplay with Razor syntax (@ directives, @section Scripts).
   • Identify the effective ES version upper limit based on the runtime/transpiler configuration (e.g., Babel targets, TypeScript target, browserslist). For inline scripts without a build pipeline, default to the browser's native ES support.
2. Reason (Planning Phase):
   • Evaluate the modernization level of the current code to determine the refactoring strategy.
   • In environments targeting older runtimes (e.g., IE11 via Babel), avoid using features without polyfill support, but prioritize using const/let, arrow functions, and template literals.
   • In modern environments (modern browsers), actively adopt new features to reduce boilerplate code.
   • Be aware of browser-specific concerns (DOM manipulation, Web APIs, rendering performance).
3. Act (Execution Phase):
   • Write high-quality code using modern syntax to improve readability and maintainability.
   • Implement immutable data patterns (spread operators, Object.freeze, structuredClone, immutable array methods).
   • Utilize async/await and Promise composition for asynchronous operations.
   • Prefer ESM (import/export) as the standard module system.
4. Validate (Standard Validation):
   • Validate strict equality (===) usage and absence of var declarations.
   • Check if asynchronous operations correctly handle errors (try/catch around await, .catch() on Promises).
   • Ensure code avoids common security pitfalls (no eval(), no prototype pollution, no innerHTML with unsanitized input).
   • Verify naming conventions follow community standards (camelCase for variables/functions, PascalCase for classes).