# Building React Web Application > 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. - Skill: `cedmandocdoc/building-react-web-application` (Agent Skill, multi-file: 34 files) - Install (CLI): `npx skillmds@latest add cedmandocdoc/building-react-web-application` - Raw SKILL.md: https://api.skillmd.com/api/skills/cedmandocdoc/building-react-web-application/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: cedmandocdoc (https://skillmd.com/u/cedmandocdoc) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/cedmandocdoc/building-react-web-application --- # React web application ## Overview Opinionated ecosystem for building Vite-based React SPAs with a consistent architecture, library stack, and UI system (`src/ui`). ### Tech stack | Layer | Choice | | ------------------- | ------------------------------------------------------------------------------ | | Bundler | Vite | | Language | TypeScript | | Styling | Tailwind CSS v4, class-variance-authority (`cva` + `cx` from the same package) | | Routing | TanStack Router (file-based, `src/routes`) | | Server state | TanStack Query | | Client global state | Zustand | | HTTP | Axios | | Dates | date-fns (`src/libs/date-utils/`) | | Presentational UI | shadcn/ui-style primitives in `src/ui/` | ## Agent workflow Follow 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. ### Entry points Use the first row that matches; combine rows when the task spans types (e.g. new route + form). | Entry | When | Go to | | --- | --- | --- | | Component | Building, moving, or recategorizing any component | [creating-component](./references/creating-component.md) | | Structure | Folder roles, dependency flow, or where a module belongs | [managing-project-structure](./references/managing-project-structure.md) | | Task bundle | API, forms, styling, bootstrap, testing, fonts, routing-only, navigation | **Task types** table | | Lookup | You know the doc name or need a single reference | **Reference index** | ### Task types Match every row that applies. Open every link in the **Docs** column from each matching row. | Task type | Docs | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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) | | 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) | | Feature component | [creating-component](./references/creating-component.md), [creating-feature-component](./references/creating-feature-component.md), [managing-wrapper-components](./references/managing-wrapper-components.md) | | 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) | | 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) | | 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) | | Date / time | [managing-date](./references/managing-date.md) | | Refactor / move component | [creating-component](./references/creating-component.md) | | 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) | | 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) | | Scaffold new app | [scaffolding-application](./references/scaffolding-application.md) | | 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) | | 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) | | In-app navigation | [creating-route-component](./references/creating-route-component.md), [creating-navigation-component](./references/creating-navigation-component.md) | | E2E testing | [creating-e2e-testing](./references/creating-e2e-testing.md), [managing-project-structure](./references/managing-project-structure.md) | ## Reference index | Reference | Entry | Layer | Purpose | | --- | --- | --- | --- | | [creating-api](./references/creating-api.md) | | API | HTTP modules under `src/api/` | | [creating-component](./references/creating-component.md) | Component | Component | Decision tree and shared rules for any component work | | [creating-e2e-testing](./references/creating-e2e-testing.md) | | Testing | Playwright E2E tests | | [creating-feature](./references/creating-feature.md) | | Feature | Feature module folders and barrels | | [creating-feature-component](./references/creating-feature-component.md) | | Component | Domain UI blocks in features | | [creating-form-component](./references/creating-form-component.md) | | Form | Form fields and form shells | | [creating-navigation-component](./references/creating-navigation-component.md) | | Route | Reusable layout navigation (shells, sidebars, headers) | | [creating-route-component](./references/creating-route-component.md) | | Route | Flat files in `src/routes/` — filenames map to URLs | | [creating-screen-component](./references/creating-screen-component.md) | | Feature | Route-facing `*Page` in `src/features//components/` | | [creating-ui-component](./references/creating-ui-component.md) | | Component | Shared primitives in `src/ui/` | | [discovering-registry-components](./references/discovering-registry-components.md) | | Component | Registry component lookup by intent and labels | | [managing-api-error](./references/managing-api-error.md) | | API | API error handling patterns | | [managing-date](./references/managing-date.md) | | Date | date-fns parsing, formatting, and `src/libs/date-utils/` | | [managing-environment](./references/managing-environment.md) | | Setup | Feature `env.ts` and env vars | | [managing-form-error](./references/managing-form-error.md) | | Form | Form validation and error display | | [managing-linting](./references/managing-linting.md) | | Setup | ESLint and Prettier setup | | [managing-package-installs](./references/managing-package-installs.md) | | Setup | Package manager detection and install scripts | | [managing-project-structure](./references/managing-project-structure.md) | Structure | Architecture | Folder layout and dependency flow | | [managing-state](./references/managing-state.md) | | State | TanStack Query hooks and Zustand stores | | [managing-stepper-form](./references/managing-stepper-form.md) | | Form | Multi-step form UI | | [managing-stepper-hook](./references/managing-stepper-hook.md) | | Form | Multi-step form state hook | | [managing-styling](./references/managing-styling.md) | | Styling | Styling conventions and token preference | | [managing-wrapper-components](./references/managing-wrapper-components.md) | | Component | Wrapper and composition patterns | | [overriding-classname](./references/overriding-classname.md) | | Styling | `className` override rules | | [scaffolding-application](./references/scaffolding-application.md) | | Setup | Vite `react-ts` scaffold | | [setting-up-axios](./references/setting-up-axios.md) | | API | Axios client setup | | [setting-up-theming](./references/setting-up-theming.md) | | Styling | Design tokens and theme CSS | | [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md) | | Styling | Tailwind theme configuration |