AGENTS.md — testing-proxy

A SvelteKit 5 + Tailwind frontend with i18n (Paraglide) and dark mode enabled by default.

Project Overview

Framework: SvelteKit 2.63.0 with Svelte 5 (runes mode, mandatory)
Build Tool: Vite 8.0.16
Styling: Tailwind CSS 4.3.0 (via @tailwindcss/vite, no separate config)
Components: Flowbite Svelte 1.33.1 + Flowbite Icons
i18n: Paraglide JS (English + Spanish, auto-localized routes)
Adapter: @sveltejs/adapter-node (Node.js deployments)
Package Manager: pnpm
Type System: JavaScript (JSConfig, no TypeScript enforcement)

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)
├── hooks.js           # Paraglide i18n route localization
├── routes/
│   ├── +layout.svelte # Root layout component
│   ├── +page.svelte   # Home page (Flowbite Alert, language switcher, dark mode toggle)
│   └── layout.css     # Route-level styles
└── lib/
    ├── index.js       # $lib alias exports (currently empty)
    ├── paraglide/     # i18n (auto-generated, DO NOT EDIT)
    │   ├── messages.js          # Locale-aware message functions
    │   ├── runtime.js           # getLocale(), setLocale(), deLocalizeUrl()
    │   └── messages/*.js        # en-us, es-mx translations
    └── 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
Recent commits: 5 commits total (initial + dark mode + i18n + documentation + icon fix)
Status: Clean working tree (no staged/unstaged changes)

Convention: No established commit message convention yet. Keep it clear and atomic.

Known Issues & Observations

No CI/CD: No .github/workflows/ or other CI pipeline configured
No Tests: No test framework or test scripts in package.json
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

SvelteKit Docs: https://svelte.dev/docs/kit
Flowbite Svelte: https://flowbite-svelte.com/
Tailwind CSS: https://tailwindcss.com/docs
Svelte 5 Runes: https://svelte.dev/docs/svelte/what-are-runes

Last Updated: Verified against current project state (5 commits, i18n enabled, no typos, clean build)

AGENTS.md 5.4 KB 히스토리 Raw