JavaScript Platform Development Skill

A Claude Code skill for mastering modern JavaScript — covering ES2024+ features, async patterns, module systems, performance optimization, memory management, and cross-platform JavaScript development.

When to Use This Skill

Choose this skill when:

• Writing modern JavaScript with latest ECMAScript features
• Implementing complex async patterns (Promise.allSettled, async iterators)
• Optimizing JavaScript performance (memory, CPU, bundle size)
• Working with module systems (ESM, CJS, dynamic imports)
• Building cross-platform JavaScript (Node.js, browser, Deno, Bun)
• Debugging memory leaks and performance bottlenecks

Consider alternatives when:

• You need TypeScript-specific features (use a TypeScript skill)
• You need framework-specific guidance (use React/Vue/Angular skill)
• You need Node.js server-side patterns (use a Node.js skill)

Quick Start

Copy
# Check your Node.js version supports latest features
node --version  # Requires 20+ for most ES2024 features

# Enable ESM in Node.js
# Add to package.json: "type": "module"

Copy
// Modern JavaScript patterns (ES2024+)

// 1. Array grouping
const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];
const grouped = Object.groupBy(items, item => item.type);
// { fruit: [{...}, {...}], vegetable: [{...}] }

// 2. Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();

// 3. Pipeline operator (Stage 2, with Babel)
const result = input |> sanitize |> validate |> transform;

// 4. Structured clone for deep copying
const deep = structuredClone(original);

// 5. Top-level await in ESM
const config = await fetch('/config.json').then(r => r.json());

Core Concepts

Async Patterns

Pattern	Use Case	Example
Promise.all()	Parallel, fail-fast	Load multiple APIs simultaneously
Promise.allSettled()	Parallel, complete all	Batch operations with partial failure
Promise.race()	First to resolve/reject	Timeout pattern
Promise.any()	First to resolve	Fallback across multiple sources
Async Iterators	Sequential streaming	Process large files line by line
AbortController	Cancellation	Cancel fetch requests on navigation

Memory-Efficient Patterns

Copy
// Async iterator for large data processing
async function* readLargeFile(path) {
  const reader = fs.createReadStream(path);
  for await (const chunk of reader) {
    yield chunk.toString();
  }
}

// WeakRef for cache with automatic cleanup
class Cache {
  #entries = new Map();

  set(key, value) {
    this.#entries.set(key, new WeakRef(value));
  }

  get(key) {
    const ref = this.#entries.get(key);
    const value = ref?.deref();
    if (!value) this.#entries.delete(key);
    return value;
  }
}

// AbortController for cancellable operations
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 5s timeout

const response = await fetch(url, { signal: controller.signal });

Configuration

Parameter	Type	Default	Description
ecma_version	string	"2024"	Target ECMAScript version
module_system	string	"esm"	Module system: esm, cjs, auto
runtime	string	"node"	Target runtime: node, browser, deno, bun
strict_mode	boolean	true	Enforce strict mode
target_node	string	"20"	Minimum Node.js version
polyfill	boolean	false	Include polyfills for older runtimes

Best Practices

1. Use structuredClone for deep copying — stop using JSON.parse(JSON.stringify(obj)) for deep clones; structuredClone handles dates, maps, sets, and circular references correctly.

2. Use Promise.allSettled for batch operations — when processing multiple independent operations, allSettled completes all of them and reports individual results, unlike all which fails fast on the first rejection.

3. Prefer AbortController for cancellation — instead of timeout flags and boolean checks, use AbortController to cancel fetch requests, event listeners, and custom async operations cleanly.

4. Use private class fields (#field) for encapsulation — #private fields are truly private at the language level, unlike _convention which is just a naming hint that can be accessed by anyone.

5. Process large data with async iterators — instead of loading entire files into memory, use for await...of with readable streams to process data chunk by chunk with constant memory usage.

Common Issues

ESM and CJS module conflicts — Mixing import and require causes errors. Set "type": "module" in package.json for ESM. Use dynamic import() to load CJS modules from ESM. Use .mjs and .cjs extensions for explicit module type.

Memory leaks from event listeners — Event listeners hold references to their closure scope. Always call removeEventListener in cleanup functions, and use { once: true } for one-shot listeners.

Unexpected this binding in callbacks — Arrow functions inherit this from their enclosing scope; regular functions get their own this. Use arrow functions for callbacks and method references to avoid binding issues.