Install to Claude Code
npx -y skills add https://github.com/siviter-xyz/dot-agent --skill typescriptDescription
typescript
SKILL.md
--- name: typescript description: TypeScript standards and best practices with modern tooling. Use when working with TypeScript or TypeScript React files. --- # TypeScript Guidelines Standards and best practices for TypeScript development with modern tooling. Follow these guidelines when writing or modifying TypeScript code. ## Design Principles Apply DRY, KISS, and SOLID consistently. Prefer functional approaches where relevant; use classes for stateful behavior. Use composition over inheritance. Each module should have a single responsibility. Use dependency injection for class dependencies. ## Code Style - **Naming**: Descriptive yet concise names for variables, functions, and classes - **Documentation**: JSDoc comments for public APIs, complex logic, and non-obvious design decisions - **Type annotations**: Be explicit with typing to reduce inference time; avoid `any` unless necessary - **Imports**: Avoid barrel exports to prevent circular dependencies; prefer direct imports ## Type Safety - **Strict TypeScript**: Use strict mode with proper type definitions. Use type-safe patterns like Zod schemas for validation and type-safe DOM helpers where applicable. - **Avoid `any`**: Use `unknown` instead of `any` when the type is truly unknown. Narrow types appropriately. - **Type inference**: Be explicit with typing to reduce inference time and improve clarity ## Type Patterns - **Union types**: Use union types for values that can be one of several types - **Discriminated unions**: Use discriminated unions for type-safe state machines - **Generic constraints**: Use generic constraints to ensure type safety - **Utility types**: Leverage TypeScript utility types (Pick, Omit, Partial, etc.) ## Architecture ### Module Organization - Each module focuses on one concern with clear boundaries - Extract reusable functions to avoid duplication - Design for reusability across contexts - Co-locate types with their usage or in dedicated type files - Keep types at appropriate module boundaries ### Dependency Management - Use dependency injection for testability - Prefer composition over inheritance - Keep dependencies minimal and focused ## Testing ### Structure - Tests mirror `src/` directory structure - Test files: `*.test.ts` or `*.spec.ts` - Use descriptive test names - Always check for appropriate unit tests when changing code ### Quality - Use AAA (Arrange, Act, Assert) pattern - Tests should be useful, readable, concise, maintainable - Test edge cases and error conditions - Maintain test coverage for critical paths ### Tools - **Vitest**: Use Vitest for unit and integration tests (preferred over Jest) - Use `@vitest/coverage-v8` for coverage - Use `jsdom` for DOM testing when needed - Mock external dependencies appropriately - **Playwright**: Use Playwright for end-to-end (E2E) tests ## Code Formatting and Linting ### Prettier - Use Prettier for consistent code formatting - Config: `printWidth: 120`, `singleQuote: true`, `jsxSingleQuote: true` - Run `pnpm format` to format code - Run `pnpm format:check` to check formatting ### ESLint - Use ESLint with TypeScript plugin - Use `@typescript-eslint/parser` and `@typescript-eslint/eslint-plugin` - Run `pnpm lint` to check linting - Run `pnpm lint:fix` to auto-fix issues ## Framework Recommendations ### For Non-Heavy Client Interaction - **Astro**: Excellent choice for content-focused sites, blogs, documentation - Minimal JavaScript by default - Static generation with server islands when needed - Great performance and SEO - TypeScript-first with excellent DX ### For Heavy Client Interaction - React, Svelte, or SolidJS with TypeScript - Choose based on team preference and project requirements ## Build Tools - **Vite**: Preferred build tool for development and production (unless directed otherwise) - **Modern Rust-based tooling**: Prefer Rolldown or other lower-level language tooling - Avoid Webpack and other older JavaScript-based bundlers unless specifically required ## Package Management - **pnpm**: Preferred package manager (faster, more efficient than npm/yarn) - Use `packageManager` field in package.json - Use pnpm workspaces for monorepos ## Implementation When implementing TypeScript code: - Ensure code passes type checking before committing - Group related changes with tests in atomic commits - Check for existing workflow patterns (spec-first, TDD, etc.) and follow them ## References For monorepo-specific patterns using pnpm, see `references/pnpm-monorepo.md`.