Frontend

File naming and styling rules for apps/web and packages/deft.

Files

File	Name
React component	`PascalCase`: `TracePage.tsx`
Anything else	`camelCase`, matching its export: `useOrganization.ts`
Directory	`kebab-case`: `components/copy-button/`

Suffixes stay as they are: .test.ts, .server.ts, .isomorph.ts. Routes in apps/web/src/routes/ follow TanStack Start’s names instead.

No JSDoc on components or their props.

local/split-tailwind-classes enforces this and bun run check:fix applies it.

Simple classes share one string. A class with a variant (hover:, md:, data-*:, [&…]:) or an arbitrary value gets its own string.
Pass cn strings as arguments, simple string first and className last. tv uses arrays with the same grouping.
A plain className string is fine only while every class is simple; otherwise use cn.
Compose with cn, never template literals. Group a conditional block in a nested cn.

cn("relative flex items-center gap-2", "hover:bg-control-hover", "[&_svg]:size-4", className);