javascript-pro
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.
- Installs
- 6.1K
- Last 24h
- +34
- Trending rank
- #4147
- Security
- Fail
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/jeffallan/claude-skills --skill javascript-pro- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads javascript-pro automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
- Analyze requirements — Review
package.json, module system, Node version, browser targets; confirm.js/.mjs/.cjsconventions - Design architecture — Plan modules, async flows, and error handling strategies
- Implement — Write ES2023+ code with proper patterns and optimisations
- 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 - 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
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:
- Module file with clean exports
- Test file with comprehensive coverage
- JSDoc documentation for public APIs
- Brief explanation of patterns used
Maintained by @jeffallan, Principal Consultant at Synergetic Solutions
FAQ
What does the javascript-pro skill do?
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.
How do I install javascript-pro?
Run npx skills add https://github.com/jeffallan/claude-skills --skill javascript-pro in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/javascript-pro/ (personal) or .claude/skills/javascript-pro/ (project).
Which AI agents can use javascript-pro?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is javascript-pro safe to install?
Security partners have reviewed it: Gen Agent Trust Hub flagged risks; Socket flagged items to review; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains javascript-pro?
It is published by jeffallan in jeffallan/claude-skills. It has 6,096 recorded installs.
More from jeffallan/claude-skills
laravel-specialist
jeffallan/claude-skills
Build and configure Laravel 10+ applications, including creating Eloquent models and relationships, implementing Sanctum authentication, configuring Horizon queues, designing RESTful APIs with API resources, and building reactive interfaces with Livewire. Use when creating Laravel models, setting up queue workers, implementing Sanctum auth flows, building Livewire components, optimising Eloquent queries, or writing Pest/PHPUnit tests for Laravel features.
golang-pro
jeffallan/claude-skills
Implements concurrent Go patterns using goroutines and channels, designs and builds microservices with gRPC or REST, optimizes Go application performance with pprof, and enforces idiomatic Go with generics, interfaces, and robust error handling. Use when building Go applications requiring concurrent programming, microservices architecture, or high-performance systems. Invoke for goroutines, channels, Go generics, gRPC integration, CLI tools, benchmarks, or table-driven testing.
php-pro
jeffallan/claude-skills
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typing, PHPStan level 9, async patterns with Swoole, and PSR standards. Creates controllers, configures middleware, generates migrations, writes PHPUnit/Pest tests, defines typed DTOs and value objects, sets up dependency injection, and scaffolds REST/GraphQL APIs. Use when working with Eloquent, Doctrine, Composer, Psalm, ReactPHP, or any PHP API development.
flutter-expert
jeffallan/claude-skills
Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
typescript-pro
jeffallan/claude-skills
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety. Use when building TypeScript applications requiring advanced generics, conditional or mapped types, discriminated unions, monorepo setup, or full-stack type safety with tRPC.
kubernetes-specialist
jeffallan/claude-skills
Use when deploying or managing Kubernetes workloads. Invoke to create deployment manifests, configure pod security policies, set up service accounts, define network isolation rules, debug pod crashes, analyze resource limits, inspect container logs, or right-size workloads. Use for Helm charts, RBAC policies, NetworkPolicies, storage configuration, performance optimization, GitOps pipelines, and multi-cluster management.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.