CtrlK
BlogDocsLog inGet started
Tessl Logo

pantheon-ai/typescript-advanced

Comprehensive TypeScript guidance covering compiler configuration, advanced types, utility types, type guards, strict mode workflows, and documentation patterns; use when configuring tsconfig, designing complex generics, making illegal states unrepresentable, fixing type errors, or writing testable and maintainable type-safe APIs.

Overall
score

99%

Does it follow best practices?

Validation for skill structure

Overview
Skills
Evals
Files

practices-module-patterns.mdreferences/

Module Organization Patterns

Single-Function Modules

// src/utils/formatDate.ts
export const formatDate = (date: Date): string => {
  return date.toISOString().split('T')[0];
};

// src/utils/parseDate.ts
export const parseDate = (str: string): Date => {
  return new Date(str);
};

// src/utils/index.ts (barrel export)
export { formatDate } from './formatDate.js';
export { parseDate } from './parseDate.js';

Feature-Based Organization

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   ├── types.ts
│   │   └── index.ts
│   ├── users/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   ├── types.ts
│   │   └── index.ts
│   └── dashboard/
│       ├── components/
│       ├── hooks/
│       ├── api/
│       ├── types.ts
│       └── index.ts
└── shared/
    ├── components/
    ├── hooks/
    └── utils/

Collocated Tests

src/
├── utils/
│   ├── formatDate.ts
│   ├── formatDate.test.ts
│   ├── parseDate.ts
│   └── parseDate.test.ts

Type-Only Exports

// types.ts
export type User = {
  id: string;
  name: string;
};

export type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

// consumer.ts
import type { User, Result } from './types.js';

Barrel Exports

// components/index.ts
export { Button } from './Button.js';
export { Input } from './Input.js';
export { Modal } from './Modal.js';
export type { ButtonProps } from './Button.js';
export type { InputProps } from './Input.js';

// Usage
import { Button, Input } from './components/index.js';
import type { ButtonProps } from './components/index.js';

Module Boundaries

// Good: Clear module boundaries
// auth/api.ts
export const login = async (credentials: Credentials): Promise<User> => {
  // ...
};

// auth/index.ts
export { login } from './api.js';
export type { Credentials, User } from './types.js';

// Bad: Leaky abstractions
// auth/index.ts
export { login } from './api.js';
export { validatePassword } from './internal/validation.js'; // Internal detail

Dependency Direction

// Good: Dependencies point inward
// domain/user.ts (core domain)
export type User = {
  id: string;
  email: string;
};

// api/userApi.ts (infrastructure)
import type { User } from '../domain/user.js';

export const fetchUser = async (id: string): Promise<User> => {
  // ...
};

// Bad: Core depends on infrastructure
// domain/user.ts
import { fetchUser } from '../api/userApi.js'; // Wrong direction

Facade Pattern

// database/index.ts (facade)
import { createConnection } from './connection.js';
import { createQueryBuilder } from './queryBuilder.js';
import { createMigrationRunner } from './migrations.js';

export const createDatabase = () => {
  const connection = createConnection();
  const queryBuilder = createQueryBuilder(connection);
  const migrationRunner = createMigrationRunner(connection);

  return {
    query: queryBuilder.query,
    execute: queryBuilder.execute,
    migrate: migrationRunner.run,
  };
};

// Usage
import { createDatabase } from './database/index.js';
const db = createDatabase();

Adapter Pattern

// ports/logger.ts (interface)
export interface Logger {
  info(message: string): void;
  error(message: string, error?: Error): void;
}

// adapters/consoleLogger.ts
import type { Logger } from '../ports/logger.js';

export const createConsoleLogger = (): Logger => ({
  info: (message) => console.log(`[INFO] ${message}`),
  error: (message, error) =>
    console.error(`[ERROR] ${message}`, error),
});

// adapters/fileLogger.ts
import type { Logger } from '../ports/logger.js';

export const createFileLogger = (filePath: string): Logger => ({
  info: (message) => {
    /* write to file */
  },
  error: (message, error) => {
    /* write to file */
  },
});

Monorepo Package Structure

packages/
├── core/
│   ├── src/
│   ├── package.json
│   └── tsconfig.json
├── ui/
│   ├── src/
│   ├── package.json
│   └── tsconfig.json
└── api/
    ├── src/
    ├── package.json
    └── tsconfig.json

Best Practices

  1. One function per file - Easy to find, test, and understand
  2. Collocate related files - Tests, types, and implementation together
  3. Use barrel exports - Clean public API
  4. Feature-based folders - Group by feature, not by type
  5. Clear module boundaries - Public API vs internal implementation
  6. Dependency direction - Core domain doesn't depend on infrastructure
  7. Type-only imports - Use import type when possible
  8. Avoid circular dependencies - Refactor to break cycles

Anti-Patterns

// Bad: Circular dependencies
// a.ts
import { b } from './b.js';
export const a = () => b();

// b.ts
import { a } from './a.js';
export const b = () => a();

// Bad: Deep nesting
src/components/shared/common/ui/base/Button.tsx

// Good: Flat structure
src/components/Button.tsx

// Bad: Mixed concerns
// userService.ts contains database, validation, and business logic

// Good: Separated concerns
// domain/user.ts - business logic
// repositories/userRepository.ts - database
// validators/userValidator.ts - validation

Install with Tessl CLI

npx tessl i pantheon-ai/typescript-advanced@0.1.1

references

compiler-module-resolution.md

compiler-performance.md

compiler-strict-mode.md

compiler-tsconfig.md

docs-adr-templates.md

docs-framework-docs.md

docs-jsdoc-patterns.md

docs-typedoc-config.md

guards-assertion-functions.md

guards-basic.md

guards-branded-types.md

guards-discriminated-unions.md

guards-exhaustiveness.md

guards-generic.md

guards-inference-infer.md

guards-inference-return.md

patterns-advanced-generics.md

patterns-api-client.md

patterns-branded-types.md

patterns-builder.md

patterns-deep-readonly.md

patterns-dependency-injection.md

patterns-event-emitter.md

patterns-form-validation.md

patterns-plugin-system.md

patterns-recursive-types.md

patterns-state-machine.md

patterns-type-safe-module.md

practices-illegal-states.md

practices-module-patterns.md

practices-runtime-validation.md

practices-type-first.md

types-conditional.md

types-generics.md

types-index-signatures.md

types-mapped.md

types-narrowing.md

types-template-literals.md

types-type-assertions.md

types-unions-intersections.md

utilities-custom-mapped-types.md

utilities-extract-exclude.md

utilities-key-remapping.md

utilities-nonnullable-awaited.md

utilities-partial-required.md

utilities-pick-omit.md

utilities-readonly-record.md

utilities-returntype-parameters.md

SKILL.md

tile.json