javascript-typescript_skill

Overview

This skill provides practical JavaScript and TypeScript development guidance, patterns, and configurations for ES6+, Node.js, React, and modern web frameworks. It focuses on robust TypeScript setup, common type patterns, modern JS idioms, React component and hook patterns, and Node.js module and error-handling conventions. Use it to accelerate front-end, back-end, and full-stack workflows with clear, production-ready examples.

How this skill works

It inspects typical project needs and supplies concrete patterns: a recommended TypeScript compiler configuration, utility types, discriminated unions, generics, and common ES2020+ idioms. It demonstrates React prop typing, custom hook structure, and Node.js ES module usage and runtime error handling. Use the examples directly in your codebase or adapt them to enforce stricter typing, predictable runtime behavior, and clearer component APIs.

When to use it

• Starting a new TypeScript project and needing a sensible tsconfig baseline
• Migrating JavaScript code to TypeScript to add type safety incrementally
• Designing typed React components, hooks, and reusable UI primitives
• Implementing backend services with Node.js and ES module patterns
• Standardizing utility types and common patterns across a monorepo

Best practices

• Enable strict compiler options and declaration outputs for library code
• Prefer discriminated unions for error/success flows and clear type narrowing
• Use utility types (Pick, Omit, Partial, Required) to avoid duplicating interfaces
• Favor ES module imports, top-level async handling, and explicit process-level error logging in Node
• Keep hooks generic and return tuples with as const to preserve tuple types

Example use cases

• Create a shared types package with Pick/Omit utilities and exported declaration files
• Implement a Result<T> pattern to unify API responses and simplify error handling
• Write a reusable useLocalStorage<T> hook with proper generic typing for UI state persistence
• Build a Node.js CLI or microservice using ES modules, node:fs/promises, and graceful unhandledRejection handling
• Migrate a React component library to stricter TypeScript settings and generate .d.ts for consumers