react-conventionslisted

React + Next.js client conventions for this repo (React 19 / Next.js 16, React Query / TanStack Query, Radix UI, shadcn-style cards/dialogs). Use when writing or reviewing React components, hooks, optimistic cache patches, data-fetching code, dialogs, Radix Select usage, JSX, interactive cards/rows, or Next.js Edge Runtime / middleware code. Covers optimistic-cache completeness, fetch error states, destructive-dialog error handling, the React 19 set-state-in-effect rule, a Radix Select form footgun, a JSX-ternary-comment parse error, composite-interactive a11y, the Edge-Runtime/Prisma import boundary, and the shared API-helper convention.
eric-sabe/engsys · ★ 1 · Web & Frontend · score 67

Install: claude install-skill eric-sabe/engsys

# React + Next.js Client Conventions Applies to: client components and hooks in the repo's web frontends. Stack assumed: React 19 / Next.js 16 (App Router), TanStack Query (React Query), Radix UI primitives, a shared `api` client helper, and a same-origin BFF/proxy. Test runner is Vitest + Testing Library (see the sibling `frontend-testing` skill). > Naturalize: confirm framework versions, the query-client setup, and the shared API helper path in `CLAUDE.md`. Paths below (`services/dashboard/lib/...`) are illustrative. These conventions are the React/Next.js-specific **mechanism**. The cross-project **principles** behind several of them — "a change isn't done until every surface is updated", "shift correctness left and distrust false greens" — live in the engsys `lessons-library/`. This skill carries the concrete React shape. ## Contents - [Optimistic cache patches must be complete](#optimistic-cache-patches-must-be-complete) - [Derived parent fields: inherit the server's rule](#derived-parent-fields-inherit-the-servers-rule) - [Error states on data fetch](#error-states-on-data-fetch) - [Destructive dialogs own their error + pending state](#destructive-dialogs-own-their-error--pending-state) - [No setState inside useEffect (React 19)](#no-setstate-inside-useeffect-react-19) - [Radix Select inside a form: guard the empty reset](#radix-select-inside-a-form-guard-the-empty-reset) - [No JSX comment inside a ternary branch](#no-jsx-comment-inside-a-ternary-branch) - [Composit