1---2name: building-react-web-application3description: Guides building Vite + React SPA apps with TypeScript using a consistent architecture and library stack (Tailwind CSS v4, class-variance-authority, TanStack Router file-based routes, TanStack Query, Zustand, Axios, shadcn-style primitives in src/ui). Use when creating a new React web project or updating architecture, UI, state, API, routing, or styling to follow these conventions.4---56# React web application78## Overview910Opinionated ecosystem for building Vite-based React SPAs with a consistent architecture, library stack, and UI system (`src/ui`).1112### Tech stack1314| Layer | Choice |15| ------------------- | ------------------------------------------------------------------------------ |16| Bundler | Vite |17| Language | TypeScript |18| Styling | Tailwind CSS v4, class-variance-authority (`cva` + `cx` from the same package) |19| Routing | TanStack Router (file-based, `src/routes`) |20| Server state | TanStack Query |21| Client global state | Zustand |22| HTTP | Axios |23| Dates | date-fns (`src/libs/date-utils/`) |24| Presentational UI | shadcn/ui-style primitives in `src/ui/` |2526## Agent workflow2728Follow this skill for Vite + React SPA work. Match **Entry points** and **Task types**; open every linked reference from matched rows and from the component decision tree before coding.2930### Entry points3132Use the first row that matches; combine rows when the task spans types (e.g. new route + form).3334| Entry | When | Go to |35| --- | --- | --- |36| Component | Building, moving, or recategorizing any component | [creating-component](./references/creating-component.md) |37| Structure | Folder roles, dependency flow, or where a module belongs | [managing-project-structure](./references/managing-project-structure.md) |38| Task bundle | API, forms, styling, bootstrap, testing, fonts, routing-only, navigation | **Task types** table |39| Lookup | You know the doc name or need a single reference | **Reference index** |4041### Task types4243Match every row that applies. Open every link in the **Docs** column from each matching row.4445| Task type | Docs |46| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |47| New route / feature | [managing-project-structure](./references/managing-project-structure.md), [creating-feature](./references/creating-feature.md), [creating-route-component](./references/creating-route-component.md), [creating-screen-component](./references/creating-screen-component.md), [creating-component](./references/creating-component.md), [TanStack Router — File-based routing](https://tanstack.com/router/latest/docs/routing/file-based-routing.md) |48| UI primitive (`src/ui/`) | [creating-component](./references/creating-component.md), [creating-ui-component](./references/creating-ui-component.md), [discovering-registry-components](./references/discovering-registry-components.md), [managing-wrapper-components](./references/managing-wrapper-components.md), [add-registry-component.cjs](./scripts/add-registry-component.cjs) |49| Feature component | [creating-component](./references/creating-component.md), [creating-feature-component](./references/creating-feature-component.md), [managing-wrapper-components](./references/managing-wrapper-components.md) |50| Form (single step) | [creating-form-component](./references/creating-form-component.md), [managing-form-error](./references/managing-form-error.md), [managing-state](./references/managing-state.md), [managing-date](./references/managing-date.md), [TanStack Form — Basic concepts](https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts) |51| Multi-step form | [managing-stepper-hook](./references/managing-stepper-hook.md), [managing-stepper-form](./references/managing-stepper-form.md), [creating-form-component](./references/creating-form-component.md), [managing-form-error](./references/managing-form-error.md), [TanStack Form — Basic concepts](https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts), [TanStack Form — Form composition](https://tanstack.com/form/latest/docs/framework/react/guides/form-composition.md) |52| API + data hooks | [creating-api](./references/creating-api.md), [setting-up-axios](./references/setting-up-axios.md), [managing-api-error](./references/managing-api-error.md), [managing-state](./references/managing-state.md), [managing-date](./references/managing-date.md) |53| Date / time | [managing-date](./references/managing-date.md) |54| Refactor / move component | [creating-component](./references/creating-component.md) |55| Styling / theme | [managing-styling](./references/managing-styling.md), [setting-up-theming](./references/setting-up-theming.md), [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md), [overriding-classname](./references/overriding-classname.md), [Tailwind CSS — Using Vite](https://tailwindcss.com/docs/installation/using-vite) |56| Fonts | [MDN — @font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face), [Google Fonts](https://fonts.google.com/), [setting-up-theming](./references/setting-up-theming.md), [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md) |57| Scaffold new app | [scaffolding-application](./references/scaffolding-application.md) |58| Project bootstrap | [managing-project-structure](./references/managing-project-structure.md), [managing-environment](./references/managing-environment.md), [managing-linting](./references/managing-linting.md), [managing-package-installs](./references/managing-package-installs.md), [Tailwind CSS — Using Vite](https://tailwindcss.com/docs/installation/using-vite), [TanStack Router — Installation with Vite](https://tanstack.com/router/latest/docs/installation/with-vite.md) |59| Routing only | [creating-route-component](./references/creating-route-component.md), [creating-navigation-component](./references/creating-navigation-component.md), [TanStack Router — Installation with Vite](https://tanstack.com/router/latest/docs/installation/with-vite.md), [TanStack Router — File-based routing](https://tanstack.com/router/latest/docs/routing/file-based-routing.md) |60| In-app navigation | [creating-route-component](./references/creating-route-component.md), [creating-navigation-component](./references/creating-navigation-component.md) |61| E2E testing | [creating-e2e-testing](./references/creating-e2e-testing.md), [managing-project-structure](./references/managing-project-structure.md) |6263## Reference index6465| Reference | Entry | Layer | Purpose |66| --- | --- | --- | --- |67| [creating-api](./references/creating-api.md) | | API | HTTP modules under `src/api/` |68| [creating-component](./references/creating-component.md) | Component | Component | Decision tree and shared rules for any component work |69| [creating-e2e-testing](./references/creating-e2e-testing.md) | | Testing | Playwright E2E tests |70| [creating-feature](./references/creating-feature.md) | | Feature | Feature module folders and barrels |71| [creating-feature-component](./references/creating-feature-component.md) | | Component | Domain UI blocks in features |72| [creating-form-component](./references/creating-form-component.md) | | Form | Form fields and form shells |73| [creating-navigation-component](./references/creating-navigation-component.md) | | Route | Reusable layout navigation (shells, sidebars, headers) |74| [creating-route-component](./references/creating-route-component.md) | | Route | Flat files in `src/routes/` — filenames map to URLs |75| [creating-screen-component](./references/creating-screen-component.md) | | Feature | Route-facing `*Page` in `src/features/<feature>/components/` |76| [creating-ui-component](./references/creating-ui-component.md) | | Component | Shared primitives in `src/ui/` |77| [discovering-registry-components](./references/discovering-registry-components.md) | | Component | Registry component lookup by intent and labels |78| [managing-api-error](./references/managing-api-error.md) | | API | API error handling patterns |79| [managing-date](./references/managing-date.md) | | Date | date-fns parsing, formatting, and `src/libs/date-utils/` |80| [managing-environment](./references/managing-environment.md) | | Setup | Feature `env.ts` and env vars |81| [managing-form-error](./references/managing-form-error.md) | | Form | Form validation and error display |82| [managing-linting](./references/managing-linting.md) | | Setup | ESLint and Prettier setup |83| [managing-package-installs](./references/managing-package-installs.md) | | Setup | Package manager detection and install scripts |84| [managing-project-structure](./references/managing-project-structure.md) | Structure | Architecture | Folder layout and dependency flow |85| [managing-state](./references/managing-state.md) | | State | TanStack Query hooks and Zustand stores |86| [managing-stepper-form](./references/managing-stepper-form.md) | | Form | Multi-step form UI |87| [managing-stepper-hook](./references/managing-stepper-hook.md) | | Form | Multi-step form state hook |88| [managing-styling](./references/managing-styling.md) | | Styling | Styling conventions and token preference |89| [managing-wrapper-components](./references/managing-wrapper-components.md) | | Component | Wrapper and composition patterns |90| [overriding-classname](./references/overriding-classname.md) | | Styling | `className` override rules |91| [scaffolding-application](./references/scaffolding-application.md) | | Setup | Vite `react-ts` scaffold |92| [setting-up-axios](./references/setting-up-axios.md) | | API | Axios client setup |93| [setting-up-theming](./references/setting-up-theming.md) | | Styling | Design tokens and theme CSS |94| [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md) | | Styling | Tailwind theme configuration |
cedmandocdoc