Javascript Pro

1---2name: javascript-pro3description: Writes, debugs, and refactors JavaScript code using modern ES2023+ features, async/await patterns, ESM module systems, and Node.js APIs. Use when building vanilla JavaScript applications, implementing Promise-based async flows, optimising browser or Node.js performance, working with Web Workers or Fetch API, or reviewing .js/.mjs/.cjs files for correctness and best practices.4license: MIT5metadata:6  author: https://github.com/Jeffallan7  version: "1.1.0"8  domain: language9  triggers: JavaScript, ES2023, async await, Node.js, vanilla JavaScript, Web Workers, Fetch API, browser API, module system10  role: specialist11  scope: implementation12  output-format: code13  related-skills: fullstack-guardian14---15 16# JavaScript Pro17 18## When to Use This Skill19 20- Building vanilla JavaScript applications21- Implementing async/await patterns and Promise handling22- Working with modern module systems (ESM/CJS)23- Optimizing browser performance and memory usage24- Developing Node.js backend services25- Implementing Web Workers, Service Workers, or browser APIs26 27## Core Workflow28 291. **Analyze requirements** — Review `package.json`, module system, Node version, browser targets; confirm `.js`/`.mjs`/`.cjs` conventions302. **Design architecture** — Plan modules, async flows, and error handling strategies313. **Implement** — Write ES2023+ code with proper patterns and optimisations324. **Validate** — Run linter (`eslint --fix`); if linter fails, fix all reported issues and re-run before proceeding. Check for memory leaks with DevTools or `--inspect`, verify bundle size; if leaks are found, resolve them before continuing335. **Test** — Write comprehensive tests with Jest achieving 85%+ coverage; if coverage falls short, add missing cases and re-run. Confirm no unhandled Promise rejections34 35## Reference Guide36 37Load detailed guidance based on context:38 39| Topic | Reference | Load When |40|-------|-----------|-----------|41| Modern Syntax | `references/modern-syntax.md` | ES2023+ features, optional chaining, private fields |42| Async Patterns | `references/async-patterns.md` | Promises, async/await, error handling, event loop |43| Modules | `references/modules.md` | ESM vs CJS, dynamic imports, package.json exports |44| Browser APIs | `references/browser-apis.md` | Fetch, Web Workers, Storage, IntersectionObserver |45| Node Essentials | `references/node-essentials.md` | fs/promises, streams, EventEmitter, worker threads |46 47## Constraints48 49### MUST DO50- Use ES2023+ features exclusively51- Use `X | null` or `X | undefined` patterns52- Use optional chaining (`?.`) and nullish coalescing (`??`)53- Use async/await for all asynchronous operations54- Use ESM (`import`/`export`) for new projects55- Implement proper error handling with try/catch56- Add JSDoc comments for complex functions57- Follow functional programming principles58 59### MUST NOT DO60- Use `var` (always use `const` or `let`)61- Use callback-based patterns (prefer Promises)62- Mix CommonJS and ESM in the same module63- Ignore memory leaks or performance issues64- Skip error handling in async functions65- Use synchronous I/O in Node.js66- Mutate function parameters67- Create blocking operations in the browser68 69## Key Patterns with Examples70 71### Async/Await Error Handling72```js73// ✅ Correct — always handle async errors explicitly74async function fetchUser(id) {75  try {76    const response = await fetch(`/api/users/${id}`);77    if (!response.ok) throw new Error(`HTTP ${response.status}`);78    return await response.json();79  } catch (err) {80    console.error("fetchUser failed:", err);81    return null;82  }83}84 85// ❌ Incorrect — unhandled rejection, no null guard86async function fetchUser(id) {87  const response = await fetch(`/api/users/${id}`);88  return response.json();89}90```91 92### Optional Chaining & Nullish Coalescing93```js94// ✅ Correct95const city = user?.address?.city ?? "Unknown";96 97// ❌ Incorrect — throws if address is undefined98const city = user.address.city || "Unknown";99```100 101### ESM Module Structure102```js103// ✅ Correct — named exports, no default-only exports for libraries104// utils/math.mjs105export const add = (a, b) => a + b;106export const multiply = (a, b) => a * b;107 108// consumer.mjs109import { add } from "./utils/math.mjs";110 111// ❌ Incorrect — mixing require() with ESM112const { add } = require("./utils/math.mjs");113```114 115### Avoid var / Prefer const116```js117// ✅ Correct118const MAX_RETRIES = 3;119let attempts = 0;120 121// ❌ Incorrect122var MAX_RETRIES = 3;123var attempts = 0;124```125 126## Output Templates127 128When implementing JavaScript features, provide:1291. Module file with clean exports1302. Test file with comprehensive coverage1313. JSDoc documentation for public APIs1324. Brief explanation of patterns used