
Modern JavaScript Patterns
FreeMaster ES6+ features for clean, efficient JavaScript.
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 source1. Install with the skills CLI
npx skills add wshobson/agents/modern-javascript-patterns --agent claude-code2. 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 wshobsonModern 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
- Use const by default: Only use let when reassignment is needed
- Prefer arrow functions: Especially for callbacks
- Use template literals: Instead of string concatenation
- Destructure objects and arrays: For cleaner code
- Use async/await: Instead of Promise chains
- Avoid mutating data: Use spread operator and array methods
- Use optional chaining: Prevent "Cannot read property of undefined"
- Use nullish coalescing: For default values
- Prefer array methods: Over traditional loops
- Use modules: For better code organization
- Write pure functions: Easier to test and reason about
- Use meaningful variable names: Self-documenting code
- Keep functions small: Single responsibility principle
- Handle errors properly: Use try/catch with async/await
- 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
React Composition Patterns
Streamline your React component architecture with proven patterns.
Pester Should Migration
Easily convert Pester v5 assertions to v6 syntax.
Radix to Base UI Migration
Seamlessly migrate React components from Radix UI to Base UI.
Migrate Next.js to Vinext
Seamlessly transition your Next.js projects to Vinext.
WinUI 3 Migration Guide
Streamline your UWP to WinUI 3 migration process.
Refactor
Enhance code maintainability without altering behavior.
