| # CLAUDE.md | |
| This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. | |
| ## Project Overview | |
| This is a Svelte 5 + TypeScript + Vite single-page application. It uses the latest Svelte 5 with runes syntax (`$state()`, `$derived()`, etc.). | |
| ## Essential Commands | |
| ```bash | |
| # Install dependencies | |
| npm install | |
| # Development server with HMR | |
| npm run dev | |
| # Type checking | |
| npm run check | |
| # Production build (outputs to dist/) | |
| npm run build | |
| # Preview production build | |
| npm run preview | |
| ``` | |
| ## Architecture | |
| ### Component Structure | |
| - Components use `.svelte` files with TypeScript support via `lang="ts"` in script tags | |
| - Main entry: `src/main.ts` → mounts `src/App.svelte` | |
| - Reusable components go in `src/lib/` | |
| - Uses Svelte 5 runes syntax (not Svelte 4 syntax) | |
| ### Key Patterns | |
| 1. **State Management**: Use `$state()` rune for reactive state | |
| 2. **TypeScript**: All components should use `<script lang="ts">` | |
| 3. **Imports**: Use ES module imports, components are default exports | |
| 4. **Styling**: Component styles are scoped by default, global styles in `src/app.css` | |
| ### Build Configuration | |
| - Vite handles bundling with `vite.config.ts` | |
| - TypeScript config uses project references (tsconfig.json + tsconfig.app.json) | |
| - Production builds go to `dist/` directory | |
| ## Important Notes | |
| - This is NOT SvelteKit - no routing, SSR, or API routes | |
| - HMR preserves component state (can be toggled in vite.config.ts) | |
| - All paths in imports should be relative or use `$lib` alias for src/lib |