# File naming convention consistency

- **Pattern:** `ab-000233` (`ai-slop-code-drift.convention-drift.file-naming-consistency`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000233
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000233)

## Why it matters

Inconsistent file naming is a reliable signal of multi-session AI drift: each coding session inherits different conventions from different examples in context. A codebase split between `UserCard.tsx`, `user-card.tsx`, and `userCard.tsx` makes IDE autocomplete unreliable, grep patterns ambiguous, and code review cognitively expensive. ISO 25010 maintainability specifically covers naming consistency as a factor in modifiability — a 50/50 split means every developer mentally translates style before navigating. At scale, this compounds: a new engineer writes to the wrong convention, the next AI session reinforces whichever style it sees first, and the drift widens.

## Severity rationale

Low because inconsistent naming degrades maintainability and developer velocity without introducing runtime failures or security exposure.

## Remediation

Pick one convention, document it, and rename the outliers. PascalCase (`UserCard.tsx`) matches React community norms; kebab-case (`user-card.tsx`) aligns with Next.js App Router conventions.

```bash
# Rename PascalCase outliers to kebab-case in bulk
for f in src/components/**/*.tsx; do
  base=$(basename "$f" .tsx)
  kebab=$(echo "$base" | sed 's/\([A-Z]\)/-\1/g' | sed 's/^-//' | tr '[:upper:]' '[:lower:]')
  [ "$base" != "$kebab" ] && mv "$f" "$(dirname $f)/$kebab.tsx"
done
```

Document the choice in `CONTRIBUTING.md` and add `"unicorn/filename-case": ["error", { "case": "kebabCase" }]` to `.eslintrc` to enforce it on future commits.

## Detection

- **ID:** `file-naming-consistency`
- **Severity:** `low`
- **What to look for:** Sample all files under `src/components/`, `app/`, `components/`. For each file, classify the basename as: kebab-case (`my-component.tsx`), PascalCase (`MyComponent.tsx`), camelCase (`myComponent.tsx`), or other. EXCLUDE conventional Next.js filenames: `page`, `layout`, `loading`, `error`, `not-found`, `template`, `default`, `route`, `middleware`, `_app`, `_document`, `_error`, `index`, `globals.css`, `favicon.ico`. Count all files in each style and compute the percentage of each.
- **Pass criteria:** One naming style accounts for at least 80% of the sampled component files. Report even on pass: "Dominant naming style: [name] ([X]% of [Y] files). Other: [list]."
- **Fail criteria:** No single naming style accounts for 80% or more of the sampled files.
- **Skip (N/A) when:** Fewer than 5 component files exist after exclusions.
- **Detail on fail:** `"No dominant naming style: PascalCase 50% (10 files), kebab-case 35% (7 files), camelCase 15% (3 files). Pick one and rename."`
- **Remediation:** Inconsistent file naming makes code reviews harder and IDE search results confusing. Pick one convention and rename:

  ```bash
  # PascalCase is the most common React community convention
  # src/components/userCard.tsx → src/components/UserCard.tsx

  # Or kebab-case for Next.js App Router consistency
  # src/components/UserCard.tsx → src/components/user-card.tsx
  ```

  Document the choice in `CONTRIBUTING.md` and add a lint rule (`eslint-plugin-unicorn` has `filename-case`).

## External references

- iso-25010 maintainability

Taxons: code-quality

HTML version: https://auditbuffet.com/patterns/ab-000233