# AGENTS.md — testing-proxy ## Project Overview - **Framework**: SvelteKit 2.63.0 with Svelte 5 (runes mode) - **Build Tool**: Vite 8.0.16 - **Styling**: Tailwind CSS 4.3.0 (via `@tailwindcss/vite`) - **Component Library**: Flowbite Svelte 1.33.1 + Flowbite Icons - **Deployment Adapter**: `@sveltejs/adapter-node` (Node.js deployments) - **Package Manager**: pnpm (workspace support configured) - **Type System**: JavaScript with JSConfig (no TypeScript) ## Critical Commands ### Development & Build ```bash # Start dev server (port 3000, with hot reload) npm run dev # or with browser auto-open: npm run dev -- --open # Production build (generates .svelte-kit, /build, and optimized JS/CSS) npm run build # Preview production build locally (runs on port 3000 by default) npm run preview # Sync SvelteKit config (auto-runs on `npm install`) npm run prepare ``` ### No test/lint commands This is a fresh project with no test suite or linter configured. Do not assume these exist. ## Architecture & Key Files ### SvelteKit Project Structure ``` src/ ├── app.html # HTML shell (dark mode preset, typo: "lass" not "class") ├── routes/ │ ├── +layout.svelte # Root layout component │ ├── +page.svelte # Home page (uses Flowbite Alert) │ └── layout.css # Route-level styles └── lib/ ├── index.js # $lib alias exports (currently empty) └── assets/ # Static assets ``` ### Build Artifacts (gitignored) - `.svelte-kit/` — SvelteKit type hints & config cache - `/build/` — Production output (Node.js adapter) - `vite.config.js.timestamp-*` — Vite cache ### Port Configuration - **Dev Server**: port 3000 (configured in `vite.config.js`) - **Preview Server**: port 3000 (default for `npm run preview`) ## Svelte & SvelteKit Quirks ### Runes Mode (Mandatory for this Project) All code must use Svelte 5 **runes** by default. The Vite config enforces this for all files **except** those in `node_modules`: ```js runes: ({ filename }) => filename.split(/[/\\]/).includes('node_modules') ? undefined : true ``` **Effect on Component Writing:** - Use `$state()` instead of `let` for reactive variables - Use `$derived` for computed values - Use `$effect()` for side effects (replaces `onMount`, `afterUpdate`) - Snippets use `{#snippet name()}` syntax (shown in `+page.svelte`) **Action:** Any new `.svelte` files must use runes. Violating this breaks dev/build. ### Tailwind CSS Integration - Configured via `@tailwindcss/vite` plugin (not `postcss`) - Plugins loaded: `@tailwindcss/forms`, `@tailwindcss/typography` - Dark mode: hardcoded in `app.html` (`class="dark"` on ``) - No separate `tailwind.config.js` (handled entirely via Vite plugin) ### SvelteKit Adapter - Using `@sveltejs/adapter-node` for Node.js deployments - Production build outputs to `/build/` - Environment: supports `$env` module for runtime env vars ## Git & Workflow - **Branch**: master - **Commits**: Only one initial commit (`de93a8a`) - **Status**: Clean working tree (no staged/unstaged changes) **Note:** This is a fresh project. No established commit conventions yet. ## Known Issues & Observations 1. **HTML Typo**: `app.html` line 9 has `lass="bg-white dark:bg-gray-700"` (missing `c` in `class`) - Should be: `class="bg-white dark:bg-gray-700"` - Affects dark mode styling on body element 2. **No CI/CD**: No `.github/workflows/` or other CI pipeline configured 3. **No Tests**: No test framework or test scripts in `package.json` 4. **Minimal jsconfig**: Inherits TypeScript config from `.svelte-kit/tsconfig.json` but doesn't enforce type checking (`checkJs: false`) ## Common Agent Tasks & Gotchas ### Adding Components - Use Flowbite Svelte components from `flowbite-svelte` - Wrap icons in `{#snippet}` blocks (Svelte 5 pattern) - All components must use runes for reactivity ### Modifying Styles - Tailwind classes work directly in templates - No CSS Modules configured (use Svelte `