# File and Directory Naming Conventions in Kaneo: A Complete Guide

> Discover Kaneo naming conventions for files and directories in usekaneo/kaneo. Learn PascalCase, kebab-case, and test file naming best practices for cleaner code.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: best-practices
- Published: 2026-08-04

---

**Kaneo uses four distinct naming conventions: PascalCase for React components, kebab-case for utilities and hooks, matching base names with `.test` suffix for test files, and lowercase kebab-case for directories.**

The Kaneo project maintains a clean, predictable source tree through explicit naming rules documented in its style guide. These conventions help developers locate code quickly and distinguish between UI components and plain functions. This guide breaks down each convention with real examples from the `usekaneo/kaneo` repository.

## Component Files: PascalCase

React components in Kaneo use **PascalCase** file names. This mirrors React's component-naming convention and makes the exported component immediately obvious from the file name.

```tsx
// apps/web/src/components/TaskCard.tsx
export function TaskCard({ task }: { task: Task }) {
  return <div>{task.title}</div>;
}

```

The [`TaskCard.tsx`](https://github.com/usekaneo/kaneo/blob/main/TaskCard.tsx) file in `apps/web/src/components/` demonstrates this pattern. The file name matches the exported function name exactly, eliminating guesswork when importing across the codebase.

## Utilities and Hooks: Kebab-Case

Non-component files—**utilities**, **hooks**, and **helper functions**—use **kebab-case** with lowercase words separated by hyphens.

```ts
// apps/web/src/lib/utils/create-workspace-slug.ts
export function createWorkspaceSlug(name: string): string {
  return name.toLowerCase().replace(/\s+/g, "-");
}

```

This convention distinguishes plain functions from UI components at a glance. The [`create-workspace-slug.ts`](https://github.com/usekaneo/kaneo/blob/main/create-workspace-slug.ts) file follows the same pattern as hooks like [`use-task-list.ts`](https://github.com/usekaneo/kaneo/blob/main/use-task-list.ts), creating visual consistency within `src/lib` and `src/hooks` directories.

## Test Files: Mirror Source Names with `.test` Suffix

Test files share the **same base name** as their source file, adding `.test` before the extension.

```ts
// apps/web/src/lib/utils/create-workspace-slug.test.ts
import { createWorkspaceSlug } from "./create-workspace-slug";

test("slugifies a name", () => {
  expect(createWorkspaceSlug("My Workspace")).toBe("my-workspace");
});

```

The [`create-workspace-slug.test.ts`](https://github.com/usekaneo/kaneo/blob/main/create-workspace-slug.test.ts) file sits alongside its source in `apps/web/src/lib/utils/`. This colocation keeps tests logically grouped with the code they verify, simplifying navigation and maintenance.

## Directory Names: Lowercase Kebab-Case

Directory names use **lowercase kebab-case** throughout the repository. Common examples include:

- `apps/web`
- `apps/api`
- `packages/mcp`
- `src/lib`
- `src/hooks`

This convention applies uniformly across the monorepo structure, from top-level app folders to nested source directories.

## Where These Conventions Are Documented

The **CLAUDE.md** file at the repository root contains the authoritative source for Kaneo's naming conventions. The "File naming" section on line 146 explicitly defines these four patterns, making them discoverable for new contributors and enforceable in code reviews.

| Convention | Location in CLAUDE.md | Applies To |
|------------|----------------------|------------|
| PascalCase | Line 146 | Components |
| kebab-case | Line 146 | Utilities, hooks |
| `.test` suffix | Line 146 | Test files |
| lowercase folders | Line 146 | All directories |

## Summary

- **PascalCase** for component files like [`TaskCard.tsx`](https://github.com/usekaneo/kaneo/blob/main/TaskCard.tsx)
- **kebab-case** for utilities and hooks like [`create-workspace-slug.ts`](https://github.com/usekaneo/kaneo/blob/main/create-workspace-slug.ts)
- **Matching base name + `.test`** for test files like [`create-workspace-slug.test.ts`](https://github.com/usekaneo/kaneo/blob/main/create-workspace-slug.test.ts)
- **Lowercase kebab-case** for all directory names
- **CLAUDE.md** serves as the canonical reference for Kaneo file naming conventions

## Frequently Asked Questions

### Does Kaneo enforce these naming conventions automatically?

The conventions are documented in **CLAUDE.md** rather than enforced through linters. Code reviews and contributor guidelines maintain consistency. Teams working with the Kaneo codebase typically adopt these patterns as part of onboarding.

### Why does Kaneo use different cases for components versus utilities?

PascalCase signals "this exports a React component" while kebab-case signals "this exports plain functions." This visual distinction speeds up file navigation and clarifies import expectations without opening files.

### Where should I place a new custom hook in the Kaneo codebase?

Custom hooks belong in `apps/web/src/hooks/` or `src/hooks/` with kebab-case file names like [`use-task-list.ts`](https://github.com/usekaneo/kaneo/blob/main/use-task-list.ts). Mirror this pattern with [`use-your-hook-name.ts`](https://github.com/usekaneo/kaneo/blob/main/use-your-hook-name.ts) and colocate tests as [`use-your-hook-name.test.ts`](https://github.com/usekaneo/kaneo/blob/main/use-your-hook-name.test.ts).

### Are there exceptions to these naming conventions in Kaneo?

The documented conventions apply consistently across the source tree. Configuration files at the repository root may follow their own ecosystems' standards (e.g., [`package.json`](https://github.com/usekaneo/kaneo/blob/main/package.json), [`tsconfig.json`](https://github.com/usekaneo/kaneo/blob/main/tsconfig.json)), but all authored source code adheres to the four patterns described in **CLAUDE.md**.