# CLAUDE.md - this project

Project instructions for Claude Code.

## Project

A React + Vite + Tailwind CSS v4 + Supabase + Zustand project.

Stack: React + Vite, Tailwind CSS v4, Supabase, Zustand.

## Commands

- Dev server: `npm run dev`
- Build: `npm run build`
- Type-check: `npx tsc --noEmit`
- Lint: `npm run lint`
- New migration: `npx supabase migration new <name>`
- Generate TS types: `npx supabase gen types typescript --local > types/supabase.ts`

## Project structure

- Features live in `src/features/<name>/` with their components, hooks and tests together.
- Shared UI in `src/components/`, hooks in `src/hooks/`.

## How to work in this repo

- Read the relevant files before editing. Follow the patterns already in the codebase over these generic rules.
- Make the smallest change that solves the task. Do not refactor or reformat unrelated code.
- Before saying a task is done, run the type-check, lint and tests listed under Commands and fix what you broke.
- If requirements are ambiguous, ask one clear question instead of guessing.
- Never commit secrets, API keys or `.env` files. Use env vars and keep `.env.example` up to date.
- Do not add a new dependency when the standard library or an existing dependency already covers it.
- Ask before adding, removing or upgrading any dependency.
- Ask before changing database schemas, auth, payments or CI configuration.
- Never delete files, drop data or run destructive commands (`rm -rf`, `git push --force`, `DROP TABLE`) without explicit approval.
- Keep each change under ~200 changed lines where possible; split larger work into steps.

## React + Vite

- Function components and hooks only. No class components.
- Follow the Rules of Hooks: call hooks at the top level, never inside conditions or loops.
- Derive values during render instead of syncing them into state with `useEffect`.
- Every list item needs a stable `key` from the data, never the array index if the list can change order.
- Type component props with an exported `Props` type or interface. No `any`.
- Env vars must start with `VITE_` to reach the client, which also means they are public. Never put secrets in them.
- Lazy-load heavy routes with `React.lazy` and `Suspense`.

## Tailwind CSS v4

- Tailwind v4 is configured in CSS: `@import "tailwindcss";` plus `@theme { ... }` for design tokens. Do not create a `tailwind.config.js` unless the project already has one.
- Use theme tokens (colors, spacing) instead of arbitrary values like `w-[37px]`.
- Build responsive layouts mobile-first with `sm:`, `md:`, `lg:` prefixes.
- Extract repeated class lists into components, not `@apply` chains.
- Support dark mode with the `dark:` variant when the project uses it.

## Supabase

- Enable Row Level Security on every table and write explicit policies. No table ships without RLS.
- The anon/publishable key is public. The `service_role`/secret key bypasses RLS: use it only in trusted server code, never in the client.
- Change the schema with migration files in `supabase/migrations/`, not by clicking in the dashboard.
- On the server, verify the user with `supabase.auth.getUser()` (or `getClaims()`); do not trust `getSession()` alone for authorization.
- In SSR frameworks use `@supabase/ssr` (`createServerClient` / `createBrowserClient`), not the deprecated auth-helpers packages.
- Regenerate database types after each migration and type the client with them.

## Zustand

- Keep stores small and split by domain.
- Select only what a component needs (`useStore((s) => s.count)`) to avoid unnecessary re-renders.
- Use Zustand for client/UI state only. Server data belongs in the data-fetching layer.

## Avoid

- Do not reach for global state for data that only one component tree uses.

## Reference docs

- [React docs](https://react.dev)
- [Vite docs](https://vite.dev/guide/)
- [Tailwind CSS docs](https://tailwindcss.com/docs)
- [Supabase docs](https://supabase.com/docs)
- [Zustand docs](https://zustand.docs.pmnd.rs)