audit-code-quality

Code Quality Audit

Degree of freedom: MIXED — Parts 1–2 judgment [HIGH freedom]; convention greps and Validation [LOW freedom — run exactly].

Audit-and-fix exception. Detect and then fix. Not present-then-stop.

Repo-wide React/TypeScript anti-patterns plus naming, organisation, and pattern consistency. A named PR/diff → audit-code-review.

How to reason

1. Observe — quote the smell (file:line) and whether git blame / CONTRIBUTING marks it intentional
2. Interpret — bug/perf risk, or style-only drift?
3. Classify — anti-pattern / naming / organisation / pattern-split / intentional
4. Severity — runtime bug or data-fetch useEffect = High; naming-only = Low

Worked example

Observe: components/PaymentForm.tsx has 'use server' and a useEffect that fetches invoices; four sortable lists use key={i}. Interpret: server action lives in UI; fetch refires on remount; reorder remounts rows. Classify: organisation + useEffect-for-data + index-as-key. Severity: High (actions-in-components); Medium (keys). Finding: PaymentForm.tsx | High | move action to features/*/server/; replace fetch effect with TanStack Query

Before any change [LOW freedom — run exactly]

cat CONTRIBUTING.md .cursor/rules/*.md 2>/dev/null | head -100 # existing conventions
git log --oneline -20 | grep -i "convention\|pattern\|style" # recent decisions

Verify the "inconsistency" isn't intentional. Check git blame before touching working code.

---

Part 1 — Anti-patterns [HIGH freedom]

React

Props drilling → Context or composition

// Bad: prop drilled through 5+ levels
<Layout user={user}><Sidebar user={user}><UserMenu user={user}><Avatar user={user} />

// Fix: context for global state
const UserContext = createContext<User | null>(null)
const useUser = () => useContext(UserContext)

// Fix: composition for UI concerns
<Layout><Layout.Sidebar><UserMenu /></Layout.Sidebar></Layout>