mcpField
J
javascript

javascript

github.com/htlin222Development7841 installsUpdated 3w ago
Repository

About javascript

A JavaScript and TypeScript development skill for writing modern code and handling async behavior, Node.js work, browser compatibility, and module questions. It provides patterns and examples for common language features and pitfalls.

Key features

  1. 01Modern JavaScript patterns
  2. 02TypeScript typing guidance
  3. 03Async debugging and optimization
  4. 04Node.js development patterns
  5. 05Browser compatibility guidance
  6. 06Common pitfalls and fixes

Use cases

  1. 01Resolve unhandled promises or race conditions
  2. 02Convert JavaScript code to TypeScript
  3. 03Choose module patterns for Node.js
  4. 04Address browser compatibility issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/htlin222/dotfiles --skill javascript

After installing, type/javascriptin Claude Code to confirm it loaded.

Details

From the project README

JavaScript Development

Write modern, clean JavaScript and TypeScript.

When to Use

  • Writing JavaScript/TypeScript code
  • Async debugging and optimization
  • Node.js development
  • Browser compatibility issues
  • Module system questions

Modern JavaScript Patterns

Async/Await
// Prefer async/await over promise chains
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    throw error;
  }
}

// Parallel execution
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// Error handling for multiple promises
const results = await Promise.allSettled([task1(), task2(), task3()]);
const succeeded = results.filter((r) => r.status === "fulfilled");
Destructuring and Spread
// Object destructuring with defaults
const { name, age = 0, ...rest } = user;

// Array methods
const active = users.filter((u) => u.active).map((u) => u.name);

// Object spread for immutable updates
const updated = { ...user, name: "New Name" };
Classes and Modules
// ES modules
export class UserService {
  #privateField; // Private field

  constructor(config) {
    this.#privateField = config.secret;
  }

  async getUser(id) {
    return await this.#fetch(`/users/${id}`);
  }
}

// Named and default exports
export { UserService };
export default UserService;

TypeScript Patterns

// Interfaces over types for objects
interface User {
  id: string;
  name: string;
  email?: string;
}

// Generics
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Utility types
type CreateUser = Omit<User, "id">;
type ReadonlyUser = Readonly<User>;

Node.js Patterns

// ESM in Node.js
import { readFile } from "fs/promises";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

// Streams for large files
import { createReadStream, createWriteStream } from "fs";
import { pipeline } from "stream/promises";

await pipeline(
  createReadStream("input"),
  transform,
  createWriteStream("output"),
);

Common Gotchas

  • this binding (use arrow functions or .bind())
  • Floating promises (always await or handle)
  • == vs === (always use ===)
  • Array mutation (map/filter return new arrays, sort mutates)

Examples

Input: "Fix async issue" Action: Check for unhandled promises, race conditions, proper error handling

Input: "Convert to TypeScript" Action: Add types, interfaces, fix type errors, configure tsconfig

Comments

Markdown supported