javascript-pro

Name: javascript-pro
Author: Jeffallan

4.3kinstalls971forks

How to install javascript-pro?

jeffallan/claude-skills/javascript-pro

$npx -y skills add Jeffallan/claude-skills --skill javascript-pro

Installs into the current project.

Summary

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 w

Files · 1

View on GitHub

SKILL.md

1	# JavaScript Pro
2
3	## When to Use This Skill
4
5	- Building vanilla JavaScript applications
6	- Implementing async/await patterns and Promise handling
7	- Working with modern module systems (ESM/CJS)
8	- Optimizing browser performance and memory usage
9	- Developing Node.js backend services
10	- Implementing Web Workers, Service Workers, or browser APIs
11
12	## Core Workflow
13
14	1. Analyze requirements — Review `package.json`, module system, Node version, browser targets; confirm `.js`/`.mjs`/`.cjs` conventions
15	2. Design architecture — Plan modules, async flows, and error handling strategies
16	3. Implement — Write ES2023+ code with proper patterns and optimisations
17	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
18	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
19
20	## Reference Guide
21
22	Load detailed guidance based on context:
23
24	\| Topic \| Reference \| Load When \|
25	\|-------\|-----------\|-----------\|
26	\| Modern Syntax \| `references/modern-syntax.md` \| ES2023+ features, optional chaining, private fields \|
27	\| Async Patterns \| `references/async-patterns.md` \| Promises, async/await, error handling, event loop \|
28	\| Modules \| `references/modules.md` \| ESM vs CJS, dynamic imports, package.json exports \|
29	\| Browser APIs \| `references/browser-apis.md` \| Fetch, Web Workers, Storage, IntersectionObserver \|
30	\| Node Essentials \| `references/node-essentials.md` \| fs/promises, streams, EventEmitter, worker threads \|
31
32	## Constraints
33
34	### MUST DO
35	- Use ES2023+ features exclusively
36	- Use `X \| null` or `X \| undefined` patterns
37	- Use optional chaining (`?.`) and nullish coalescing (`??`)
38	- Use async/await for all asynchronous operations
39	- Use ESM (`import`/`export`) for new projects
40	- Implement proper error handling with try/catch
41	- Add JSDoc comments for complex functions
42	- Follow functional programming principles
43
44	### MUST NOT DO
45	- Use `var` (always use `const` or `let`)
46	- Use callback-based patterns (prefer Promises)
47	- Mix CommonJS and ESM in the same module
48	- Ignore memory leaks or performance issues
49	- Skip error handling in async functions
50	- Use synchronous I/O in Node.js
51	- Mutate function parameters
52	- Create blocking operations in the browser
53
54	## Key Patterns with Examples
55
56	### Async/Await Error Handling
57	```js
58	// ✅ Correct — always handle async errors explicitly
59	async function fetchUser(id) {
60	try {
61	const response = await fetch(`/api/users/${id}`);
62	if (!response.ok) throw new Error(`HTTP ${response.status}`);
63	return await response.json();
64	} catch (err) {
65	console.error("fetchUser failed:", err);
66	return null;
67	}
68	}
69
70	// ❌ Incorrect — unhandled rejection, no null guard
71	async function fetchUser(id) {
72	const response = await fetch(`/api/users/${id}`);
73	return response.json();
74	}
75	```
76
77	### Optional Chaining & Nullish Coalescing
78	```js
79	// ✅ Correct
80	const city = user?.address?.city ?? "Unknown";
81
82	// ❌ Incorrect — throws if address is undefined
83	const city = user.address.city \|\| "Unknown";
84	```
85
86	### ESM Module Structure
87	```js
88	// ✅ Correct — named exports, no default-only exports for libraries
89	// utils/math.mjs
90	export const add = (a, b) => a + b;
91	export const multiply = (a, b) => a * b;
92
93	// consumer.mjs
94	import { add } from "./utils/math.mjs";
95
96	// ❌ Incorrect — mixing require() with ESM
97	const { add } = require("./utils/math.mjs");
98	```
99
100	### Avoid var / Prefer const
101	```js
102	// ✅ Correct
103	const MAX_RETRIES = 3;
104	let attempts = 0;
105
106	// ❌ Incorrect
107	var MAX_RETRIES = 3;
108	var attempts = 0;
109	```
110
111	## Output Templates
112
113	When implementing JavaScript features, provide:
114	1. Module file with clean exports
115	2. Test file with comprehensive coverage
116	3. JSDoc documentation for public APIs
117	4. Brief explanation of patterns used
118
119	[Documentation](https://jeffallan.github.io/claude-skills/skills/language/javascript-pro/)

People who liked this also viewed

6 picks

Type

javascript-pro

4.3kinstalls971forks

View on GitHub

How to install javascript-pro?

jeffallan/claude-skills/javascript-pro

$npx -y skills add Jeffallan/claude-skills --skill javascript-pro

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# JavaScript Pro
2
3	## When to Use This Skill
4
5	- Building vanilla JavaScript applications
6	- Implementing async/await patterns and Promise handling
7	- Working with modern module systems (ESM/CJS)
8	- Optimizing browser performance and memory usage
9	- Developing Node.js backend services
10	- Implementing Web Workers, Service Workers, or browser APIs
11
12	## Core Workflow
13
14	1. Analyze requirements — Review `package.json`, module system, Node version, browser targets; confirm `.js`/`.mjs`/`.cjs` conventions
15	2. Design architecture — Plan modules, async flows, and error handling strategies
16	3. Implement — Write ES2023+ code with proper patterns and optimisations
17	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
18	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
19
20	## Reference Guide
21
22	Load detailed guidance based on context:
23
24	\| Topic \| Reference \| Load When \|
25	\|-------\|-----------\|-----------\|
26	\| Modern Syntax \| `references/modern-syntax.md` \| ES2023+ features, optional chaining, private fields \|
27	\| Async Patterns \| `references/async-patterns.md` \| Promises, async/await, error handling, event loop \|
28	\| Modules \| `references/modules.md` \| ESM vs CJS, dynamic imports, package.json exports \|
29	\| Browser APIs \| `references/browser-apis.md` \| Fetch, Web Workers, Storage, IntersectionObserver \|
30	\| Node Essentials \| `references/node-essentials.md` \| fs/promises, streams, EventEmitter, worker threads \|
31
32	## Constraints
33
34	### MUST DO
35	- Use ES2023+ features exclusively
36	- Use `X \| null` or `X \| undefined` patterns
37	- Use optional chaining (`?.`) and nullish coalescing (`??`)
38	- Use async/await for all asynchronous operations
39	- Use ESM (`import`/`export`) for new projects
40	- Implement proper error handling with try/catch
41	- Add JSDoc comments for complex functions
42	- Follow functional programming principles
43
44	### MUST NOT DO
45	- Use `var` (always use `const` or `let`)
46	- Use callback-based patterns (prefer Promises)
47	- Mix CommonJS and ESM in the same module
48	- Ignore memory leaks or performance issues
49	- Skip error handling in async functions
50	- Use synchronous I/O in Node.js
51	- Mutate function parameters
52	- Create blocking operations in the browser
53
54	## Key Patterns with Examples
55
56	### Async/Await Error Handling
57	```js
58	// ✅ Correct — always handle async errors explicitly
59	async function fetchUser(id) {
60	try {
61	const response = await fetch(`/api/users/${id}`);
62	if (!response.ok) throw new Error(`HTTP ${response.status}`);
63	return await response.json();
64	} catch (err) {
65	console.error("fetchUser failed:", err);
66	return null;
67	}
68	}
69
70	// ❌ Incorrect — unhandled rejection, no null guard
71	async function fetchUser(id) {
72	const response = await fetch(`/api/users/${id}`);
73	return response.json();
74	}
75	```
76
77	### Optional Chaining & Nullish Coalescing
78	```js
79	// ✅ Correct
80	const city = user?.address?.city ?? "Unknown";
81
82	// ❌ Incorrect — throws if address is undefined
83	const city = user.address.city \|\| "Unknown";
84	```
85
86	### ESM Module Structure
87	```js
88	// ✅ Correct — named exports, no default-only exports for libraries
89	// utils/math.mjs
90	export const add = (a, b) => a + b;
91	export const multiply = (a, b) => a * b;
92
93	// consumer.mjs
94	import { add } from "./utils/math.mjs";
95
96	// ❌ Incorrect — mixing require() with ESM
97	const { add } = require("./utils/math.mjs");
98	```
99
100	### Avoid var / Prefer const
101	```js
102	// ✅ Correct
103	const MAX_RETRIES = 3;
104	let attempts = 0;
105
106	// ❌ Incorrect
107	var MAX_RETRIES = 3;
108	var attempts = 0;
109	```
110
111	## Output Templates
112
113	When implementing JavaScript features, provide:
114	1. Module file with clean exports
115	2. Test file with comprehensive coverage
116	3. JSDoc documentation for public APIs
117	4. Brief explanation of patterns used
118
119	[Documentation](https://jeffallan.github.io/claude-skills/skills/language/javascript-pro/)

People who liked this also viewed

6 picks

Type