audit-code-quality

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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.
>
> Fix the findings you reported, in the files you named; a repo-wide restyle
> or rename pass the report did not list is a different session. Edit
> surgically — the offending hook, key, or import — rather than rewriting
> whole files. Pre-existing bugs met on the way go in the report as
> follow-ups. Add or change tests only where the task asks or the repo
> already keeps them for that surface; one-off greps and scratch scripts stay
> out of the commit.

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

## This skill vs neighbors

| Skill | Owns |
|---|---|
| **audit-code-quality** (this) | Repo-wide anti-patterns and consistency drift, detected and fixed |
| `audit-code-review` | Review one PR or diff for correctness, security, maintainability |
| `workflow-refactor` | Scoped, behavior-preserving refactor with affected tests run |

## 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]

```bash
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
```tsx
// 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>
```

#### Derived state in `useState` → `useMemo`
```tsx
// Bad
const [items, setItems] = useState([])
const [filtered, setFiltered] = useState([])
useEffect(() => { setFiltered(items.filter(i => i.active)) }, [items])

// Fix
const filtered = useMemo(() => items.filter(i => i.active), [items])
```

#### `useEffect` for data fetching → Server Components or TanStack Query
```tsx
// Fix (Next.js 16 Server Component)
async function DataDisplay() {
 const data = await db.getData()
 return <div>{data.name}</div>
}

// Fix (client with TanStack Query)
const { data, isLoading } = useQuery({ queryKey: ['data'], queryFn: fetchData })
```

#### Object/array in dependency array → memoize or destructure
```tsx
// Bad: new object every render → infinite loop
useEffect(() => { doSomething(options) }, [options])

// Fix
const options = useMemo(() => ({ page, limit }), [page, limit])
useEffect(() => { doSomething(options) }, [options])
```

#### Index as key in dynamic lists → stable IDs
```tsx
// Bad
{items.map((item, i) => <Item key={i} />)}
// Fix
{items.map(item => <Item key={item.id} />)}
```

#### Giant component → composition
```tsx
// Split by responsibility
export function UserDashboard() {
 const user = useUser()
 return (
 <DashboardLayout>

From kensaurus/skills, MIT.

More from kensaurus/skills