What problem does it solve? React codebases accumulate subtle correctness bugs — stale closures, missing effect cleanups, props mirrored into state, hand-rolled optimistic updates — that linters alone do not fully catch and that compound into maintenance drag. This skill statically audits a TypeScript and React project against an opinionated four-layer baseline and produces structured findings plus an optional implementation plan. ## Core Features & Use Cases - Four-layer audit baseline: Covers hooks correctness (dependency arrays, cleanup functions, state synchronization), component design (PascalCase, forwardRef, displayName, children typing), state management (form libraries, server state in the data layer, URL state), and React 18/19 idioms (useId, useTransition, Suspense, Server Actions, useOptimistic). - Diagnostic snapshot: Records React version, framework variant (Next.js App Router, Remix, Vite, CRA), component and custom-hook counts, and detected form, animation, and design-system libraries. - Structured outputs: Writes findings.md, findings.json (schema 2.0.0 for Repository Quality Score roll-up), snapshot.md, and metadata.json to .architect-audits/react-audit/, then offers a descriptive implementation plan. - Use Case: Run /react-audit on a Next.js codebase before a refactor to surface every useEffect data-fetching pattern that should move to TanStack Query, with file and line references ordered by impact. ## Quick Start Ask the AI to run /react-audit in the root of your React and TypeScript project to generate the findings report and optionally an implementation plan.
