modern-javascript-patterns
Aplicar Patrones Modernos de JavaScript
Los bases de código de JavaScript heredados son difíciles de mantener y optimizar. Esta habilidad proporciona orientación completa sobre características ES6+ incluyendo funciones flecha, desestructuración, async/await, promesas, patrones de programación funcional y características modernas de clases para escribir código JavaScript limpio, eficiente y mantenible.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "modern-javascript-patterns". How do I destructure nested objects in JavaScript?
Resultado esperado:
Nested object destructuring allows you to extract values from deeply nested objects:
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Nested destructuring
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// With default values
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
Usando "modern-javascript-patterns". What's the difference between Promise.all and Promise.allSettled?
Resultado esperado:
Promise.all fails fast - if any promise rejects, the entire operation fails. Promise.allSettled waits for all promises to settle regardless of outcome:
```javascript
// Promise.all - fails on first rejection
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Throws if either fails
// Promise.allSettled - waits for all
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.log('Failed:', result.reason);
}
});
```
Auditoría de seguridad
SeguroThis is a documentation skill containing educational content about JavaScript ES6+ patterns. All static analysis findings are false positives. The 'weak cryptographic algorithm' flags are triggered by JavaScript template literals and class private field syntax (#). The 'shell backtick execution' flags are false positives from JavaScript template literals in code examples. The 'dynamic import()' detections are legitimate ES6 module examples being documented. No malicious code patterns exist.
Puntuación de calidad
Lo que puedes crear
Refactorizar Bases de Código de JavaScript Heredado
Migrar código basado en callbacks a patrones Promises y async/await. Reemplazar funciones tradicionales con funciones flecha para corregir problemas de enlace de 'this'. Aplicar desestructuración y operadores de propagación para simplificar la manipulación de datos.
Aprender Programación Funcional en JavaScript
Entender cómo usar map, filter y reduce para transformación de datos. Aprende a crear funciones puras que eviten efectos secundarios. Aplicar composición de funciones y piping para pipelines de procesamiento de datos legibles.
Escribir Código JavaScript Mantenible
Aplicar patrones modernos de JavaScript para código más limpio y expresivo. Usar organización adecuada de módulos y características de clases ES6. Implementar optimizaciones de rendimiento como debounce, throttling y evaluación diferida.
Prueba estos prompts
How do I use [feature] in modern JavaScript? Can you show me examples of [use case]?
I have this legacy JavaScript code: [code snippet]. How can I refactor it to use modern ES6+ patterns? What specific features should I apply?
I need to implement [specific async task]. Should I use Promises, async/await, or a combination? Show me the best practice pattern for [scenario] with proper error handling.
I have an array of objects: [data structure]. How can I use functional programming to [transform/group/filter/aggregate] this data? Show me step-by-step how to compose functions for this task.
Mejores prácticas
- Usa const por defecto y solo usa let cuando la reasignación sea verdaderamente necesaria. Esto previene mutaciones accidentales y hace más claro la intención del código.
- Prefiere funciones flecha para callbacks y métodos que necesiten enlace léxico de 'this'. Usa funciones tradicionales solo cuando necesites 'this' dinámico.
- Aplica desestructuración y operadores de propagación para manipulación de datos más limpia. Evita acceso directo a propiedades y mutación cuando sea posible.
Evitar
- Evita envolver funciones ya asíncronas en nuevas Promises. Si una función ya devuelve una Promise, úsala directamente con await.
- No mutes datos de entrada en las funciones. Siempre devuelve nuevos objetos o arrays usando operadores de propagación para mantener inmutabilidad.
- Evita pirámides de callbacks y encadenamiento excesivo de Promise. Usa async/await para mejor legibilidad y manejo de errores.
Preguntas frecuentes
¿Cuál es la diferencia entre funciones flecha y funciones tradicionales en JavaScript?
¿Cuándo debería usar async/await vs Promises directamente?
¿Cómo manejo errores con async/await?
¿Cuáles son los beneficios de la programación funcional en JavaScript?
¿Cuándo debería usar desestructuración vs acceso directo a propiedades?
¿Cuáles son las implicaciones de rendimiento de las características de JavaScript moderno?
Detalles del desarrollador
Autor
wshobsonLicencia
MIT
Repositorio
https://github.com/wshobson/agents/tree/main/plugins/javascript-typescript/skills/modern-javascript-patternsRef.
main
Estructura de archivos
📄 SKILL.md