typescript-tooling
npx mdskill add HoangNguyen0403/agent-skills-standard/typescript-tooling- **Compiler**: Use `tsc` for CI builds; `esbuild` or `ts-node` for development. - **Linting**: Enforce `ESLint` with `@typescript-eslint/recommended`. Enable strict type checking. - **Formatting**: Mandate `Prettier` via `lint-staged` and `.prettierrc`. - **Testing**: Use `Vitest` (or `Jest`) for unit/integration testing. Target > 80% line coverage. - **Builds**: Use `tsup` (library bundling) or `Vite` (web applications). - **TypeScript Config**: Aim for `strict: true` long-term. For existing projects, migrate incrementally: start with `strictNullChecks`, then `noImplicitAny`, `strictFunctionTypes`. Do NOT flip `strict: true` in one step. - **CI/CD**: Always run `tsc --noEmit` in build pipeline to catch type errors. - **Error Suppression**: Favor `@ts-expect-error` over `@ts-ignore` for documented edge-cases.
---
name: typescript-tooling
description: Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling.
metadata:
triggers:
files:
- 'tsconfig.json'
- '.eslintrc.*'
- 'jest.config.*'
- 'package.json'
keywords:
- eslint
- prettier
- jest
- vitest
- build
- compile
- lint
---
# TypeScript Tooling
## **Priority: P1 (OPERATIONAL)**
## Implementation Guidelines
- **Compiler**: Use `tsc` for CI builds; `esbuild` or `ts-node` for development.
- **Linting**: Enforce `ESLint` with `@typescript-eslint/recommended`. Enable strict type checking.
- **Formatting**: Mandate `Prettier` via `lint-staged` and `.prettierrc`.
- **Testing**: Use `Vitest` (or `Jest`) for unit/integration testing. Target > 80% line coverage.
- **Builds**: Use `tsup` (library bundling) or `Vite` (web applications).
- **TypeScript Config**: Aim for `strict: true` long-term. For existing projects, migrate incrementally: start with `strictNullChecks`, then `noImplicitAny`, `strictFunctionTypes`. Do NOT flip `strict: true` in one step.
- **CI/CD**: Always run `tsc --noEmit` in build pipeline to catch type errors.
- **Error Suppression**: Favor `@ts-expect-error` over `@ts-ignore` for documented edge-cases.
## ESLint Configuration
Enable `@typescript-eslint/recommended` at minimum. When `strict: false` in tsconfig, `no-unsafe-*` rules may produce excessive noise — suppress selectively with `@ts-expect-error` rather than disabling globally.
See [reference](references/REFERENCE.md) for common linting issues (request typing, unused params, test mock typing) and tsconfig migration examples.
## Verification Workflow (Mandatory)
After editing any `.ts` / `.tsx` file:
1. Call `getDiagnostics` (typescript-lsp MCP tool) — surfaces type errors in real time.
2. Run `tsc --noEmit` in CI — catches project-wide errors LSP may miss.
3. Run `eslint --fix` — auto-fix formatting and lint violations.
> **Fallback when typescript-lsp MCP unconfigured**: run `tsc --noEmit` directly.
`getDiagnostics` fastest feedback loop. Use it before every commit on modified files. Use `getHover` to inspect inferred types, `getReferences` before renaming symbols.
## Anti-Patterns
- **No `@ts-ignore`**: Use `@ts-expect-error` — self-documents intent, fails if error disappears.
- **No `any` for request objects**: Import centralized interfaces from `src/common/interfaces/`.
- **No `eslint-disable` (global)**: Suppress per-line; fix root cause instead.
- **No atomic `strict: true` flip** on existing repos: migrate incrementally starting with `strictNullChecks`.
## References
- [Config Examples & Linting Patterns](references/REFERENCE.md)
- android-agp-upgradeUpgrade an Android project to Android Gradle Plugin (AGP) 9. Use when migrating to AGP 9, updating Gradle build files, migrating to built-in Kotlin, or adopting the new AGP DSL.
- android-architectureApply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up project structure, placing code in layers, configuring feature/core modules, or implementing UDF patterns.
- android-background-workImplement WorkManager and background processing correctly on Android. Use when creating Worker classes, scheduling tasks, choosing between WorkManager and Foreground Services, or setting up Hilt in workers.
- android-composeBuild high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects.
- android-compose-migrationMigrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
- android-concurrencyWrite correct coroutine scopes, Flow collection, and dispatcher injection in Android. Use when writing suspend functions, choosing between StateFlow and SharedFlow, or injecting Dispatchers for testability.
- android-deploymentConfigure release signing, R8 obfuscation, and App Bundle publishing for Android. Use when setting up signing configs, enabling minification, adding ProGuard keep rules, or preparing for Play Store submission.
- android-design-systemEnforce Material Design 3 theming and design token usage in Jetpack Compose. Use when implementing M3 components, color schemes, typography, or design tokens.
- android-diConfigure Hilt dependency injection with proper scoping, modules, and constructor injection in Android. Use when setting up Hilt DI, defining modules, or configuring component scoping.
- android-edge-to-edgeMigrate a Jetpack Compose app to edge-to-edge display and fix system bar inset issues. Use when UI components are obscured by navigation/status bars, fixing IME insets, or enabling edge-to-edge for SDK 35+.