JavaScript Pro

When to Use This Skill

• Building vanilla JavaScript applications
• Implementing async/await patterns and Promise handling
• Working with modern module systems (ESM/CJS)
• Optimizing browser performance and memory usage
• Developing Node.js backend services
• Implementing Web Workers, Service Workers, or browser APIs

Core Workflow

1. Analyze requirements — Review

   package.json

   , module system, Node version, browser targets; confirm

   .js

   /

   .mjs

   /

   .cjs

   conventions
2. Design architecture — Plan modules, async flows, and error handling strategies
3. Implement — Write ES2023+ code with proper patterns and optimisations
4. 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 continuing
5. Test — Write comprehensive tests with Jest achieving 85%+ coverage; if coverage falls short, add missing cases and re-run. Confirm no unhandled Promise rejections

Reference Guide

Load detailed guidance based on context:

references/modern-syntax.md

references/async-patterns.md

references/modules.md

references/browser-apis.md

references/node-essentials.md

Constraints

MUST DO

• Use ES2023+ features exclusively
• Use

  X | null

  or

  X | undefined

  patterns
• Use optional chaining (

  ?.

  ) and nullish coalescing (

  ??

  )
• Use async/await for all asynchronous operations
• Use ESM (

  import

  /

  export

  ) for new projects
• Implement proper error handling with try/catch
• Add JSDoc comments for complex functions
• Follow functional programming principles

MUST NOT DO

• Use

  var

  (always use

  const

  or

  let

  )
• Use callback-based patterns (prefer Promises)
• Mix CommonJS and ESM in the same module
• Ignore memory leaks or performance issues
• Skip error handling in async functions
• Use synchronous I/O in Node.js
• Mutate function parameters
• Create blocking operations in the browser

Key Patterns with Examples

Async/Await Error Handling

// ✅ Correct — always handle async errors explicitly
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error("fetchUser failed:", err);
    return null;
  }
}

// ❌ Incorrect — unhandled rejection, no null guard
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Optional Chaining & Nullish Coalescing

// ✅ Correct
const city = user?.address?.city ?? "Unknown";

// ❌ Incorrect — throws if address is undefined
const city = user.address.city || "Unknown";

ESM Module Structure

// ✅ Correct — named exports, no default-only exports for libraries
// utils/math.mjs
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// consumer.mjs
import { add } from "./utils/math.mjs";

// ❌ Incorrect — mixing require() with ESM
const { add } = require("./utils/math.mjs");

Avoid var / Prefer const

// ✅ Correct
const MAX_RETRIES = 3;
let attempts = 0;

// ❌ Incorrect
var MAX_RETRIES = 3;
var attempts = 0;

Output Templates

When implementing JavaScript features, provide:

1. Module file with clean exports
2. Test file with comprehensive coverage
3. JSDoc documentation for public APIs
4. Brief explanation of patterns used