react-architectlisted

# React Architecture Targets **React 19** with **TypeScript strict**. Component library defaults to Radix primitives + Tailwind (covered deeply in [ui-ux-architect](../../frontend/ui-ux-architect/SKILL.md)). When this skill applies to Next.js apps, server-side concerns live in [nextjs-architect](../nextjs-architect/SKILL.md). See [STACK.md](STACK.md) for pinned dependencies. ## 1. TypeScript posture — strict, always `tsconfig.json` baseline in [RECIPES.md § `tsconfig.json` — strict baseline](RECIPES.md#tsconfigjson--strict-baseline). - **No `any`.** Use `unknown` for truly untyped boundaries, then narrow. - **No type assertions (`as`)** except at validated I/O boundaries (after a Zod parse, etc.). - **`noUncheckedIndexedAccess`** is on — `arr[0]` is `T | undefined`, you handle the undefined. Catches a whole class of runtime crashes. - **`exactOptionalPropertyTypes`** distinguishes `{x?: string}` from `{x: string | undefined}`. Pick the right one per use case. - **Discriminated unions over enum + cast.** `type Status = {kind: "loading"} | {kind: "ok"; data: T} | {kind: "err"; msg: string}`. ## 2. Project structure — feature-based Mirrors [fastapi-architect](../fastapi-architect/SKILL.md#1-project-structure--feature-based) and [gin-architect](../gin-architect/SKILL.md#1-project-structure--feature-based) — same shape, different language. One folder per bounded feature. Full tree in [RECIPES § Feature-based project structure](RECIPES.md#feature-based-project-structure). -