Skip to main content
skill Claude Code CX Codex Cursor

modern-javascript-patterns — Claude Code skill: what it does

This skill applies modern ES6+ syntax and functional patterns to JavaScript. Use it for legacy refactors, async code, and data transformation pipelines.

Install into Claude Code · Plugin marketplace All methods and platforms ↓
/plugin marketplace add wshobson/agents
/plugin install javascript-typescript@claude-code-workflows
Open on GitHub

What modern-javascript-patterns does

The skill covers async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, and generators. It also guides functional programming patterns and data transformation pipelines, with advice aimed at readable and maintainable JavaScript.

Its recommendations include using const by default, template literals, optional chaining, nullish coalescing, array methods, pure functions, and small single-purpose functions. Worked examples are in references/details.md; references/advanced-patterns.md covers this binding, promise anti-patterns, and memory leaks.

Install it when you are modernizing legacy JavaScript or working with asynchronous operations. It is a poor fit for projects that do not use JavaScript.

What it helps with

  • replace callbacks with Promises and async/await
  • modernize legacy JavaScript with ES6+ syntax
  • build a data transformation pipeline
  • organize code with modules and pure functions
  • inspect this binding and promise pitfalls

Example prompts for the agent

  • Rewrite this callback code with async/await and handle errors with try/catch.
  • Review `src/data.js` and apply destructuring, optional chaining, and array methods.
  • Refactor this legacy code using the guidance from `modern-javascript-patterns`.

How to install modern-javascript-patterns

1Plugin marketplace

/plugin marketplace add wshobson/agents
/plugin install javascript-typescript@claude-code-workflows

This installs the whole javascript-typescript plugin with all its skills

2Skills CLI (Vercel)

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

3Manually: put the files in place

~/.claude/skills/modern-javascript-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/modern-javascript-patterns/

From the same set213

The whole set →
typescript-advanced-types Seth Hobson Guides an agent through advanced TypeScript types, from generics to conditional and mapped types. Use it for typed libraries, API clients, or strict configuration objects. Claude Code CX Codex Cursor 92,169installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs brand-landingpage Travis D. Elliott This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs python-testing-patterns Seth Hobson This skill guides Python testing with pytest, fixtures and mocks. Use it when building a test suite or tracking down failing checks. Claude Code CX Codex Cursor 36,943installs python-performance-optimization Seth Hobson This skill profiles Python code to locate CPU and memory bottlenecks. Use it when an application responds slowly or consumes too many resources. Claude Code CX Codex Cursor 35,675installs nextjs-app-router-patterns Seth Hobson This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. Claude Code CX Codex Cursor 32,529installs api-design-principles Seth Hobson Use this skill to plan or review REST and GraphQL APIs. It helps when writing a specification or setting API conventions for a team. Claude Code CX Codex Cursor 30,348installs code-review-excellence Seth Hobson This skill guides pull request reviews, catches logic and security issues, and helps teams give specific feedback. Use it for review standards or developer mentoring. Claude Code CX Codex Cursor 30,193installs

Similar

dataverse-python-quickstart official github Generates Python examples for the Microsoft Dataverse SDK, including setup, CRUD, bulk requests, and paged queries. Use it when building a Dataverse integration in Python. GitHub Copilot 8,700installs containerize-aspnet-framework official github This skill prepares a Windows-container Dockerfile for an ASP.NET .NET Framework project. Use it when the image needs project-specific IIS, dependency, or build settings. GitHub Copilot 8,700installs ruby-mcp-server-generator official github Generates a Ruby MCP server project using the official SDK. Use it when you want tools, prompts, resources, and tests in the initial project. GitHub Copilot 8,600installs add-lang colbymchenry Adds a new language to codegraph through tree-sitter, tests the extractor, and measures extraction and retrieval on real repositories. Claude Code CX Codex Cursor +1 1,200installs migrate-to-shoehorn Matt Pocock Replaces as type assertions in tests with helpers from @total-typescript/shoehorn. Use it when tests need partial objects or deliberately invalid data. Claude Code 475,388installs write-swift emilkowalski This skill guides Swift coding, reviews, and migrations using the language’s current practices. Use it to investigate concurrency errors, hangs, data races, or retain cycles. Claude Code CX Codex Cursor +1 117,500installs megacave JuliusBrussee Switches agent responses to Classical Chinese (wenyan) to reduce terminal output. Activated via /megacave or /caveman wenyan. Claude Code CX Codex Cursor +1 24,400installs find-docs upstash Pulls up-to-date documentation, API references and code examples for any library through the Context7 CLI. Useful when the model's training data lags behind the API. Claude Code CX Codex Cursor +1 9,400installs

Questions about modern-javascript-patterns

How do I install modern-javascript-patterns in Claude Code?

Add the marketplace with /plugin marketplace add wshobson/agents , then install the plugin with /plugin install javascript-typescript@claude-code-workflows . You can also add the skill with npx skills add wshobson/agents --skill modern-javascript-patterns -a claude-code.

What does modern-javascript-patterns do?

It guides JavaScript refactoring with ES6+ features and functional programming patterns. It is intended for legacy code, asynchronous work, modules, and data transformation.

Where are the worked examples and advanced pitfalls documented?

Worked examples are in references/details.md. The references/advanced-patterns.md file covers this binding, promise anti-patterns, and memory leaks.

Source text

SKILL.md · MIT
---
name: modern-javascript-patterns
description: Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
---

# 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](references/advanced-patterns.md).

© Seth Hobson · MIT · wshobson/agents

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor