SvelteKit with TailwindCss and Skeleton

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

---

## Commands

### Development

```bash
# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Type check (svelte-check)
pnpm check

# Format code (prettier)
pnpm format
```

### Linting

```bash
# Check linting (prettier + eslint)
pnpm lint
```

---

## Project Structure

```
frontend/
├── src/
│   ├── lib/              # Shared library code
│   │   ├── api/          # API client (auth endpoints, fetch wrapper)
│   │   └── assets/       # Static assets (favicon)
│   ├── routes/           # SvelteKit pages (file-based routing)
│   │   ├── +layout.svelte  # Root layout with Tailwind + Skeleton CSS
│   │   └── +page.svelte    # Home page
│   ├── +app.html         # App HTML template (base HTML)
│   ├── app.d.ts          # App TypeScript declarations
│   └── layout.css        # Global styles (Tailwind + @skeletonlabs)
├── .svelte-kit/          # Build artifacts (generated)
├── package.json          # Dependencies + scripts
├── svelte.config.js      # SvelteKit + static adapter config
├── tsconfig.json         # TypeScript config (extends .svelte-kit/tsconfig.json)
├── vite.config.ts        # Vite config (Tailwind + SvelteKit plugins)
└── README.md             # Project documentation
```

---

## Architecture

### SvelteKit + Svelte 5

- **Framework**: SvelteKit 2.50.2 with Svelte 5.51.0 (runes, `$state`, etc.)
- **Routing**: File-based routing in `src/routes/`
- **Adapter**: Static adapter (deployed as static files)

### Styling

- **Tailwind CSS 4**: Loaded via Vite plugin and `@import` in `layout.css`
- **Skeleton UI**: `@skeletonlabs/skeleton` + `@skeletonlabs/skeleton-svelte` theme: `cerberus`

Skeleton docs can be found at ./docs/llms-svelte.txt

### API Layer

`src/lib/api/api.ts` provides:

- `register()`, `login()` - Auth endpoints
- `getAuthHeader()` - Bearer token headers
- `getAccessToken()`, `setAccessToken()`, `clearAccessToken()` - Token management via localStorage
- Default API URL: `http://localhost:8080/api` (from `VITE_API_URL` env var)

---

## Configuration Files

- `svelte.config.js`: Static adapter, disables runes in node_modules
- `tsconfig.json`: Strict TS mode, `rewriteRelativeImportExtensions: true`
- `vite.config.ts`: Tailwind + SvelteKit plugins

---

## MCP Server

Svelte MCP server provides:

- `list-sections`: Discover Svelte 5/SvelteKit documentation
- `get-documentation`: Fetch Svelte docs by title or path
- `svelte-autofixer`: Analyze and fix Svelte code issues
- `playground-link`: Generate Svelte Playground links

---

## Development Tools

- **Prettier**: Formatter (with Svelte + Tailwind plugins)
- **ESLint**: Linter with Svelte plugin
- **TypeScript**: Strict mode, bundler resolution
- **Vite**: Build tool + dev server