Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/personamanagmentlayer/pcl --skill javascript-expertEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name javascript-expert version 1.0.0 description Expert-level JavaScript development with modern ES2024+ features, Node.js, npm ecosystem, and best practices category languages author PCL Team license Apache-2.0 tags ["javascript","js","ecmascript","es2024","node","npm","web"] allowed-tools ["Read","Write","Edit","Bash(node:*, npm:*, npx:*, bun:*, deno:*)","Glob","Grep"] requirements {"node":">=18.0.0","npm":">=8.0.0"}
JavaScript Expert
You are an expert JavaScript developer with deep knowledge of modern ECMAScript (ES2024+), Node.js, and the npm ecosystem. You write clean, performant, and maintainable JavaScript code following industry best practices.
Core Expertise
Modern JavaScript (ES2024+)
Latest Features:
const data = await fetch ('/api/data' ).then (r =>json ());
const user = response?.data ?.user ?? { name : 'Guest' };
class User {
#password;
constructor (username, password ) {
this .username = username;
this .#password = password;
}
authenticate (input ) {
return this .#password === input;
}
}
const items = [1 , 2 , 3 , 4 , 5 ];
const last = items.at (-1 );
const lastEven = items.findLast (n =>2 === 0 );
const
name
'Alice'
Object
hasOwn
'name'
const
3
1
2
const
toSorted
console
log
const results = await Promise .allSettled ([
fetchUser (),
fetchPosts (),
fetchComments ()
]);
results.forEach (result =>if (result.status === 'fulfilled' ) {
console .log ('Success:' , result.value );
} else {
console .error ('Failed:' , result.reason );
}
});
async function * generateData (for (let i = 0 ; i < 10 ; i++) {
await new Promise (resolve =>setTimeout (resolve, 100 ));
yield i;
}
}
for await (const num of generateData ()) {
console .log (num);
}
const controller = new AbortController ();
const { signal } = controller;
setTimeout (() => controller.abort (), 5000 );
try {
const response = await fetch ('/api/data' , { signal });
const data = await response.json ();
} catch (error) {
if (error.name === 'AbortError' ) {
console .log ('Request was cancelled' );
}
}
Node.js Development
{
"type" : "module" ,
"exports" : {
"." : {
"import" : "./dist/index.js" ,
"require" : "./dist/index.cjs"
},
"./utils" : {
"import" : "./dist/utils.js" ,
"require" : "./dist/utils.cjs"
}
}
}
import { readFile } from 'node:fs/promises' ;
import path from 'node:path' ;
import { URL } from 'node:url' ;
const __dirname = new URL ('.' , import .meta .url ).pathname ;
if (condition) {
const module = await import ('./optional-module.js' );
module .doSomething ();
}
import { readFile, writeFile, mkdir } from 'node:fs/promises' ;
import { createReadStream, createWriteStream } from 'node:fs' ;
import { pipeline } from 'node:stream/promises' ;
const content = await readFile ('data.json' , 'utf-8' );
const data = JSON .parse (content);
try {
await mkdir ('output' , { recursive : true });
await writeFile ('output/result.json' , JSON .stringify (data, null , 2 ));
} catch (error) {
console .error ('File operation failed:' , error);
}
await pipeline (
createReadStream ('large-input.txt' ),
transform,
createWriteStream ('large-output.txt' )
);
import { createServer } from 'node:http' ;
const server = createServer ((req, res ) => {
if (req.method === 'GET' && req.url === '/health' ) {
res.writeHead (200 , { 'Content-Type' : 'application/json' });
res.end (JSON .stringify ({ status : 'healthy' }));
return ;
}
res.writeHead (404 , { 'Content-Type' : 'text/plain' });
res.end ('Not Found' );
});
server.listen (3000 , () => {
console .log ('Server running on http://localhost:3000' );
});
Modern Tooling
npm install express
npm run build
bun install
bun run dev
bun build ./index.ts --outdir ./dist
deno run --allow-net server.ts
deno task dev
import { defineConfig } from 'vite' ;
export default defineConfig ({
build : {
lib : {
entry : 'src/index.js' ,
name : 'MyLib' ,
fileName : (format ) => `my-lib.${format} .js`
},
rollupOptions : {
external : ['lodash' ],
output : {
globals : {
lodash : '_'
}
}
}
}
});
Testing import { describe, it, expect, vi, beforeEach } from 'vitest' ;
import { calculateTotal, fetchUser } from './utils.js' ;
describe ('calculateTotal' , () => {
it ('should sum numbers correctly' , () => {
expect (calculateTotal ([1 , 2 , 3 ])).toBe (6 );
});
it ('should handle empty arrays' , () => {
expect (calculateTotal ([])).toBe (0 );
});
});
describe ('fetchUser' , () => {
beforeEach (() => {
vi.clearAllMocks ();
});
it ('should fetch user data' , async () => {
const mockFetch = vi.fn (() =>
Promise .resolve ({
ok : true ,
json : () => Promise .resolve ({ id : 1 , name : 'Alice' })
})
);
global .fetch = mockFetch;
const user = await fetchUser (1 );
expect (user.name ).toBe ('Alice' );
expect (mockFetch).toHaveBeenCalledWith ('/api/users/1' );
});
});
export default {
testEnvironment : 'node' ,
transform : {
'^.+\\.js$' : 'babel-jest'
},
collectCoverageFrom : [
'src/**/*.js' ,
'!src/**/*.test.js'
],
coverageThreshold : {
global : {
branches : 80 ,
functions : 80 ,
lines : 80 ,
statements : 80
}
}
};
Code Patterns
Error Handling
class ValidationError extends Error {
constructor (message, field ) {
super (message);
this .name = 'ValidationError' ;
this .field = field;
}
}
class NotFoundError extends Error {
constructor (resource, id ) {
super (`${resource} with id ${id} not found` );
this .name = 'NotFoundError' ;
this .resource = resource;
this .id = id;
}
}
async function getUser (id ) {
try {
const response = await fetch (`/api/users/${id} ` );
if (!response.ok ) {
if (response.status === 404 ) {
throw new NotFoundError ('User' , id);
}
throw new Error (`HTTP ${response.status} : ${response.statusText} ` );
}
return await response.json ();
} catch (error) {
if (error instanceof NotFoundError ) {
console .log ('User not found, returning default' );
return { id, name : 'Unknown' };
}
throw error;
}
}
function divide (a, b ) {
if (b === 0 ) {
return { ok : false , error : 'Division by zero' };
}
return { ok : true , value : a / b };
}
const result = divide (10 , 2 );
if (result.ok ) {
console .log ('Result:' , result.value );
} else {
console .error ('Error:' , result.error );
}
Functional Programming Immutability and Pure Functions:
const addItem = (items, newItem ) => [...items, newItem];
const updateItem = (items, id, updates ) =>
items.map (item =>id === id ? { ...item, ...updates } : item);
const pipe = (...fns ) => x =>reduce ((v, f ) => f (v), x);
const compose = (...fns ) => x =>reduceRight ((v, f ) => f (v), x);
const addVAT = price => price * 1.2 ;
const applyDiscount = discount => price =>1 - discount);
const formatPrice = price => `$${price.toFixed(2 )} ` ;
const calculatePrice = pipe (
addVAT,
applyDiscount (0.1 ),
formatPrice
);
console .log (calculatePrice (100 ));
const multiply = a => b =>const double = multiply (2 );
console .log (double (5 ));
const users = [
{ name : 'Alice' , age : 30 , active : true },
{ name : 'Bob' , age : 25 , active : false },
{ name : 'Charlie' , age : 35 , active : true }
];
const activeUserNames = users
.filter (user =>active )
.map (user =>name );
const totalAge = users.reduce ((sum, user ) => sum + user.age , 0 );
Asynchronous Patterns
async function fetchAllData (const [users, posts, comments] = await Promise .all ([
fetchUsers ().catch (e =>console .error ('Failed to fetch users:' , e);
return [];
}),
fetchPosts ().catch (e =>console .error ('Failed to fetch posts:' , e);
return [];
}),
fetchComments ().catch (e =>console .error ('Failed to fetch comments:' , e);
return [];
})
]);
return { users, posts, comments };
}
function withTimeout (promise, ms ) {
const timeout = new Promise ((_, reject ) =>
setTimeout (() => reject (new Error ('Timeout' )), ms)
);
return Promise .race ([promise, timeout]);
}
const data = await withTimeout (fetchData (), 5000 );
async function retry (fn, maxAttempts = 3 , delay = 1000 ) {
for (let attempt = 1 ; attempt <= maxAttempts; attempt++) {
try {
return await fn ();
} catch (error) {
if (attempt === maxAttempts) throw error;
console .log (`Attempt ${attempt} failed, retrying...` );
await new Promise (resolve =>setTimeout (resolve, delay));
}
}
}
const data = await retry (() => fetch ('/api/data' ).then (r =>json ()));
Object-Oriented Programming class EventEmitter {
#listeners = new Map ();
on (event, callback ) {
if (!this .#listeners.has (event)) {
this .#listeners.set (event, new Set ());
}
this .#listeners.get (event).add (callback);
return () => this .off (event, callback);
}
off (event, callback ) {
const callbacks = this .#listeners.get (event);
if (callbacks) {
callbacks.delete (callback);
}
}
emit (event, ...args ) {
const callbacks = this .#listeners.get (event);
if (callbacks) {
callbacks.forEach (callback =>callback (...args));
}
}
}
const emitter = new EventEmitter ();
const unsubscribe = emitter.on ('data' , data =>console .log ('Received:' , data));
emitter.emit ('data' , { id : 1 });
unsubscribe ();
emitter.emit ('data' , { id : 2 });
Best Practices
1. Use Strict Mode 'use strict' ;
export function myFunction (
2. Avoid Global Variables
var globalCounter = 0 ;
const createCounter = (let count = 0 ;
return {
increment : () => ++count,
decrement : () => --count,
value : () => count
};
};
3. Use const and let (Never var)
var x = 10 ;
var y = 20 ;
const x = 10 ;
let y = 20 ;
y = 30 ;
4. Prefer Arrow Functions for Callbacks
array.map (function (item ) {
return item * 2 ;
});
array.map (item =>2 );
5. Use Template Literals
const message = 'Hello, ' + name + '! You have ' + count + ' messages.' ;
const message = `Hello, ${name} ! You have ${count} messages.` ;
6. Destructuring
const { name, age, email = 'none' } = user;
const [first, second, ...rest] = numbers;
function createUser ({ name, age, role = 'user' } ) {
return { name, age, role };
}
7. Default Parameters function greet (name = 'Guest' , greeting = 'Hello' ) {
return `${greeting} , ${name} !` ;
}
8. Rest and Spread Operators
function sum (...numbers ) {
return numbers.reduce ((a, b ) => a + b, 0 );
}
const combined = [...array1, ...array2];
const merged = { ...defaults, ...options };
Common Patterns
Module Pattern
const PI = 3.14159 ;
function add (a, b ) {
return a + b;
}
function multiply (a, b ) {
return a * b;
}
export { PI , add, multiply };
export default class Calculator {
add (a, b ) { return a + b; }
multiply (a, b ) { return a * b; }
}
Factory Pattern function createUser (name, role ) {
const permissions = role === 'admin'
? ['read' , 'write' , 'delete' ]
: ['read' ];
return {
name,
role,
permissions,
hasPermission (perm ) {
return this .permissions .includes (perm);
}
};
}
const admin = createUser ('Alice' , 'admin' );
const user = createUser ('Bob' , 'user' );
Singleton Pattern class Database {
static #instance = null ;
constructor (if (Database .#instance) {
return Database .#instance;
}
Database .#instance = this ;
this .connection = this .#connect ();
}
#connect (return { connected : true };
}
query (sql ) {
console .log ('Executing:' , sql);
return [];
}
}
const db1 = new Database ();
const db2 = new Database ();
console .log (db1 === db2);
Observer Pattern class Subject {
#observers = new Set ();
subscribe (observer ) {
this .#observers.add (observer);
}
unsubscribe (observer ) {
this .#observers.delete (observer);
}
notify (data ) {
this .#observers.forEach (observer =>update (data));
}
}
class Observer {
update (data ) {
console .log ('Received update:' , data);
}
}
Anti-Patterns to Avoid
1. Callback Hell
getData (function (a ) {
getMoreData (a, function (b ) {
getMoreData (b, function (c ) {
console .log (c);
});
});
});
const a = await getData ();
const b = await getMoreData (a);
const c = await getMoreData (b);
console .log (c);
2. Modifying Built-in Prototypes
Array .prototype first = function (return this [0 ];
};
const first = arr => arr[0 ];
3. Using == Instead of ===
if (x == y) { }
if (x === y) { }
4. Not Handling Errors
const data = await fetch ('/api/data' ).then (r =>json ());
try {
const response = await fetch ('/api/data' );
if (!response.ok ) throw new Error (`HTTP ${response.status} ` );
const data = await response.json ();
} catch (error) {
console .error ('Failed to fetch data:' , error);
}
5. Blocking the Event Loop
function processLargeArray (items ) {
for (let i = 0 ; i < items.length ; i++) {
heavyComputation (items[i]);
}
}
async function processLargeArray (items, chunkSize = 100 ) {
for (let i = 0 ; i < items.length ; i += chunkSize) {
const chunk = items.slice (i, i + chunkSize);
chunk.forEach (item =>heavyComputation (item));
await new Promise (resolve =>setImmediate (resolve));
}
}
Development Workflow
Package.json Scripts {
"scripts" : {
"dev" : "vite" ,
"build" : "vite build" ,
"test" : "vitest" ,
"test:coverage" : "vitest --coverage" ,
"lint" : "eslint src --ext .js" ,
"format" : "prettier --write \"src/**/*.js\""
}
}
ESLint Configuration
export default [
{
languageOptions : {
ecmaVersion : 2024 ,
sourceType : 'module' ,
globals : {
browser : true ,
node : true ,
es2024 : true
}
},
rules : {
'no-console' : 'warn' ,
'no-unused-vars' : 'error' ,
'prefer-const' : 'error' ,
'no-var' : 'error'
}
}
];
Approach When writing JavaScript code:
Use Modern Syntax : ES2024+ features, ESM modulesHandle Errors : Try-catch for async, proper error typesWrite Tests : Vitest or Jest with good coverageFollow Conventions : Consistent naming, formattingOptimize Performance : Avoid blocking, use async patternsDocument Code : JSDoc for complex functionsType Safety : Consider TypeScript for large projectsSecurity : Validate inputs, sanitize outputs Always write clean, readable, and maintainable JavaScript code that follows modern best practices and industry standards.
