BPMN Test SvelteKit Project Guide
This skill provides expert guidance for working with a SvelteKit 5 application configured with Paraglide.js internationalization, Tailwind CSS 4, and comprehensive testing infrastructure.
Project Architecture
Technology Stack
**Framework**: SvelteKit 5 with file-based routing**Internationalization**: Paraglide.js with `en` (default) and `es` locales**Styling**: Tailwind CSS 4 via Vite plugin with forms and typography plugins**Testing**: Vitest (unit/component) + Playwright (e2e)**Type Safety**: TypeScript with svelte-checkProject Structure
```
src/
├── lib/
│ ├── paraglide/ # Auto-generated i18n code (DO NOT EDIT)
│ ├── assets/ # Static assets
│ └── index.ts # Public lib exports
├── routes/ # SvelteKit file-based routing
│ ├── +layout.svelte # Root layout
│ ├── +page.svelte # Home page
│ └── demo/ # Demo pages
├── hooks.ts # Client hooks (rerouting)
├── hooks.server.ts # Server hooks (i18n middleware)
└── app.d.ts # TypeScript declarations
e2e/ # Playwright e2e tests
messages/ # i18n message files (en.json, es.json)
```
Development Workflow
Common Commands
**Development**:
`npm run dev` — Start dev server`npm run dev -- --open` — Start dev server and open browser**Building**:
`npm run build` — Build for production`npm run preview` — Preview production build**Type Checking**:
`npm run check` — Run svelte-check once`npm run check:watch` — Run svelte-check in watch mode**Code Quality**:
`npm run format` — Format all files with Prettier`npm run lint` — Check formatting and run ESLint**Testing**:
`npm test` — Run all tests (unit + e2e)`npm run test:unit` — Run Vitest in watch mode`npm run test:unit -- --run` — Run Vitest once`npm run test:e2e` — Run Playwright e2e testsKey Implementation Details
Internationalization (i18n)
**Configuration**:
Message files: `messages/en.json` and `messages/es.json`Settings: `project.inlang/settings.json`Generated code: `src/lib/paraglide/` (auto-generated, DO NOT EDIT)**Critical Implementation Points**:
`src/hooks.server.ts:4-13` — Paraglide middleware handles locale detection and sets `%paraglide.lang%` placeholder`src/hooks.ts:3` — `deLocalizeUrl` reroute removes locale prefixes from URLs for internal routing**Important**: Paraglide code is auto-generated during build/dev. Never edit files in `src/lib/paraglide/` directly. Modify `messages/*.json` files instead.
Testing Architecture
**Vitest Unit Tests** (`vite.config.ts:15-43`):
Two test projects: - `client`: `*.svelte.{test,spec}.{js,ts}` — Runs in Playwright's Chromium browser
- `server`: Other `*.{test,spec}.{js,ts}` — Runs in Node environment
Setup file: `vitest-setup-client.ts`Configuration: `expect.requireAssertions: true` (all assertions required)**Playwright E2E Tests**:
Configuration: `playwright.config.ts`Test directory: `e2e/`Runs against production build on port 4173Styling
Tailwind CSS 4 is configured via Vite plugin (`vite.config.ts:8`) with:
`@tailwindcss/forms` plugin`@tailwindcss/typography` pluginPrettier plugin for automatic class sortingWorking with Svelte MCP Server
When working with Svelte code, you have access to the Svelte MCP server with these tools:
1. list-sections
**ALWAYS USE FIRST** when asked about Svelte or SvelteKit topics.
Returns structured list of documentation sections with titles, use_cases, and pathsEssential for discovering relevant documentation2. get-documentation
**Use after analyzing list-sections output.**
Retrieves full documentation for specific sectionsAccept single or multiple sectionsFetch ALL relevant sections based on use_cases field3. svelte-autofixer
**REQUIRED before sharing Svelte code with user.**
Analyzes code and returns issues/suggestionsKeep calling until no issues or suggestions remainNever share Svelte code without running this tool4. playground-link
**Use only after user confirmation.**
Generates Svelte Playground link with codeAsk user if they want playground link after completing codeNEVER use if code was written to project filesStep-by-Step Workflow for Svelte Tasks
1. **Discovery**: Use `list-sections` to find relevant documentation
2. **Learning**: Use `get-documentation` to fetch ALL relevant sections based on use_cases
3. **Implementation**: Write Svelte/SvelteKit code following documentation
4. **Validation**: Run `svelte-autofixer` repeatedly until no issues remain
5. **Testing**: Run appropriate tests (`npm run test:unit` or `npm run test:e2e`)
6. **Type Check**: Run `npm run check` to verify TypeScript correctness
7. **Playground** (optional): Ask user if they want playground link, then use `playground-link`
Important Notes
The project uses `adapter-auto` which needs to be changed for specific deployment targetsAll Paraglide-generated code is managed automaticallyTailwind classes are auto-sorted by PrettierAll test assertions are required per Vitest configE2E tests require production build to be runningConstraints
DO NOT edit files in `src/lib/paraglide/` — these are auto-generatedDO NOT share Svelte code without running `svelte-autofixer` firstDO NOT generate playground links unless user confirms they want oneDO NOT skip type checking before committing code changes