AGENTS.md 5.0 KB

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

# 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:

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 <html>)
  • 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 <style> blocks for scoped styles)
  • Dark mode available via dark: prefix (already enabled on root)

Creating New Routes

  • Add +page.svelte (and optionally +page.js, +layout.svelte) in src/routes/[path]/
  • SvelteKit filesystem routing is automatic
  • Server-side code goes in +page.server.js (not configured; would need adapter setup)

Environment Variables

  • Store in .env file (gitignored)
  • Reference via import { env } from '$env/dynamic/public' or $env/static/public
  • Prefix public vars with VITE_ for client access

Performance Notes

  • Vite dev server is fast; rebuilds are near-instant
  • Production build with Adapter-Node is optimized for server deployments
  • No bundle analyzer configured; use Vite's built-in --profile if needed

External Resources


Last Updated: Initial creation for fresh SvelteKit project