# Typescript Source Organization

> Apply, review, and explain TypeScript source organization conventions. Use automatically for tasks involving feature-based organization, code colocation, import paths, import sorting, monorepos, or frontend and backend project structure.

- Skill: `gabrielmoreira/typescript-source-organization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/typescript-source-organization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/typescript-source-organization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/typescript-source-organization

---


# Source Organization

Apply the TypeScript Style Guide's source organization conventions in the context of the current task.

## Workflow

1. Inspect the consuming repository's existing structure, framework conventions, and configuration.
2. Let explicit repository conventions take precedence over this opinionated guidance.
3. Apply, review, or explain only the guidance relevant to the task.
4. State important tradeoffs when organization depends on project size, framework, or team conventions.

## Boundaries

- Keep formatting and linting tools responsible for import sorting when configured.
- Do not reorganize unrelated files merely because this skill is active.

<!-- BEGIN CANONICAL GUIDE CONTENT -->

## Source Organization

### Code Collocation

- Every application or package in a monorepo has project files and folders organized and grouped **by feature**.
- **Collocate code as close as possible to where it's relevant.**
- Deep folder nesting should not represent an issue.

### Imports

Import paths can be relative, starting with `./` or `../`, or they can be absolute `@common/utils`.

To make import statements more readable and easier to understand:

- **Relative** imports `./sortItems` must be used when importing files within the same feature that are 'close' to each other. This also allows moving the feature around the codebase without changing these imports.
- **Absolute** imports `@common/utils` must be used in all other cases.
- **All** imports must be auto sorted by tooling e.g. [prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports), [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md) etc.

```ts
// ❌ Avoid
import { bar, foo } from '../../../../../../distant-folder';

// ✅ Use
import { locationApi } from '@api/locationApi';

import { foo } from '../../foo';
import { bar } from '../bar';
import { baz } from './baz';
```

### Project Structure

Example frontend monorepo project where every application has files and folders grouped by feature:

```shell
apps/
├─ product-manager/
│  ├─ common/
│  │  ├─ components/
│  │  │  ├─ Button/
│  │  │  ├─ ProductTitle/
│  │  │  ├─ ...
│  │  │  └─ index.tsx
│  │  ├─ consts/
│  │  │  ├─ paths.ts
│  │  │  └─ ...
│  │  ├─ hooks/
│  │  └─ types/
│  ├─ modules/
│  │  ├─ HomePage/
│  │  ├─ ProductAddPage/
│  │  ├─ ProductPage/
│  │  ├─ ProductsPage/
│  │  │  ├─ api/
│  │  │  │  └─ useGetProducts/
│  │  │  ├─ components/
│  │  │  │  ├─ ProductItem/
│  │  │  │  ├─ ProductsStatistics/
│  │  │  │  └─ ...
│  │  │  ├─ utils/
│  │  │  │  └─ filterProductsByType/
│  │  │  └─ index.tsx
│  │  ├─ ...
│  │  └─ index.tsx
│  ├─ eslint.config.mjs
│  ├─ package.json
│  └─ tsconfig.json
├─ warehouse/
├─ admin-dashboard/
└─ ...
```

- The `modules` folder is responsible for implementing each individual page and its custom features (components, hooks, utility functions etc.).
- The `common` folder is responsible for implementations that are truly used across the application. Since it's a "global folder" it should be used sparingly.  
  If the same component, e.g. `common/components/ProductTitle`, is used on more than one page, it shall be moved to the common folder.

When using a frontend framework with a file-system-based router (e.g. Next.js), the `pages` folder serves only as a router and is responsible for defining routes (no business logic implementation).

Example backend project structure with files and folders grouped by feature:

```shell
product-manager/
├─ dist/
├── database/
│   ├── migrations/
│   │   ├── 20220102063048_create_accounts.ts
│   │   └── ...
│   └── seeders/
│       ├── 20221116042655-feeds.ts
│       └── ...
├─ docker/
├─ logs/
├─ scripts/
├─ src/
│  ├─ common/
│  │  ├─ consts/
│  │  ├─ middleware/
│  │  ├─ types/
│  │  └─ ...
│  ├─ dao/
│  │  ├─ user/
│  │  └─ ...
│  ├─ modules/
│  │   ├── admin/
│  │   │   ├── account/
│  │   │   │   ├── account.model.ts
│  │   │   │   ├── account.controller.ts
│  │   │   │   ├── account.route.ts
│  │   │   │   ├── account.service.ts
│  │   │   │   ├── account.validation.ts
│  │   │   │   ├── account.test.ts
│  │   │   │   └── index.ts
│  │   │   └── ...
│  │   ├── general/
│  │   │   ├── general.model.ts
│  │   │   ├── general.controller.ts
│  │   │   ├── general.route.ts
│  │   │   ├── general.service.ts
│  │   │   ├── general.validation.ts
│  │   │   ├── general.test.ts
│  │   │   └── index.ts
│  │   ├─ ...
│  │   └─ index.tsx
│  └─ ...
├─ ...
├─ eslint.config.mjs
├─ package.json
└─ tsconfig.json
```

<!-- END CANONICAL GUIDE CONTENT -->