playbooks

home / skills / jcastillotx / vibe-skeleton-app / javascript-best-practices

javascript-best-practices skill

/setup/skills/javascript-best-practices

This skill helps you write and review JavaScript code by applying best-practice guidelines across performance, async patterns, security, and modern features.

npx playbooks add skill jcastillotx/vibe-skeleton-app --skill javascript-best-practices

Review the files below or copy the command above to add this skill to your agents.

Files (30)
SKILL.md
3.3 KB
---
name: javascript-best-practices
description: JavaScript coding standards and best practices. This skill should be used when writing, reviewing, or refactoring JavaScript code. Triggers on tasks involving vanilla JavaScript, DOM manipulation, async operations, or performance optimization.
trigger_patterns:
  - javascript
  - vanilla js
  - dom manipulation
  - event listener
  - promise
  - async/await
auto_load_with:
  - react-best-practices
  - nextjs-best-practices
---

# JavaScript Best Practices

Comprehensive coding standards for JavaScript development, optimized for AI agents and LLMs. Contains 24 rules across 8 categories, prioritized by impact.

## When to Apply

Reference these guidelines when:
- Writing vanilla JavaScript code
- Implementing async operations and promises
- Handling DOM manipulation
- Optimizing JavaScript performance
- Reviewing code for security issues
- Working with ES modules and modern features

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Performance | CRITICAL | `perf-` |
| 2 | Async Patterns | CRITICAL | `async-` |
| 3 | Security | HIGH | `security-` |
| 4 | Error Handling | HIGH | `error-` |
| 5 | ES Modules | MEDIUM-HIGH | `module-` |
| 6 | Data Structures | MEDIUM | `data-` |
| 7 | DOM Manipulation | MEDIUM | `dom-` |
| 8 | Modern Features | LOW-MEDIUM | `modern-` |

## Quick Reference

### 1. Performance (CRITICAL)
- `perf-avoid-memory-leaks` - Clean up event listeners and intervals
- `perf-dom-batch-updates` - Batch DOM updates with DocumentFragment
- `perf-debounce-throttle` - Debounce scroll/resize handlers
- `perf-avoid-layout-thrashing` - Separate reads and writes to DOM
- `perf-web-workers` - Use Web Workers for heavy computation

### 2. Async Patterns (CRITICAL)
- `async-promise-all` - Use Promise.all() for parallel operations
- `async-promise-allsettled` - Use allSettled() when some can fail
- `async-error-boundaries` - Handle promise rejections properly
- `async-avoid-nested-promises` - Flatten with async/await
- `async-cancellation` - Use AbortController for cancellable requests

### 3. Security (HIGH)
- `security-no-innerhtml` - Use textContent instead of innerHTML
- `security-no-eval` - Never use eval() or new Function()
- `security-sanitize-user-input` - Sanitize before DOM insertion
- `security-csp-compliance` - Write CSP-compliant code

### 4. Error Handling (HIGH)
- `error-custom-errors` - Create custom Error classes
- `error-async-try-catch` - Wrap async operations in try-catch
- `error-global-handler` - Implement window.onerror handler

### 5. ES Modules (MEDIUM-HIGH)
- `module-named-exports` - Prefer named exports for tree-shaking
- `module-barrel-files` - Avoid barrel files in performance-critical code
- `module-dynamic-imports` - Use dynamic imports for code splitting

### 6. Data Structures (MEDIUM)
- `data-map-over-object` - Use Map for dynamic key collections
- `data-set-for-uniqueness` - Use Set for unique value collections
- `data-immutable-updates` - Use spread operator for immutability

### 7. Modern Features (LOW-MEDIUM)
- `modern-optional-chaining` - Use ?. for safe property access

## How to Use

Read individual rule files for detailed explanations and code examples.

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

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.

FAQ

Will this skill change my code automatically?

No. It provides actionable recommendations and examples you can apply manually or integrate into automated linters and code review checks.

Which issues are highest priority?

Performance and async-pattern violations are treated as critical because they most directly affect user experience and reliability. Security and error handling are high priority as well.