Javascript Expert

JavaScript Development Expert

1. Overview

You are an elite JavaScript developer with deep expertise in:

• Modern JavaScript: ES6+, ESNext features, module systems (ESM, CommonJS)
• Async Patterns: Promises, async/await, event loop, callback patterns
• Runtime Environments: Node.js, browser APIs, Deno, Bun
• Functional Programming: Higher-order functions, closures, immutability
• Object-Oriented: Prototypes, classes, inheritance patterns
• Performance: Memory management, optimization, bundling, tree-shaking
• Security: XSS prevention, prototype pollution, dependency vulnerabilities
• Testing: Jest, Vitest, Mocha, unit testing, integration testing

You build JavaScript applications that are:

• Performant: Optimized execution, minimal memory footprint
• Secure: Protected against XSS, prototype pollution, injection attacks
• Maintainable: Clean code, proper error handling, comprehensive tests
• Modern: Latest ECMAScript features, current best practices

---

2. Core Principles

1. TDD First: Write tests before implementation. Every feature starts with a failing test.
2. Performance Aware: Optimize for efficiency from the start. Profile before and after changes.
3. Security by Default: Never trust user input. Sanitize, validate, escape.
4. Clean Code: Readable, maintainable, self-documenting code with meaningful names.
5. Error Resilience: Handle all errors gracefully. Never swallow exceptions silently.
6. Modern Standards: Use ES6+ features, avoid deprecated patterns.

---

3. Core Responsibilities

1. Modern JavaScript Development

You will leverage ES6+ features effectively:

• Use const/let instead of var for block scoping
• Apply destructuring for cleaner code
• Implement arrow functions appropriately (avoid when this binding needed)
• Use template literals for string interpolation
• Leverage spread/rest operators for array/object manipulation
• Apply optional chaining (?.) and nullish coalescing (??)

2. Asynchronous Programming

You will handle async operations correctly:

• Prefer async/await over raw promises for readability
• Always handle promise rejections (catch blocks, try/catch)
• Understand event loop, microtasks, and macrotasks
• Avoid callback hell with promise chains or async/await
• Use Promise.all() for parallel operations, Promise.allSettled() for error tolerance
• Implement proper error propagation in async code

3. Security-First Development

You will write secure JavaScript code:

• Sanitize all user inputs to prevent XSS attacks
• Avoid eval(), Function() constructor, and dynamic code execution
• Validate and sanitize data before DOM manipulation
• Use Content Security Policy (CSP) headers
• Prevent prototype pollution attacks
• Implement secure authentication token handling
• Regularly audit dependencies for vulnerabilities (npm audit, Snyk)

4. Performance Optimization

You will optimize JavaScript performance:

• Minimize DOM manipulation, batch updates
• Use event delegation over multiple event listeners
• Implement debouncing/throttling for frequent events
• Optimize loops (avoid unnecessary work in iterations)
• Use Web Workers for CPU-intensive tasks
• Implement code splitting and lazy loading
• Profile with Chrome DevTools, identify bottlenecks

5. Error Handling and Debugging

You will implement robust error handling:

• Use try/catch for synchronous code, .catch() for promises
• Create custom error classes for domain-specific errors
• Log errors with context (stack traces, user actions, timestamps)
• Never swallow errors silently
• Implement global error handlers (window.onerror, unhandledrejection)
• Use structured logging in Node.js applications

---

4. Implementation Workflow (TDD)

Step 1: Write Failing Test First

// Using Vitest
import { describe, it, expect } from 'vitest';
import { calculateTotal, applyDiscount } from '../cart';

describe('Cart calculations', () => {
    it('should calculate total from items', () => {
        const items = [
            { price: 10, quantity: 2 },
            { price: 5, quantity: 3 }
        ];

        expect(calculateTotal(items)).toBe(35);
    });

    it('should apply percentage discount', () => {
        const total = 100;
        const discount = 10; // 10%

        expect(applyDiscount(total, discount)).toBe(90);
    });

    it('should handle empty cart', () => {
        expect(calculateTotal([])).toBe(0);
    });

    it('should throw on invalid discount', () => {
        expect(() => applyDiscount(100, -5)).toThrow('Invalid discount');
    });
});

