javascript-typescript

This skill provides specialized assistance for building and maintaining robust web applications using the modern JavaScript and TypeScript ecosystem. It is designed for software engineers, frontend developers, and full-stack architects who need to manage complex state, implement type-safe React patterns, and ensure high code quality through rigorous automated testing strategies. Whether you are scaffolding a new application with Vite, migrating legacy code, or optimizing performance, this agent offers structured support for both architectural design and daily implementation tasks.

• Expert-level TypeScript configuration: optimizing compilerOptions, strict mode settings, and path aliasing for modular development.

• Advanced type patterns: implementing discriminated unions, generic constraints, utility types like Pick and Omit, and custom type guards to ensure runtime safety.

• React 19+ best practices: architecting performant components, utilizing custom hooks for state sharing, and handling side effects via useEffect/useCallback.

• Testing suite automation: configuring and running unit tests with Vitest, coverage report analysis, and implementing comprehensive E2E testing workflows using Playwright for browser-based verification.

• Modern tooling integration: managing ES Modules, node: built-in module imports, and complex dependency graphs typical in contemporary frontend projects.

• Utilize this skill for refactoring existing React logic, debugging type mismatches, or setting up continuous integration workflows.

• When defining data structures, favor discriminated unions over loose interfaces to maximize the effectiveness of TypeScript's type-narrowing capabilities.

• Ensure all asynchronous logic in Node.js or browser-based fetch calls uses proper error handling patterns, such as try/catch blocks or unhandledRejection listeners.

• For Playwright automation, ensure the environment is configured to install necessary browser binaries (chromium/firefox) before executing test suites.

• Performance constraints: when working with heavy data processing, leverage browser-native APIs and efficient array methods like filter, map, and reduce to minimize main-thread blocking.

• Input/Output: Expect to provide source files or configuration snippets for targeted refactoring; the agent will return type-safe, production-ready code blocks and dependency recommendations.