Use predictable file names

Name authored source files in lowercase kebab-case after the concept they contain, and add only the project's known dot suffixes before the extension.

Implementation

• Use names such as item-explorer.tsx, use-click-outside.ts, and query-keys.ts.
• Name a component file after the component instead of hiding it in index.tsx; keep index files for documented package entry points and framework routes.
• Use .tsx only for files that contain JSX.
• Use dot suffixes only for roles the project recognizes, such as .test, .mock, .generated, .config, and .d.
• Keep file names a framework requires, such as route files, and leave generated and vendored files as their tools name them.
• Enforce the convention with a file-name lint check, and keep its exception list in sync with framework needs.

This is a consistency convention; kebab-case is one common choice.

Rationale

A predictable name lets people and tools find a file from what it contains. Lowercase names avoid bugs where a file named Button.tsx is imported as ./button and works on case-insensitive file systems but fails in case-sensitive CI. Many files named index.tsx make editor tabs and search results indistinguishable.

Examples

Incorrect (counterexample):

ItemExplorer.tsx
itemExplorer.tsx
components/Explorer/index.tsx
query_keys.test.ts

Correct:

item-explorer.tsx
item-explorer.test.tsx
query-keys.test.ts

Validation

Run the project's file-name check after adding or renaming files.

A file name required by a framework or generated by a tool is not a violation.