claudemd

CLAUDE.md for React & TypeScript

Configure your Vite SPA workspace rules to guide Claude Code through state structures, custom hooks, and layout rules.

Vite SPA Considerations

Unlike server-rendered frameworks, React SPAs rely completely on client-side routing, state modules (Zustand, Redux, Context), and bundlers like Vite. A clean CLAUDE.md instructs the assistant on:

  • Bundler specific commands: Running Vite preview, Vite build, or Vitest.
  • State Patterns: Standardizing where global stores and client hooks reside.
  • Code Organization: Enforcing proper TypeScript types and keeping UI components pure.

The React/TypeScript CLAUDE.md Template

Copy the file below into your root CLAUDE.md:

# Build and Test Commands
- Build: `npm run build`
- Dev server: `npm run dev`
- Run local server preview: `npm run preview`
- Test: `npm run test`
- Test file: `npm run test -- [filename]`
- Lint check: `npm run lint`

# Code Style Guidelines
- Use React functional components with arrow function declarations.
- Enforce explicit return types for custom hooks and helpers.
- State Management: Put Zustand stores under `src/store/` and React Context under `src/context/`.
- Styling: Use Tailwind CSS utility classes.
- TypeScript: Enforce strict typings. Never use `any` as a type.
- Formatting: 2 spaces indent, single quotes, no trailing semi-colons.

# Project Architecture & Directories
- Routing: Configured using React Router under `src/routes/` or `src/router.tsx`.
- Component folders: `src/components/ui/` for shared design elements (e.g., buttons, inputs), `src/components/layout/` for structural frames.
- Feature modules: Organize complex code under `src/features/[feature-name]/`.
- Assets directory: Store unprocessed images and svgs inside `public/`.
- Exclude paths: Do not scan or edit `dist/`, `node_modules/`, or dev cache directories.

Key Rules Explained

  • Arrow Function Components: By defining component structures, you avoid code consistency drift (e.g. having some files use standard `function Comp()` and others use `const Comp = () => `).
  • Vitest Commands: The test scripts ensure that when you ask Claude Code to "fix this failing test," it runs your exact test suite instead of looking for Jest configuration files.
  • Feature Folders: Using feature folders prevents large codebases from turning into spaghetti file collections.