CLAUDE.md

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

# 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