tibi-svelte-starter/frontend/AGENTS.md

Frontend

Svelte 5 SPA bundled with esbuild and styled with Tailwind CSS 4.

Structure

• Entry point: src/index.ts, main component: src/App.svelte.
• src/lib/ — utilities, stores, actions, API layer.
• src/widgets/ — reusable UI components (Button, Input, Form, etc.).
• src/css/ — global styles and Tailwind imports.
• Keep route components in a src/routes/ folder when needed.

Conventions

• PascalCase component names; export props at the top of <script> tag.
• Keep code and comments in English.
• SSR safety: guard browser-only code with typeof window !== "undefined".
• API behavior: PUT responses return only changed fields; filter by id uses _id; API requests reject non-2xx with { response, data } and error payload in error.data.error.

Tailwind CSS

• Always use canonical Tailwind utility classes instead of arbitrary values when a standard equivalent exists (e.g. h-16.5 not h-[66px], min-h-3 not min-h-[12px]).
• Only use arbitrary values ([...]) when no standard utility covers the needed value.

i18n

• svelte-i18n is configured in src/lib/i18n/index.ts with lazy loading for locale files.
• Locale files live in src/lib/i18n/locales/{lang}.json.
• URL-based language routing: /{lang}/... (e.g. /de/, /en/about).
• Language utilities in src/lib/i18n.ts: extractLanguageFromPath(), localizedPath(), getLanguageSwitchUrl().
• Use $_("key") from svelte-i18n for translations in components.

Related tests

• When developing frontend features: extend or create corresponding E2E tests in tests/e2e/.
• After frontend changes, run only the affected E2E tests: npx playwright test tests/e2e/filename.spec.ts or -g "test name".
• When tests fail, clarify whether the frontend or the test needs adjustment — coordinate with the user.