react-web-advanced
Installation
SKILL.md
React Web Advanced: TanStack Router, Start & Virtual
Web-specific patterns for React apps built on the TanStack Router + Start + Virtual stack.
This skill extends react-advanced (core cross-platform patterns). Read that skill first for
React Query, XState, Zustand, Zod, TanStack Form, and TanStack Table conventions.
Web Architecture
The web stack adds three layers on top of the shared core:
| Layer | Library | Responsibility |
|---|---|---|
| Routing + URL state | TanStack Router | Type-safe navigation, search params, route loaders |
| Full-stack boundary | TanStack Start | Server functions (createServerFn), SSR, streaming |
| Large lists | TanStack Virtual | Virtualized rendering for 1000+ items |
The golden rule: queryOptions as single source of truth
Define query options once, import everywhere — loaders, components, invalidation: