javascript-best-practices_skill

Overview

This skill provides a concise, prioritized set of JavaScript coding standards and best practices for writing, reviewing, and refactoring code. It focuses on high-impact areas like performance, async patterns, and security to reduce bugs and improve maintainability. Use it to enforce consistent, modern JavaScript patterns across projects.

How this skill works

The skill inspects code and recommends rules from eight categories ranked by impact: Performance, Async Patterns, Security, Error Handling, ES Modules, Data Structures, DOM Manipulation, and Modern Features. It flags risky patterns (like innerHTML or eval), suggests safer alternatives (like textContent, AbortController), and proposes structural changes such as using Promise.all or Web Workers where appropriate. Recommendations are actionable and prioritized so you can fix the most critical issues first.

When to use it

• Writing vanilla JavaScript or single-file scripts
• Reviewing pull requests or refactoring legacy code
• Implementing asynchronous logic and network requests
• Optimizing DOM-heavy UI and performance hotspots
• Hardening code for security and CSP compliance

Best practices

• Prevent memory leaks: clean up event listeners, intervals, and DOM references.
• Use async/await and flatten promise chains; prefer Promise.all/Promise.allSettled for parallelism.
• Avoid eval and innerHTML; sanitize inputs and prefer textContent for DOM insertion.
• Batch DOM reads/writes and debounce/throttle frequent handlers to avoid layout thrashing.
• Prefer named exports and dynamic imports for code splitting and tree-shaking.

Example use cases

• Refactoring a dashboard to reduce jank by batching DOM updates and offloading heavy work to Web Workers.
• Reviewing an API client to add AbortController support and robust async error handling.
• Hardening a form handling flow by sanitizing inputs and removing innerHTML usage.
• Optimizing a large page by converting repeated object-key lookups to Map and using Set for uniqueness.
• Splitting a large bundle with dynamic imports and converting default-only exports to named exports for tree-shaking.