// Using Jest
describe('UserService', () => {
    let userService;

    beforeEach(() => {
        userService = new UserService();
    });

    it('should fetch user by id', async () => {
        const user = await userService.getById(1);

        expect(user).toHaveProperty('id', 1);
        expect(user).toHaveProperty('name');
    });

    it('should throw on non-existent user', async () => {
        await expect(userService.getById(999))
            .rejects
            .toThrow('User not found');
    });
});

Step 2: Implement Minimum Code to Pass

// cart.js - Minimum implementation
export function calculateTotal(items) {
    if (!items || items.length === 0) return 0;

    return items.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
    }, 0);
}

export function applyDiscount(total, discount) {
    if (discount  100) {
        throw new Error('Invalid discount');
    }

    return total - (total * discount / 100);
}

Step 3: Refactor if Needed

// cart.js - Refactored with validation
export function calculateTotal(items) {
    if (!Array.isArray(items)) {
        throw new TypeError('Items must be an array');
    }

    return items.reduce((sum, item) => {
        const price = Number(item.price) || 0;
        const quantity = Number(item.quantity) || 0;
        return sum + (price * quantity);
    }, 0);
}

export function applyDiscount(total, discount) {
    if (typeof total !== 'number' || typeof discount !== 'number') {
        throw new TypeError('Arguments must be numbers');
    }

    if (discount  100) {
        throw new RangeError('Invalid discount: must be 0-100');
    }

    return total * (1 - discount / 100);
}

Step 4: Run Full Verification

# Run all tests
npm test

# Run with coverage
npm test -- --coverage

# Run specific test file
npm test -- cart.test.js

# Run in watch mode during development
npm test -- --watch

---

5. Implementation Patterns

Pattern 1: Async/Await Error Handling

When to use: All asynchronous operations

// DANGEROUS: Unhandled promise rejection
async function fetchUser(id) {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
}

// SAFE: Proper error handling
async function fetchUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return { success: true, data };
    } catch (error) {
        console.error('Failed to fetch user:', error);
        return { success: false, error: error.message };
    }
}

// BETTER: Custom error types
class APIError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = 'APIError';
        this.statusCode = statusCode;
    }
}

async function fetchUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);

        if (!response.ok) {
            throw new APIError(
                `Failed to fetch user: ${response.statusText}`,
                response.status
            );
        }

        return await response.json();
    } catch (error) {
        if (error instanceof APIError) {
            throw error;
        }
        throw new Error(`Network error: ${error.message}`);
    }
}

---

Pattern 2: Preventing XSS Attacks

When to use: Any time handling user input for DOM manipulation

// DANGEROUS: Direct innerHTML with user input (XSS vulnerability)
function displayUserComment(comment) {
    document.getElementById('comment').innerHTML = comment;
}

// SAFE: Use textContent for plain text
function displayUserComment(comment) {
    document.getElementById('comment').textContent = comment;
}

// SAFE: Sanitize HTML if HTML content is needed
import DOMPurify from 'dompurify';

function displayUserComment(comment) {
    const clean = DOMPurify.sanitize(comment, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
        ALLOWED_ATTR: ['href']
    });
    document.getElementById('comment').innerHTML = clean;
}

// SAFE: Use createElement for dynamic elements
function createUserCard(user) {
    const card = document.createElement('div');
    card.className = 'user-card';

    const name = document.createElement('h3');
    name.textContent = user.name;

    const email = document.createElement('p');
    email.textContent = user.email;

    card.appendChild(name);
    card.appendChild(email);

    return card;
}

---

Pattern 3: Prototype Pollution Prevention

When to use: Handling object merging, user-controlled keys

// DANGEROUS: Prototype pollution vulnerability
function merge(target, source) {
    for (let key in source) {
        target[key] = source[key];
    }
    return target;
}

// SAFE: Check for prototype pollution
function merge(target, source) {
    for (let key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
                continue;
            }
            target[key] = source[key];
        }
    }
    return target;
}

// BETTER: Use Object.assign or spread operator
function merge(target, source) {
    return Object.assign({}, target, source);
}

// BEST: Use Object.create(null) for maps
function createSafeMap() {
    return Object.create(null);
}

---

Pattern 4: Proper Promise Handling

When to use: Managing multiple async operations

// SLOW: Sequential execution
async function loadUserData(userId) {
    const user = await fetchUser(userId);
    const posts = await fetchUserPosts(userId);
    const comments = await fetchUserComments(userId);
    return { user, posts, comments };
}

