# Vite React

> Vite plus React plus TypeScript SPA. Use when the app is Vite (vite.config), not Next.js. Covers import.meta.env, dev proxy to an API, React Router, and code splitting.

- Skill: `vostrikovva/vite-react` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vostrikovva/vite-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vostrikovva/vite-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vostrikovva (https://skillmd.com/u/vostrikovva)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/vostrikovva/vite-react

---


# Vite + React + TypeScript

Use this skill when the repo has Vite (`vite.config.ts`), not Next.js. Do not introduce `next/image`, App Router, or Turbopack. Follow `typescript` and `vercel-composition-patterns` when those skills are installed. For UI/a11y follow `web-design-guidelines`.

Layout paths below are defaults. Real directories come from the `implement`/`tdd` recon of `package.json` and `tsconfig.json` (monorepo, `paths`).

## Layout

- Entry: `index.html` + `src/main.tsx`.
- Env: only `import.meta.env.VITE_*`. Never `process.env` in browser code.
- Dev API: `server.proxy` in `vite.config.ts` to the Node server. Do not hardcode production API hosts in source.

## Routing and split

- Client router (e.g. React Router) for SPA paths.
- Lazy-load heavy routes with `React.lazy` + `Suspense`.

## Do not

- Add `next.config.*` or RSC to a Vite app.
- Commit `.env` files. Do not echo env values in chat.