React Best Practices Skill

Audits React applications for performance, bundle size, and React 18+ best practices.

Instructions

When reviewing or auditing React code:

1. Run the audit against the specified code or repository
2. Check against the 40+ auditable rules (see below)
3. Report findings with severity (error, warning, info)
4. Provide actionable fix suggestions with before/after code examples
5. For performance issues, identify the root cause and recommended optimization
6. For bundle issues, suggest code splitting or lazy loading strategies

Auditable Rules (Sample)

Performance

• no-missing-deps: Hook dependencies must be complete
• avoid-inline-objects-in-jsx: Inline objects cause unnecessary re-renders
• prefer-useMemo: Expensive computations should use useMemo
• prefer-useCallback: Callbacks passed to children should use useCallback

React 18+

• prefer-use client directive: Server Components compliance
• no-unnecessary-fragments: Avoid unnecessary fragment wrappers
• require-useTransition: Long renders should use useTransition

Bundle Size

• no-bare-imports: Use named imports over namespace imports
• avoid-default-imports: Default imports prevent tree shaking
• check-duplicate-packages: Duplicate package versions inflate bundle

Accessibility

• require-aria-labels: Interactive elements need ARIA labels
• require-keyboard-handlers: Click handlers need keyboard equivalents

Output Format

{
  "file": "src/components/UserProfile.tsx",
  "rules": [
    {
      "rule": "no-missing-deps",
      "severity": "error",
      "line": 42,
      "message": "Missing dependency 'userId' in useEffect",
      "fix": "Add userId to dependency array"
    }
  ],
  "summary": { "errors": 2, "warnings": 5, "info": 1 }
}

Example

User: "Audit our React codebase for performance issues"

→ Run audit → Report: 3 errors (missing deps, inline objects), 7 warnings → Provide fixes for each

Dependencies

Requires: Node.js, project with React 16+ (for React 18+ rules, requires React 18+)