File and Directory Naming Conventions in Kaneo: A Complete Guide

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.

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

The 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.

// 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 file follows the same pattern as hooks like 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.

// 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 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
• kebab-case for utilities and hooks like create-workspace-slug.ts
• Matching base name + .test for test files like 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. Mirror this pattern with use-your-hook-name.ts and colocate tests as 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, tsconfig.json), but all authored source code adheres to the four patterns described in CLAUDE.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}