tibi-svelte-starter/.github/instructions/frontend.instructions.md

name, description, applyTo

name	description	applyTo
Frontend	Svelte SPA structure and conventions.	frontend/src/**

Frontend

• SPA entry point is frontend/src/index.ts, main component is frontend/src/App.svelte.
• Component organization: lib/ for utilities and stores, keep route components in a routes/ folder when needed, css/ for styles.
• Use PascalCase component names and export props at the top of the <script> tag; keep code/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.

i18n

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

E2E Tests (Playwright)

• When developing frontend features: extend or create corresponding E2E tests in tests/e2e/.
• Shared fixtures and helpers in tests/e2e/fixtures.ts: waitForSpaReady(page), navigateToRoute(page, path), clickSpaLink(page, selector), authedPage fixture.
• 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.