CLAUDE.md for React + Vite

The VITE_ env prefix and effect-driven render loops are the classic agent mistakes in Vite SPAs. Below is a complete, committable example for a typical React + Vite project. To get one tailored to your dependencies and scripts, paste your manifest into the free generator (client-side, nothing uploaded) or run npx getagentready in your repo.

Complete example

# CLAUDE.md

This file guides Claude Code when working in this repository.

## Project

**example-vite-app** — Stack: TypeScript, React, Vite, npm, Vitest, ESLint.

## Commands

- Install dependencies: `npm install`
- Run dev server: `npm run dev`
- Build: `npm run build`
- Run all tests: `npm test`
- Run a single test: `npx vitest run path/to/file.test.ts -t "test name"`
- Lint: `npm run lint`
- Type-check: `npx tsc --noEmit`

## Testing

Tests use Vitest. Write or update tests alongside behavior changes; run the single-test command during iteration and the full suite before finishing.

## Conventions

- Function components with hooks only; no class components.
- Derive state where possible instead of syncing copies with `useEffect`.
- Co-locate component, styles, and tests in the same directory.
- Static assets go in `public/`; imported assets are hashed and go through the bundler.
- Prefer small, focused changes; do not refactor unrelated code in the same change.
- Match the existing code style of the file you are editing over any global preference.
- Never commit secrets. `.env*` files are local-only.
- After making changes, run the test and lint commands above before considering work done.

## Gotchas

- Effects that update state they also depend on cause render loops — check dependency arrays first when debugging re-renders.
- Keys must be stable identifiers, not array indices, for any list that reorders.
- Env vars must be prefixed `VITE_` to reach client code (`import.meta.env`, not `process.env`).

<!-- generated with https://getagentready.dev -->

Going further

This is the generated baseline. The Agent-Ready Pro Pack includes a hand-tuned, deeper React + Vite configuration — architecture guidance, testing strategy, common-task recipes — plus 12 workflow skills and enforcement hooks. See also the CLAUDE.md guide and AGENTS.md guide.