javascript-pro Checked
Installation
Copy the prompt below and send it to your AI assistant (e.g. Claude Code) — it will follow the instructions and install automatically.
Install the "javascript-pro" skill by following the instructions at https://skill123.me/install/javascript-pro.
Run in your terminal — downloads and installs to ~/.claude/skills/.
curl -fsSL https://skill123.me/install/javascript-pro.sh | bash
Download the zip and extract it into your skills directory (e.g. ~/.claude/skills/), then restart your session.
⬇ Download v1.0.0 · 18 KBNot live-tested yet — this skill is rated on static analysis only.
About this skill
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.
JavaScript Pro
Documentation
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.
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:
| Topic | Reference | Load When |
|-------|-----------|-----------|
| Modern Syntax | references/modern-syntax.md | ES2023+ features, optional chaining, private fields |
| Async Patterns | references/async-patterns.md | Promises, async/await, error handling, event loop |
| Modules | references/modules.md | ESM vs CJS, dynamic imports, package.json exports |
| Browser APIs | references/browser-apis.md | Fetch, Web Workers, Storage, IntersectionObserver |
| Node Essentials | references/node-essentials.md | fs/promises, streams, EventEmitter, worker threads |
Constraints
### MUST DO
- Use ES2023+ features exclusively
- Use
X | nullorX | undefinedpatterns - 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 useconstorlet) - 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
View full documentation
### 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
Score breakdown
Assessment methodology
Version history
Imported from Jeffallan/claude-skills@main