New to Claude Skills? Learn how to install them →

wshobson on GitHub

Modern JavaScript Patterns

Free

Master ES6+ features for clean, efficient JavaScript.

by wshobson38.7k stars on wshobson/agents
1 views
Updated Jul 18, 2026
Get this skill

Free · Opens the source repo

What Modern JavaScript Patterns does

The Modern JavaScript Patterns skill provides a comprehensive guide for developers looking to master the features introduced in ES6 and beyond. It covers essential concepts such as async/await, destructuring, spread operators, arrow functions, and promises, focusing on how to write clean, maintainable, and performant JavaScript code. This skill is particularly useful for those who are refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.

With detailed documentation available in the bundled references, this skill serves as a resource for both beginners and experienced developers. It emphasizes best practices such as using const by default, preferring arrow functions, and avoiding data mutation, which contribute to writing more reliable and readable code. The skill also addresses common pitfalls in JavaScript development, helping users to avoid issues related to this binding and promise anti-patterns.

Whether you're building modern web applications or migrating from callbacks to Promises and async/await, this skill provides the necessary tools and patterns to enhance your coding practices. By leveraging these modern JavaScript features, developers can significantly improve the quality of their code, making it easier to maintain and scale over time.

When to use it

Use this skill when refactoring legacy JavaScript code, implementing functional programming patterns, or optimizing performance in JavaScript applications.

When not to use it

This skill may not be suitable for projects that are already using modern JavaScript practices or for developers who are not familiar with JavaScript at all.

What you can build with it

Refactoring Legacy Code

Use this skill to update older JavaScript codebases by applying ES6+ features for improved readability and maintainability.

Implementing Functional Programming

Employ functional programming patterns from this skill to enhance code modularity and reusability in your applications.

Optimizing Performance

Utilize the best practices outlined in this skill to identify and implement performance optimizations in your JavaScript applications.

How to install Modern JavaScript Patterns

View source

1. Install with the skills CLI

npx skills add wshobson/agents/modern-javascript-patterns --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by wshobson

Modern JavaScript Patterns

Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.

When to Use This Skill

  • Refactoring legacy JavaScript to modern syntax
  • Implementing functional programming patterns
  • Optimizing JavaScript performance
  • Writing maintainable and readable code
  • Working with asynchronous operations
  • Building modern web applications
  • Migrating from callbacks to Promises/async-await
  • Implementing data transformation pipelines

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

  1. Use const by default: Only use let when reassignment is needed
  2. Prefer arrow functions: Especially for callbacks
  3. Use template literals: Instead of string concatenation
  4. Destructure objects and arrays: For cleaner code
  5. Use async/await: Instead of Promise chains
  6. Avoid mutating data: Use spread operator and array methods
  7. Use optional chaining: Prevent "Cannot read property of undefined"
  8. Use nullish coalescing: For default values
  9. Prefer array methods: Over traditional loops
  10. Use modules: For better code organization
  11. Write pure functions: Easier to test and reason about
  12. Use meaningful variable names: Self-documenting code
  13. Keep functions small: Single responsibility principle
  14. Handle errors properly: Use try/catch with async/await
  15. Use strict mode: 'use strict' for better error catching

For common pitfalls (this binding, promise anti-patterns, memory leaks), see references/advanced-patterns.md.

Frequently asked questions about Modern JavaScript Patterns

Similar skills