javascript-pro
Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility.
About this skill
The `javascript-pro` skill transforms an AI agent into a seasoned JavaScript expert, capable of handling complex modern JavaScript tasks. It provides deep understanding and implementation capabilities for ES6+ features, asynchronous programming patterns (including Promises and async/await), and Node.js specific APIs. This skill is adept at navigating the intricacies of the JavaScript event loop, ensuring optimal performance and robust error handling. It also addresses compatibility considerations across both browser and Node.js environments, enabling the agent to build, debug, and migrate JavaScript codebases effectively.
Best use case
This skill is designed for AI agents tasked with developing modern JavaScript solutions, refactoring legacy JS code to contemporary standards, or providing insights into complex asynchronous behaviors and performance issues in both Node.js and browser contexts.
Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility.
Users can expect well-structured, performant, and compatible JavaScript code, clear explanations of complex JS concepts, effective debugging insights for async issues, and successful modernization of legacy JavaScript codebases, all with robust error handling.
Practical example
Example input
Draft a modern Node.js module that securely fetches data from `https://api.example.com/data` using `async/await`, processes the JSON response, and ensures comprehensive error handling for network issues or malformed data. The module should also demonstrate how it could be adapted for a browser environment.
Example output
```javascript
// dataService.js
/**
* Fetches data from a given URL and handles errors gracefully.
* Supports both Node.js and browser environments.
* @param {string} url The URL to fetch data from.
* @returns {Promise<Object>} A promise that resolves with the parsed JSON data.
*/
async function fetchData(url) {
try {
// Ensure fetch API is available (Node.js might need a polyfill or specific version)
if (typeof fetch === 'undefined' && typeof require !== 'undefined') {
// This is a basic example; for production, consider a robust polyfill or node-fetch package
global.fetch = await import('node-fetch');
}
const response = await fetch(url, {
method: 'GET',
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
// Handle non-2xx HTTP responses
const errorBody = await response.text();
throw new Error(`HTTP error! Status: ${response.status}. Message: ${errorBody.substring(0, 100)}...`);
}
const data = await response.json();
console.log('Successfully fetched and parsed data:', data);
return data;
} catch (error) {
console.error(`Error in fetchData from ${url}:`, error.message);
// Re-throw to allow further handling by the caller
throw error;
}
}
// Example usage for Node.js
if (typeof module !== 'undefined' && module.exports) {
const API_URL = 'https://api.example.com/data';
fetchData(API_URL)
.then(processedData => {
console.log('Node.js: Data processing complete.');
// Further Node.js specific logic here
})
.catch(err => {
console.error('Node.js: Failed to retrieve data:', err.message);
});
module.exports = fetchData; // Export for potential re-use
}
// Example usage for Browser (assuming this script is loaded in HTML)
// if (typeof window !== 'undefined' && typeof document !== 'undefined') {
// document.addEventListener('DOMContentLoaded', () => {
// const BROWSER_API_URL = '/api/data'; // Relative path for browser
// fetchData(BROWSER_API_URL)
// .then(processedData => {
// const outputElement = document.getElementById('data-output');
// if (outputElement) {
// outputElement.textContent = JSON.stringify(processedData, null, 2);
// console.log('Browser: Data displayed.');
// }
// })
// .catch(err => {
// console.error('Browser: Failed to display data:', err.message);
// const outputElement = document.getElementById('data-output');
// if (outputElement) {
// outputElement.textContent = 'Error loading data: ' + err.message;
// }
// });
// });
// }
```
**Explanation:**
The AI agent has generated a `dataService.js` module designed for both Node.js and browser environments. It utilizes `async/await` for cleaner asynchronous data fetching from `https://api.example.com/data`. Key aspects include:
1. **Error Handling:** A `try...catch` block wraps the `fetch` operation, catching network errors and `response.ok` checks for HTTP errors, providing informative messages.
2. **JSON Parsing:** It explicitly awaits `response.json()` to parse the response body.
3. **Cross-Environment Compatibility:** The `if (typeof module !== 'undefined' && module.exports)` block ensures the Node.js specific execution path, including a comment about `node-fetch` for older Node.js versions or scenarios where `fetch` is not globally available. A commented-out section shows how the same `fetchData` function could be integrated into a browser's DOMContentLoaded event.
4. **Readability:** The use of `async/await` makes the asynchronous flow look like synchronous code, improving readability and maintainability.When to use this skill
- Building modern JavaScript applications for Node.js environments or web browsers.
- Debugging intricate asynchronous behavior, event loops, or performance bottlenecks in JavaScript code.
- Migrating or refactoring legacy JavaScript codebases to leverage modern ES6+ features and best practices.
When not to use this skill
- When the task specifically requires TypeScript architecture guidance or advanced type system design.
- When working in programming runtimes or environments other than JavaScript (e.g., Python, Java, Go).
- When the task necessitates broad backend architecture decisions beyond the scope of Node.js API usage.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/javascript-pro/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How javascript-pro Compares
| Feature / Agent | javascript-pro | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | medium | N/A |
Frequently Asked Questions
What does this skill do?
Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as medium. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
AI Agent for YouTube Script Writing
Find AI agent skills for YouTube script writing, video research, content outlining, and repeatable channel production workflows.
SKILL.md Source
You are a JavaScript expert specializing in modern JS and async programming. ## Use this skill when - Building modern JavaScript for Node.js or browsers - Debugging async behavior, event loops, or performance - Migrating legacy JS to modern ES standards ## Do not use this skill when - You need TypeScript architecture guidance - You are working in a non-JS runtime - The task requires backend architecture decisions ## Instructions 1. Identify runtime targets and constraints. 2. Choose async patterns and module system. 3. Implement with robust error handling. 4. Validate performance and compatibility. ## Focus Areas - ES6+ features (destructuring, modules, classes) - Async patterns (promises, async/await, generators) - Event loop and microtask queue understanding - Node.js APIs and performance optimization - Browser APIs and cross-browser compatibility - TypeScript migration and type safety ## Approach 1. Prefer async/await over promise chains 2. Use functional patterns where appropriate 3. Handle errors at appropriate boundaries 4. Avoid callback hell with modern patterns 5. Consider bundle size for browser code ## Output - Modern JavaScript with proper error handling - Async code with race condition prevention - Module structure with clean exports - Jest tests with async test patterns - Performance profiling results - Polyfill strategy for browser compatibility Support both Node.js and browser environments. Include JSDoc comments.
Related Skills
n8n-code-javascript
Write JavaScript code in n8n Code nodes. Use when writing JavaScript in n8n, using $input/$json/$node syntax, making HTTP requests with $helpers, working with dates using DateTime, troubleshooting Code node errors, or choosing between Code node modes.
java-pro
Master Java 21+ with modern features like virtual threads, pattern matching, and Spring Boot 3.x. Expert in the latest Java ecosystem including GraalVM, Project Loom, and cloud-native patterns.
haskell-pro
Expert Haskell engineer specializing in advanced type systems, pure
cpp-pro
Write idiomatic C++ code with modern features, RAII, smart pointers, and STL algorithms. Handles templates, move semantics, and performance optimization.
c-pro
Write efficient C code with proper memory management, pointer
javascript-typescript-typescript-scaffold
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
javascript-mastery
33+ essential JavaScript concepts every developer should know, inspired by [33-js-concepts](https://github.com/leonardomso/33-js-concepts).
nft-standards
Master ERC-721 and ERC-1155 NFT standards, metadata best practices, and advanced NFT features.
nextjs-app-router-patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
new-rails-project
Create a new Rails project
networkx
NetworkX is a Python package for creating, manipulating, and analyzing complex networks and graphs.
network-engineer
Expert network engineer specializing in modern cloud networking, security architectures, and performance optimization.