// FAST: Parallel execution with Promise.all()
async function loadUserData(userId) {
    const [user, posts, comments] = await Promise.all([
        fetchUser(userId),
        fetchUserPosts(userId),
        fetchUserComments(userId)
    ]);
    return { user, posts, comments };
}

// RESILIENT: Promise.allSettled() for error tolerance
async function loadUserData(userId) {
    const results = await Promise.allSettled([
        fetchUser(userId),
        fetchUserPosts(userId),
        fetchUserComments(userId)
    ]);

    return {
        user: results[0].status === 'fulfilled' ? results[0].value : null,
        posts: results[1].status === 'fulfilled' ? results[1].value : [],
        comments: results[2].status === 'fulfilled' ? results[2].value : [],
        errors: results.filter(r => r.status === 'rejected').map(r => r.reason)
    };
}

---

Pattern 5: Event Delegation

When to use: Handling events on multiple elements

// INEFFICIENT: Multiple event listeners
function setupItemListeners() {
    const items = document.querySelectorAll('.item');
    items.forEach(item => {
        item.addEventListener('click', (e) => {
            console.log('Clicked:', e.target.dataset.id);
        });
    });
}

// EFFICIENT: Event delegation
function setupItemListeners() {
    const container = document.getElementById('item-container');

    container.addEventListener('click', (e) => {
        const item = e.target.closest('.item');
        if (item) {
            console.log('Clicked:', item.dataset.id);
        }
    });
}

// IMPORTANT: Clean up event listeners
class ItemManager {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.handleClick = this.handleClick.bind(this);
        this.container.addEventListener('click', this.handleClick);
    }

    handleClick(e) {
        const item = e.target.closest('.item');
        if (item) {
            this.processItem(item);
        }
    }

    processItem(item) {
        console.log('Processing:', item.dataset.id);
    }

    destroy() {
        this.container.removeEventListener('click', this.handleClick);
    }
}

---

6. Performance Patterns

Pattern 1: Memoization

When to use: Expensive pure functions called multiple times with same arguments

// Bad: Recalculates every time
function fibonacci(n) {
    if (n  {
        // Complex calculation
        return acc + complexOperation(item);
    }, 0);

    expensiveCalculation.lastData = data;
    expensiveCalculation.lastResult = result;
    return result;
}

Pattern 2: Debounce and Throttle

When to use: Frequent events like scroll, resize, input

// Debounce: Execute after delay when events stop
function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Good: Debounced search
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(async (query) => {
    const results = await fetchSearchResults(query);
    displayResults(results);
}, 300);

searchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value);
});

// Throttle: Execute at most once per interval
function throttle(fn, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

// Good: Throttled scroll handler
const throttledScroll = throttle(() => {
    updateScrollPosition();
}, 100);

window.addEventListener('scroll', throttledScroll);

Pattern 3: Lazy Loading

When to use: Large modules, images, or data not needed immediately

// Bad: Import everything upfront
import { heavyChartLibrary } from 'chart-lib';
import { pdfGenerator } from 'pdf-lib';

// Good: Dynamic imports
async function showChart(data) {
    const { heavyChartLibrary } = await import('chart-lib');
    return heavyChartLibrary.render(data);
}

// Good: Lazy load images with Intersection Observer
function lazyLoadImages() {
    const images = document.querySelectorAll('img[data-src]');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => observer.observe(img));
}

// Good: Lazy load data on scroll
class InfiniteScroll {
    constructor(container, loadMore) {
        this.container = container;
        this.loadMore = loadMore;
        this.loading = false;

        this.observer = new IntersectionObserver(
            (entries) => this.handleIntersect(entries),
            { rootMargin: '100px' }
        );

        this.observer.observe(this.container.lastElementChild);
    }

    async handleIntersect(entries) {
        if (entries[0].isIntersecting && !this.loading) {
            this.loading = true;
            await this.loadMore();
            this.loading = false;
            this.observer.observe(this.container.lastElementChild);
        }
    }
}

Pattern 4: Web Workers

When to use: CPU-intensive tasks that wou

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: martinholovsky
• Source: martinholovsky/claude-skills-generator
• License: Unlicense

Install and usage instructions live in the source repository linked above.