From 6b08121f535256e5ca82b236d4c2d453e7015376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Mon, 17 Nov 2025 22:46:38 +0100
Subject: [PATCH 1/7] add spec for separate example repo

---
 specs/example-project.md | 74 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 specs/example-project.md

diff --git a/specs/example-project.md b/specs/example-project.md
new file mode 100644
index 0000000..69a19e2
--- /dev/null
+++ b/specs/example-project.md
@@ -0,0 +1,74 @@
+# Example Project Toggle Spec
+
+## Background
+- The generator `create/main.js` copies the entire `template/` workspace into the target directory and immediately runs setup commands, producing a project pre-populated with demo data and demo UI flows.
+- Removing the example today requires deep edits across `prototype`, `mock-backend`, and `mock-data`, plus updates to docs and build scripts. Developers struggle to strip the demo without breaking interconnected references to demo APIs, dataset builders, and MSW handlers.
+- Goal: ship a clean, empty project by default while preserving the current demo as an opt-in bundle.
+
+## Current Template State
+- **Prototype (`template/prototype`)**
+  - Routes are hard-wired to demo screens (`app/routes.ts` routing into `app/demo/*.tsx`, e.g. `dashboard.tsx`, `employees.tsx`) that assume MSW demo endpoints.
+  - Root loader/action logic (`app/root.tsx`) fetches demo user data (`DemoApi` from `app/demo/api.ts`) and renders demo-specific login buttons, navigation, and layout.
+  - Local MSW setup (`app/mocks/handlers.ts`) imports `@repo/mock-backend/medium` so the app only works with the demo dataset.
+- **Mock backend (`template/mock-backend/src`)**
+  - Provides dataset-bound handlers (`handlers/demo.ts`) and dataset presets (`medium`, `full`) that generate demo responses by reading demo dataset indices.
+  - Auth utilities (`auth.ts`) expect JWT payloads populated by the demo dataset.
+- **Mock data (`template/mock-data`)**
+  - Dataset generator (`src/generators/dataset.ts`) creates seeded data for companies, persons, roles, and auth tokens that power demo flows.
+  - CLI (`cli/generate-data.mjs`) and published JSON fixtures (`data-mocks/*.json`) serialize the demo dataset in small/medium/full sizes.
+- **Generator behavior**
+  - `create/main.js` blindly copies `template/` and replaces tokens, so the default scaffold always contains demo code, fixtures, and run scripts that assume the dataset can build immediately.
+  - Automated tests (`tests/generator.test.mjs`) assert that the generated project can run `npm run build:data` and `npm run build`, implicitly relying on demo assets.
+
+## Desired Behavior & Requirements
+1. **Empty project by default**
+   - Generated workspace should have the same package layout but with neutral starter files: prototype is a skeleton shell, mock backend/data contain minimal no-op implementations (or are omitted) so new teams can build from scratch.
+   - Default `npm run build`, `npm run typecheck`, and other scripts must succeed without demo data.
+2. **Opt-in example bundle**
+   - Introduce a generator flag (e.g. `--with-example`, `withExample` option from `npm init`) that copies the existing demo content into a sibling `example/` directory _inside_ the generated project.
+   - The `example/` directory should mirror the current template structure (`prototype`, `mock-data`, `mock-backend`, etc.) so teams can browse or copy patterns without polluting the main workspace.
+   - Example assets should remain runnable in-place (document how to install & build the example).
+   - It must be possible to delete the example directory without breaking any dependencies.
+3. **Flag plumbing**
+   - Update argument normalization in `create/index.js` so CLI flags / `npm init` options expose `withExample` (boolean).
+   - Modify `create/main.js` to:
+     - Copy the slim template into the project root.
+     - When `withExample` is true, additionally copy the rich demo tree into `targetDir/example`.
+     - Ensure environment token replacement, dependency installs, and format commands only touch the base project; example content can be left untouched or bootstrapped separately per spec decisions.
+4. **Documentation & DX**
+   - Document the new flag and default-empty behavior in `README.md` (both repository root and generated template readmes as needed).
+   - Provide guidance inside `example/README.md` (new or repurposed) explaining how to run the demo and what parts can be copied into the main app.
+5. **Testing & automation**
+   - Expand `tests/generator.test.mjs` (or add new cases) to cover:
+     - Default scaffold produces empty baseline and still passes install/typecheck/build (with updated expectations).
+     - `--with-example` scaffolds the extra directory and preserves demo assets (spot-check key files or run targeted commands if feasible).
+   - Ensure CI steps or scripts that assume demo data are updated or gated behind the flag.
+
+## Implementation Notes & Work Items
+- Refactor template content:
+  - Extract current demo sources (`prototype/app/demo`, associated context providers, MSW handlers, dataset generation, mock backend handlers, `mock-data` presets) into a new source tree destined for `example/`.
+  - Introduce lightweight placeholders in the base template: e.g., a blank `prototype` with a single welcome page, stubbed mock-data scripts that return empty structures, and no prebuilt JSON fixtures.
+  - Decide whether base template should keep mock packages at all (empty package with placeholder README) vs. omit them; ensure workspaces remain valid.
+- Update generator copy logic:
+  - Allow copying multiple source roots (base template and example bundle) while respecting existing token replacement (app name/title) without touching example content unless required.
+  - Consider deduplicating shared config (eslint/tsconfig) so both base and example can reuse it without duplication.
+  - Guard install/format steps when `withExample` is used (e.g., do not attempt to install dependencies inside `example/` unless explicitly desired).
+- Data & auth considerations:
+  - Empty project should not ship demo JWT payloads or auth stubs; evaluate whether to include a minimal `auth` scaffold or leave instructions for developers to implement.
+  - When `withExample` is chosen, ensure dataset presets and JSON outputs remain accessible (copy existing `data-mocks/*.json`).
+- Migration of docs & scripts:
+  - Audit references to demo flows in `template/docs` and update to reflect new optional example.
+  - Update `README` badges, quick-start instructions, and `docs/modules/ROOT/pages` to describe both baseline and example usage.
+- Ensure `npm run build:data` and related scripts degrade gracefully when the dataset is empty (either no-op or produce placeholder files).
+
+## Open Questions
+- Should the CLI prompt the user interactively about including the example when running without `--with-example`?
+- Should the example directory be completely independent (own package.json/turbo config), or share the monorepo root and rely on workspaces?
+- Do we need to ship prebuilt mock JSON for the empty template (e.g., empty arrays) to satisfy downstream tooling?
+- How do we handle token replacement inside the example bundle—do we mirror replacements there or leave the original `planning-stack-template` strings?
+
+## Validation Plan
+- Run generator default path with `SKIP_SETUP=1` to ensure scaffolding succeeds and key files contain the expected placeholders.
+- Run generator with `--with-example`, install dependencies, and verify both the base project and the `example/` bundle can execute `npm run build:data`, `npm run build`, and `npm run dev` (document which commands should run where).
+- Add automated test coverage for the new flag and update snapshots/expectations accordingly.
+- Confirm lint/typecheck/build commands in the repository (root) remain green after restructuring template assets.

From 26a4a1a617fba8187b227aac8c60830a72aed230 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Tue, 24 Mar 2026 08:32:06 +0100
Subject: [PATCH 2/7] split starter scaffold from example templates

---
 AGENTS.md                                     |   8 +-
 README.md                                     |  61 ++-
 create/index.js                               | 139 ++++++-
 create/main.js                                | 235 ++++++------
 .../.cursor/rules/accessibility.mdc           |  24 ++
 .../react-router/.cursor/rules/react.mdc      |  18 +
 .../react-router/.cursor/rules/tests.mdc      |  11 +
 example-templates/react-router/.env.example   |   2 +
 example-templates/react-router/.gitignore     |  47 +++
 example-templates/react-router/.gitlab-ci.yml | 188 ++++++++++
 .../react-router/.licenses/isc.md             |  17 +
 .../react-router/.lintstagedrc.js             |   3 +
 example-templates/react-router/.nvmrc         |   1 +
 .../react-router/.prettierignore              |   6 +
 example-templates/react-router/.prettierrc.js |  30 ++
 .../react-router/.vscode/settings.json        |   3 +
 example-templates/react-router/LICENSE.md     |  18 +
 example-templates/react-router/README.md      |  33 ++
 .../react-router/api/commons/enums.ts         |  12 +
 .../react-router/api/commons/types.ts         |  42 +++
 .../react-router}/api/demo/types.ts           |   0
 .../react-router/api/eslint.config.js         |  15 +
 .../react-router/api/package.json             |  43 +++
 .../react-router/api/tsconfig.json            |  12 +
 .../react-router/config/eslint/README.md      |   3 +
 .../react-router/config/eslint/base.js        |  61 +++
 .../react-router/config/eslint/package.json   |  25 ++
 .../react-router/config/eslint/react.js       |  42 +++
 .../react-router/config/typescript/base.json  |  23 ++
 .../config/typescript/node-library.json       |  12 +
 .../config/typescript/package.json            |   9 +
 .../config/typescript/react-app.json          |  13 +
 .../config/typescript/react-library.json      |  10 +
 .../react-router/docs/antora-playbook.yml     |  22 ++
 .../react-router/docs/antora.yml              |   5 +
 .../ROOT/images/Prototyp-Repo.drawio.png      | Bin 0 -> 24086 bytes
 .../react-router/docs/modules/ROOT/nav.adoc   |  11 +
 .../docs/modules/ROOT/pages/architecture.adoc | 145 ++++++++
 .../modules/ROOT/pages/design-system.adoc     |  57 +++
 .../modules/ROOT/pages/documentation.adoc     |  93 +++++
 .../modules/ROOT/pages/getting-started.adoc   | 139 +++++++
 .../docs/modules/ROOT/pages/index.adoc        |  78 ++++
 .../docs/modules/ROOT/pages/login.adoc        |  62 ++++
 .../docs/modules/ROOT/pages/mock-data.adoc    |  46 +++
 .../docs/modules/ROOT/pages/monorepo.adoc     |  64 ++++
 .../docs/modules/ROOT/pages/prototype.adoc    | 105 ++++++
 .../docs/modules/ROOT/pages/tailwind.adoc     |  22 ++
 .../docs/modules/ROOT/partials/monorepo.puml  |  42 +++
 .../react-router/docs/package.json            |  22 ++
 .../react-router/frontend/package.json        |  12 +
 .../react-router/mocks/AGENTS.md              | 128 +++++++
 .../react-router/mocks/README.md              |  74 ++++
 .../react-router/mocks/cli/generate-data.mjs  |  66 ++++
 .../react-router/mocks/eslint.config.js       |  12 +
 .../react-router/mocks/package.json           |  63 ++++
 .../mocks/src/generators/auth.ts              |   0
 .../mocks/src/generators/config.ts            |  55 +++
 .../mocks/src/generators/dataset.test.ts      |  24 ++
 .../mocks/src/generators/dataset.ts           | 180 +++++++++
 .../mocks/src/generators/demo/companies.ts    |   0
 .../mocks/src/generators/demo/persons.ts      |   0
 .../mocks/src/generators/demo/types.ts        |   0
 .../mocks/src/generators/utils.ts             |   0
 .../react-router/mocks/src/index.ts           |   5 +
 .../react-router/mocks/src/static/README.md   |   1 +
 .../react-router/mocks/tsconfig.json          |  12 +
 .../react-router/mocks/vite.config.ts         |   8 +
 example-templates/react-router/msw/AGENTS.md  | 167 +++++++++
 .../react-router/msw/eslint.config.js         |  12 +
 .../react-router/msw/full/index.ts            |  22 ++
 .../react-router/msw/medium/index.ts          |  18 +
 .../react-router/msw/package.json             |  61 +++
 .../react-router}/msw/src/auth.ts             |   0
 .../react-router}/msw/src/handlers/auth.ts    |   0
 .../react-router}/msw/src/handlers/demo.ts    |   0
 .../react-router/msw/src/handlers/index.ts    |   2 +
 .../react-router/msw/src/index.ts             |   2 +
 .../react-router/msw/src/utils.ts             |  39 ++
 .../react-router/msw/tsconfig.json            |  12 +
 example-templates/react-router/package.json   |  53 +++
 .../react-router/prototype/.cursorrules.md    |  18 +
 .../react-router/prototype/README.md          |  22 ++
 .../context-providers/apiContext.tsx          |   0
 .../context-providers/permissionContext.tsx   |   0
 .../prototype/app/components/ui/avatar.tsx    |  45 +++
 .../prototype/app/components/ui/button.tsx    |  50 +++
 .../prototype/app/components/ui/card.tsx      |  55 +++
 .../app/components/ui/empty-state.tsx         |   1 +
 .../prototype/app/components/ui/table.tsx     |  94 +++++
 .../prototype/app/demo/admin.tsx              |   0
 .../react-router}/prototype/app/demo/api.ts   |   0
 .../prototype/app/demo/dashboard.tsx          |   0
 .../prototype/app/demo/employees.tsx          |   0
 .../prototype/app/entry.client.tsx            |  17 +
 .../prototype/app/hooks/useBreakpoint.ts      |  36 ++
 .../react-router/prototype/app/lib/utils.ts   |  35 ++
 .../prototype/app/mocks/browser.ts            |   9 +
 .../prototype/app/mocks/handlers.ts           |   9 +
 .../react-router/prototype/app/root.tsx       | 288 +++++++++++++++
 .../react-router/prototype/app/routes.ts      |  11 +
 .../prototype/app/routes/_index.tsx           |  16 +
 .../prototype/app/styles/tailwind.css         |  70 ++++
 .../react-router/prototype/app/vite-env.d.ts  |  11 +
 .../react-router/prototype/components.json    |  21 ++
 .../react-router/prototype/eslint.config.mjs  |  38 ++
 .../react-router/prototype/package.json       |  58 +++
 .../react-router/prototype/postcss.config.js  |   6 +
 .../react-router/prototype/public/favicon.ico | Bin 0 -> 16958 bytes
 .../prototype/public/mockServiceWorker.js     | 349 ++++++++++++++++++
 .../react-router/prototype/public/robots.txt  |   2 +
 .../prototype/react-router.config.ts          |   6 +
 .../react-router/prototype/tailwind.config.js |  10 +
 .../react-router/prototype/tsconfig.json      |  20 +
 .../react-router/prototype/vite.config.ts     |  26 ++
 example-templates/react-router/turbo.json     |  59 +++
 example-templates/react-router/ui/README.md   |   6 +
 .../react-router/ui/eslint.config.mjs         |  21 ++
 .../react-router/ui/package.json              |  53 +++
 .../react-router/ui/src/lib/utils.ts          |  20 +
 .../react-router/ui/src/ui/empty-state.tsx    |  19 +
 .../react-router/ui/src/ui/scroll-area.tsx    |  44 +++
 .../react-router/ui/tailwind.config.js        |  60 +++
 .../react-router/ui/tsconfig.json             |   8 +
 .../ui/turbo/generators/config.ts             |  30 ++
 .../turbo/generators/templates/component.hbs  |   8 +
 package.json                                  |   5 +-
 template/.prettierignore                      |   3 +-
 template/README.md                            |  81 ++--
 template/api/package.json                     |   5 +-
 .../docs/modules/ROOT/pages/architecture.adoc | 117 ++----
 .../modules/ROOT/pages/getting-started.adoc   | 106 ++----
 template/docs/modules/ROOT/pages/index.adoc   |  79 ++--
 .../docs/modules/ROOT/pages/mock-data.adoc    |  49 +--
 .../docs/modules/ROOT/pages/monorepo.adoc     |  47 ++-
 .../docs/modules/ROOT/pages/prototype.adoc    | 108 +-----
 template/mocks/README.md                      |  76 +---
 template/mocks/cli/generate-data.mjs          |   2 +-
 template/mocks/src/generators/config.ts       |  60 +--
 template/mocks/src/generators/dataset.test.ts |  26 +-
 template/mocks/src/generators/dataset.ts      | 182 +--------
 template/mocks/src/index.ts                   |   1 -
 template/msw/full/index.ts                    |  19 +-
 template/msw/medium/index.ts                  |  15 +-
 template/msw/src/handlers/index.ts            |   5 +-
 template/msw/src/index.ts                     |   3 +-
 template/prototype/README.md                  |  21 +-
 template/prototype/app/mocks/handlers.ts      |   8 +-
 template/prototype/app/root.tsx               | 328 +++-------------
 template/prototype/app/routes.ts              |   5 +-
 template/prototype/app/routes/_index.tsx      |  46 ++-
 template/prototype/vite.config.ts             |  10 +-
 tests/generator.test.mjs                      |  43 +++
 152 files changed, 4971 insertions(+), 1237 deletions(-)
 create mode 100644 example-templates/react-router/.cursor/rules/accessibility.mdc
 create mode 100644 example-templates/react-router/.cursor/rules/react.mdc
 create mode 100644 example-templates/react-router/.cursor/rules/tests.mdc
 create mode 100644 example-templates/react-router/.env.example
 create mode 100644 example-templates/react-router/.gitignore
 create mode 100644 example-templates/react-router/.gitlab-ci.yml
 create mode 100644 example-templates/react-router/.licenses/isc.md
 create mode 100644 example-templates/react-router/.lintstagedrc.js
 create mode 100644 example-templates/react-router/.nvmrc
 create mode 100644 example-templates/react-router/.prettierignore
 create mode 100644 example-templates/react-router/.prettierrc.js
 create mode 100644 example-templates/react-router/.vscode/settings.json
 create mode 100644 example-templates/react-router/LICENSE.md
 create mode 100644 example-templates/react-router/README.md
 create mode 100644 example-templates/react-router/api/commons/enums.ts
 create mode 100644 example-templates/react-router/api/commons/types.ts
 rename {template => example-templates/react-router}/api/demo/types.ts (100%)
 create mode 100644 example-templates/react-router/api/eslint.config.js
 create mode 100644 example-templates/react-router/api/package.json
 create mode 100644 example-templates/react-router/api/tsconfig.json
 create mode 100644 example-templates/react-router/config/eslint/README.md
 create mode 100644 example-templates/react-router/config/eslint/base.js
 create mode 100644 example-templates/react-router/config/eslint/package.json
 create mode 100644 example-templates/react-router/config/eslint/react.js
 create mode 100644 example-templates/react-router/config/typescript/base.json
 create mode 100644 example-templates/react-router/config/typescript/node-library.json
 create mode 100644 example-templates/react-router/config/typescript/package.json
 create mode 100644 example-templates/react-router/config/typescript/react-app.json
 create mode 100644 example-templates/react-router/config/typescript/react-library.json
 create mode 100644 example-templates/react-router/docs/antora-playbook.yml
 create mode 100644 example-templates/react-router/docs/antora.yml
 create mode 100644 example-templates/react-router/docs/modules/ROOT/images/Prototyp-Repo.drawio.png
 create mode 100644 example-templates/react-router/docs/modules/ROOT/nav.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/architecture.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/design-system.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/documentation.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/getting-started.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/index.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/login.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/mock-data.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/monorepo.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/prototype.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/pages/tailwind.adoc
 create mode 100644 example-templates/react-router/docs/modules/ROOT/partials/monorepo.puml
 create mode 100644 example-templates/react-router/docs/package.json
 create mode 100644 example-templates/react-router/frontend/package.json
 create mode 100644 example-templates/react-router/mocks/AGENTS.md
 create mode 100644 example-templates/react-router/mocks/README.md
 create mode 100755 example-templates/react-router/mocks/cli/generate-data.mjs
 create mode 100644 example-templates/react-router/mocks/eslint.config.js
 create mode 100644 example-templates/react-router/mocks/package.json
 rename {template => example-templates/react-router}/mocks/src/generators/auth.ts (100%)
 create mode 100644 example-templates/react-router/mocks/src/generators/config.ts
 create mode 100644 example-templates/react-router/mocks/src/generators/dataset.test.ts
 create mode 100644 example-templates/react-router/mocks/src/generators/dataset.ts
 rename {template => example-templates/react-router}/mocks/src/generators/demo/companies.ts (100%)
 rename {template => example-templates/react-router}/mocks/src/generators/demo/persons.ts (100%)
 rename {template => example-templates/react-router}/mocks/src/generators/demo/types.ts (100%)
 rename {template => example-templates/react-router}/mocks/src/generators/utils.ts (100%)
 create mode 100644 example-templates/react-router/mocks/src/index.ts
 create mode 100644 example-templates/react-router/mocks/src/static/README.md
 create mode 100644 example-templates/react-router/mocks/tsconfig.json
 create mode 100644 example-templates/react-router/mocks/vite.config.ts
 create mode 100644 example-templates/react-router/msw/AGENTS.md
 create mode 100644 example-templates/react-router/msw/eslint.config.js
 create mode 100644 example-templates/react-router/msw/full/index.ts
 create mode 100644 example-templates/react-router/msw/medium/index.ts
 create mode 100644 example-templates/react-router/msw/package.json
 rename {template => example-templates/react-router}/msw/src/auth.ts (100%)
 rename {template => example-templates/react-router}/msw/src/handlers/auth.ts (100%)
 rename {template => example-templates/react-router}/msw/src/handlers/demo.ts (100%)
 create mode 100644 example-templates/react-router/msw/src/handlers/index.ts
 create mode 100644 example-templates/react-router/msw/src/index.ts
 create mode 100644 example-templates/react-router/msw/src/utils.ts
 create mode 100644 example-templates/react-router/msw/tsconfig.json
 create mode 100644 example-templates/react-router/package.json
 create mode 100644 example-templates/react-router/prototype/.cursorrules.md
 create mode 100644 example-templates/react-router/prototype/README.md
 rename {template => example-templates/react-router}/prototype/app/components/context-providers/apiContext.tsx (100%)
 rename {template => example-templates/react-router}/prototype/app/components/context-providers/permissionContext.tsx (100%)
 create mode 100644 example-templates/react-router/prototype/app/components/ui/avatar.tsx
 create mode 100644 example-templates/react-router/prototype/app/components/ui/button.tsx
 create mode 100644 example-templates/react-router/prototype/app/components/ui/card.tsx
 create mode 100644 example-templates/react-router/prototype/app/components/ui/empty-state.tsx
 create mode 100644 example-templates/react-router/prototype/app/components/ui/table.tsx
 rename {template => example-templates/react-router}/prototype/app/demo/admin.tsx (100%)
 rename {template => example-templates/react-router}/prototype/app/demo/api.ts (100%)
 rename {template => example-templates/react-router}/prototype/app/demo/dashboard.tsx (100%)
 rename {template => example-templates/react-router}/prototype/app/demo/employees.tsx (100%)
 create mode 100644 example-templates/react-router/prototype/app/entry.client.tsx
 create mode 100644 example-templates/react-router/prototype/app/hooks/useBreakpoint.ts
 create mode 100644 example-templates/react-router/prototype/app/lib/utils.ts
 create mode 100644 example-templates/react-router/prototype/app/mocks/browser.ts
 create mode 100644 example-templates/react-router/prototype/app/mocks/handlers.ts
 create mode 100644 example-templates/react-router/prototype/app/root.tsx
 create mode 100644 example-templates/react-router/prototype/app/routes.ts
 create mode 100644 example-templates/react-router/prototype/app/routes/_index.tsx
 create mode 100644 example-templates/react-router/prototype/app/styles/tailwind.css
 create mode 100644 example-templates/react-router/prototype/app/vite-env.d.ts
 create mode 100644 example-templates/react-router/prototype/components.json
 create mode 100644 example-templates/react-router/prototype/eslint.config.mjs
 create mode 100644 example-templates/react-router/prototype/package.json
 create mode 100644 example-templates/react-router/prototype/postcss.config.js
 create mode 100644 example-templates/react-router/prototype/public/favicon.ico
 create mode 100644 example-templates/react-router/prototype/public/mockServiceWorker.js
 create mode 100644 example-templates/react-router/prototype/public/robots.txt
 create mode 100644 example-templates/react-router/prototype/react-router.config.ts
 create mode 100644 example-templates/react-router/prototype/tailwind.config.js
 create mode 100644 example-templates/react-router/prototype/tsconfig.json
 create mode 100644 example-templates/react-router/prototype/vite.config.ts
 create mode 100644 example-templates/react-router/turbo.json
 create mode 100644 example-templates/react-router/ui/README.md
 create mode 100644 example-templates/react-router/ui/eslint.config.mjs
 create mode 100644 example-templates/react-router/ui/package.json
 create mode 100644 example-templates/react-router/ui/src/lib/utils.ts
 create mode 100644 example-templates/react-router/ui/src/ui/empty-state.tsx
 create mode 100644 example-templates/react-router/ui/src/ui/scroll-area.tsx
 create mode 100644 example-templates/react-router/ui/tailwind.config.js
 create mode 100644 example-templates/react-router/ui/tsconfig.json
 create mode 100644 example-templates/react-router/ui/turbo/generators/config.ts
 create mode 100644 example-templates/react-router/ui/turbo/generators/templates/component.hbs

diff --git a/AGENTS.md b/AGENTS.md
index c7164eb..4284a0c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -3,19 +3,19 @@
 Refer to the README.md for information about this repository.
 
 ## Project Structure & Module Organization
-`create/` contains the Node-based scaffold (`index.js` normalizes CLI options, `main.js` mutates the template). `template/` ships the starter monorepo with workspaces such as `api/` for backend endpoints, `mock-backend/` and `mock-data/` for fixtures, `prototype/` for the prototype app, `ui/` for shared components, and `docs/` for the Antora documentation site. Shared lint and TS configs live in `template/config/`, and bootstrap assets for generated apps sit under `template`.
+`create/` contains the Node-based scaffold (`index.js` normalizes CLI options, `main.js` mutates the template). `template/` ships the default starter monorepo with workspaces such as `api/`, `mocks/`, `msw/`, `prototype/`, `ui/`, and `docs/`. `example-templates/` contains optional independent examples that can be copied into generated projects under `examples/<name>/`. Shared lint and TS configs live in `template/config/`.
 
 ## Build, Test & Development Commands
 Use Node 22+. Run `npm install` at the repo root before touching the CLI. Template work happens inside `template/`: `npm install` for dependencies, `npm run dev` to launch Turbo-powered development, `npm run build` for a production check, `npm run typecheck` for repository-wide TypeScript validation, `npm run test` to execute Vitest suites, and `npm run format` to apply Prettier across Markdown and TypeScript files.
 
 ## Coding Style & Naming Conventions
-Prettier enforces two-space indentation, single quotes, and trailing commas (`npm run format`). Keep imports auto-organized by the Prettier organize-imports plugin. Use `camelCase` for variables and functions, `PascalCase` for React components and types, and kebab-case for file names (e.g., `generate-data.mjs`). ESLint rules from `template/config/eslint/` run in every workspace—resolve warnings or document exceptions in-code.
+Prettier enforces two-space indentation, single quotes, and trailing commas (`npm run format`). Keep imports auto-organized by the Prettier organize-imports plugin. Use `camelCase` for variables and functions, `PascalCase` for React components and types, and kebab-case for file names (e.g. `generate-data.mjs`). ESLint rules from `template/config/eslint/` run in every workspace, so resolve warnings or document exceptions in-code.
 
 ## Testing Guidelines
-Vitest handles unit and integration coverage; colocate specs as `*.test.ts` or `*.spec.ts`. Run `npm run test` for the full suite, or target a package with `npm run test -- --filter=@repo/ui`. Always follow tests with `npm run typecheck` before opening a PR, and extend coverage around generators (`mock-data/cli`) and UI behavior when adding features.
+Vitest handles unit and integration coverage; colocate specs as `*.test.ts` or `*.spec.ts`. Run `npm run test` for the full suite, or target a package with `npm run test -- --filter=@repo/ui`. Always follow tests with `npm run typecheck` before opening a PR. When changing the scaffold, cover both the default starter and any affected example templates.
 
 ## Commit & Pull Request Guidelines
 Mirror the existing history by writing concise, imperative subjects (`add build verification for Github`). Group logically related changes per commit. Pull requests must include a summary, testing notes (`npm run build`, `npm run test`, etc.), linked issues when applicable, and screenshots for UI updates.
 
 ## Setup & Configuration Notes
-The scaffold copies `.env.example` to `.env` and swaps `planning-stack-template` tokens; keep those references in sync when editing template assets. Honor the `SKIP_SETUP` and `SKIP_FORMAT` flags in `create/main.js` so automated flows remain consistent. Update every consumer (e.g., `template/gitlab-ci.yml`) when adjusting CI scaffolding.
+The scaffold copies `.env.example` to `.env` and swaps `planning-stack-template` tokens in the base template. Honor the `SKIP_SETUP` and `SKIP_FORMAT` flags in `create/main.js` so automated flows remain consistent. Keep example templates independent from the base workspace so they can be deleted safely and are not built automatically by the root Turborepo configuration.
diff --git a/README.md b/README.md
index 573b7c5..3ef9bc6 100644
--- a/README.md
+++ b/README.md
@@ -1,52 +1,35 @@
-# Frontend Monorepo for Rapid Prototyping
+# Tinker Stack
 
-This is a npm Template for a Frontend Monorepo. 
+Tinker Stack is a project scaffold for frontend monorepos focused on rapid prototyping.
 
-It puts emphasis on rapid prototyping and a prototype-driven development
-([Pixar Planning](https://www.youtube.com/watch?v=gbuWJ48T0bE&t=1294s)).
+By default it generates a clean starter workspace with:
 
-The prototypes are using a virtual and ephemeral backend, so changes can be made very quickly without any need for
-data migrations on schema changes.
+- a minimal React Router prototype shell
+- shared `api`, `ui`, `msw`, and `mocks` packages
+- Turborepo, TypeScript, ESLint, Prettier, and Antora wiring
 
-Stakeholders can test a fully working UI before a single line of backend code has been written.
+The scaffold no longer ships a demo application in the base workspace.
 
-Test UI concepts on day 1, iterate on them with the designer on day 2 and present them to the customer on day 3.
+## Create a project
 
-The API to the backend has usually had several major iterations before a backend developer even gets involved.
-
-## What is included?
-
-This monorepo contains the following packages/apps:
-
-### Apps and Packages
-
-- A prototype for the application, based on React Router SPA.
-- A package that provides the domain types and enums that can be shared with the backend.
-- A documentation in [Antora](https://antora.org/) (AsciiDoc) format.
-- A package that provides synthetic data for the applications using
-  [Faker.js](https://fakerjs.dev/).
-- A package that provides a mock API via service workers using [MSW](https://mswjs.io/).
-- A component library that is shared by the main application and the prototype (still empty).
-- ESLint and TypeScript configurations that are shared throughout the monorepo.
-
-### Features
+```bash
+npm create tinker-stack@latest
+```
 
-- [TypeScript](https://www.typescriptlang.org/) Monorepo based on ESM standards.
-- Turborepo setup for building and running the monorepo.
-- Code formatting with [Prettier](https://prettier.io/) and linting with
-  [ESLint](https://eslint.org/).
+To include an independent example template:
 
-## Documentation
+```bash
+npm create tinker-stack@latest -- --example react-router
+```
 
-The project documentation is written in [AsciiDoc](https://asciidoctor.org/) and is generated using
-[Antora](https://antora.org/).
+The selected examples are copied into `examples/<name>/` inside the generated project. They are
+self-contained and can be deleted without affecting the main workspace.
 
-## Getting Started
+## Example templates
 
-To get started, run the following command:
+The generator is designed for multiple named examples. Today the repository includes:
 
-```bash
-npm create tinker-stack@latest
-```
+- `react-router`
 
-This will create a new project based on the Tinker Stack.
+Each example is installed and run separately from its own directory. The root project does not add
+example folders to its npm workspaces, so Turborepo ignores them by default.
diff --git a/create/index.js b/create/index.js
index 5713a21..e261249 100755
--- a/create/index.js
+++ b/create/index.js
@@ -8,30 +8,120 @@ import { fileURLToPath } from 'node:url';
 const __filename = fileURLToPath(import.meta.url);
 const packageRoot = path.dirname(path.dirname(__filename));
 const templateDir = path.join(packageRoot, 'template');
+const exampleTemplatesDir = path.join(packageRoot, 'example-templates');
+const DEFAULT_EXAMPLE = 'react-router';
 
-function targetFromArgv() {
-  const argv = process.argv.slice(2);
-  // prefer a last non-flag positional argument as the target folder
-  for (let i = argv.length - 1; i >= 0; i--) {
-    if (!argv[i].startsWith('-')) return argv[i];
+function parseCliArgs(argv = process.argv.slice(2)) {
+  const options = {
+    cwd: undefined,
+    debug: undefined,
+    install: undefined,
+    examples: [],
+    withExample: false
+  };
+  const positionals = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+
+    if (arg === '--example' || arg === '--examples') {
+      const value = argv[i + 1];
+      if (value && !value.startsWith('-')) {
+        options.examples.push(...splitExampleNames(value));
+        i += 1;
+      }
+      continue;
+    }
+
+    if (arg.startsWith('--example=')) {
+      options.examples.push(...splitExampleNames(arg.slice('--example='.length)));
+      continue;
+    }
+
+    if (arg.startsWith('--examples=')) {
+      options.examples.push(...splitExampleNames(arg.slice('--examples='.length)));
+      continue;
+    }
+
+    if (arg === '--with-example') {
+      options.withExample = true;
+      continue;
+    }
+
+    if (arg === '--cwd') {
+      const value = argv[i + 1];
+      if (value && !value.startsWith('-')) {
+        options.cwd = value;
+        i += 1;
+      }
+      continue;
+    }
+
+    if (arg.startsWith('--cwd=')) {
+      options.cwd = arg.slice('--cwd='.length);
+      continue;
+    }
+
+    if (arg === '--debug') {
+      options.debug = true;
+      continue;
+    }
+
+    if (arg === '--install') {
+      options.install = true;
+      continue;
+    }
+
+    if (arg === '--no-install') {
+      options.install = false;
+      continue;
+    }
+
+    if (!arg.startsWith('-')) {
+      positionals.push(arg);
+    }
+  }
+
+  return {
+    ...options,
+    positionals
+  };
+}
+
+function splitExampleNames(value) {
+  return value
+    .split(',')
+    .map(example => example.trim())
+    .filter(Boolean);
+}
+
+function normalizeExampleNames(value) {
+  if (Array.isArray(value)) {
+    return value.flatMap(example => normalizeExampleNames(example));
   }
-  return undefined;
+
+  if (typeof value === 'string') {
+    return splitExampleNames(value);
+  }
+
+  return [];
 }
 
 function normalizeOptions(input = {}) {
   // input may be an options object passed by npm init or undefined
   let opts = {};
   if (typeof input === 'object' && input !== null) opts = input;
+  const cli = parseCliArgs();
 
   const targetDir =
     opts.targetDirectory ||
     opts.name || // common field name for npm init
     opts.project ||
-    targetFromArgv();
+    cli.positionals.at(-1);
 
   const resolvedCwd =
-    typeof opts.cwd === 'string' && opts.cwd.length > 0
-      ? path.resolve(process.cwd(), opts.cwd)
+    typeof (opts.cwd ?? cli.cwd) === 'string' && (opts.cwd ?? cli.cwd).length > 0
+      ? path.resolve(process.cwd(), opts.cwd ?? cli.cwd)
       : process.cwd();
 
   const resolvedTargetDir =
@@ -39,13 +129,27 @@ function normalizeOptions(input = {}) {
       ? path.resolve(resolvedCwd, targetDir)
       : undefined;
 
+  const examples = [
+    ...normalizeExampleNames(opts.examples),
+    ...normalizeExampleNames(opts.example),
+    ...normalizeExampleNames(cli.examples)
+  ];
+
+  if (opts.withExample === true || cli.withExample) {
+    examples.push(DEFAULT_EXAMPLE);
+  }
+
+  const normalizedExamples = [...new Set(examples)];
+
   return {
     ...opts,
     targetDir: resolvedTargetDir,
-    debug: !!opts.debug,
-    install: opts.install ?? true,
+    debug: Boolean(opts.debug ?? cli.debug),
+    install: opts.install ?? cli.install ?? true,
     cwd: resolvedCwd,
-    templateDir // always use the built-in template
+    templateDir, // always use the built-in template
+    exampleTemplatesDir,
+    examples: normalizedExamples
   };
 }
 
@@ -62,6 +166,17 @@ async function main(...args) {
     throw new Error(`Template directory not found: ${templateDir}\n${err.message}`);
   }
 
+  if (opts.examples.length > 0) {
+    try {
+      const stat = fs.statSync(exampleTemplatesDir);
+      if (!stat.isDirectory()) {
+        throw new Error(`Example templates path is not a directory: ${exampleTemplatesDir}`);
+      }
+    } catch (err) {
+      throw new Error(`Example templates directory not found: ${exampleTemplatesDir}\n${err.message}`);
+    }
+  }
+
   // call the implementation with simple, normalized options
   await createMain(opts);
 }
diff --git a/create/main.js b/create/main.js
index 346acef..4c74160 100644
--- a/create/main.js
+++ b/create/main.js
@@ -1,13 +1,10 @@
 import inquirer from 'inquirer';
 import { execSync } from 'node:child_process';
-import crypto from 'node:crypto';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 
-const getRandomString = length => crypto.randomBytes(length).toString('hex');
-
-export async function main({ cwd, templateDir, targetDir }) {
-  const APP_TITLE = await getTitle();
+export async function main({ cwd, templateDir, exampleTemplatesDir, targetDir, examples = [], title }) {
+  const APP_TITLE = await getTitle(title);
 
   const APP_NAME = (APP_TITLE)
     // get rid of anything that's not allowed in an app name
@@ -19,93 +16,102 @@ export async function main({ cwd, templateDir, targetDir }) {
 
   console.log({ cwd, templateDir, targetDir, APP_NAME, APP_TITLE });
 
-  await fs.cp(templateDir, targetDir, { recursive: true, force: false, errorOnExist: true }, (err) => {
-    console.warn(err);
+  await fs.cp(templateDir, targetDir, {
+    recursive: true,
+    force: false,
+    errorOnExist: true,
   });
 
+  if (examples.length > 0) {
+    const examplesDir = path.join(targetDir, 'examples');
+    await fs.mkdir(examplesDir, { recursive: true });
+
+    for (const example of examples) {
+      const sourceDir = path.join(exampleTemplatesDir, example);
+
+      try {
+        const stat = await fs.stat(sourceDir);
+        if (!stat.isDirectory()) {
+          throw new Error(`Example template path is not a directory: ${sourceDir}`);
+        }
+      } catch (error) {
+        throw new Error(`Unknown example template "${example}"`);
+      }
+
+      await fs.cp(sourceDir, path.join(examplesDir, example), {
+        recursive: true,
+        force: false,
+        errorOnExist: true,
+      });
+    }
+  }
+
   const EXAMPLE_ENV_PATH = path.join(targetDir, '.env.example');
-	const ENV_PATH = path.join(targetDir, '.env');
-	const PKG_PATH = path.join(targetDir, 'package.json');
-
-	const appNameRegex = /planning-stack-template/g;
-	const appTitleRegex = /PLANNING STACK TEMPLATE/g;
-
-  const [env, packageJsonString] = await Promise.all([
-		fs.readFile(EXAMPLE_ENV_PATH, 'utf-8'),
-		fs.readFile(PKG_PATH, 'utf-8'),
-	]);
-
-	const filesWithAppName = await Promise.all([
-		PKG_PATH,
-		path.join(targetDir, 'README.md'),
-		path.join(targetDir, 'docs', 'antora-playbook.yml'),
-		path.join(targetDir, 'docs', 'antora.yml'),
-		path.join(targetDir, 'docs', 'modules/ROOT/pages/architecture.adoc'),
-		path.join(targetDir, 'docs', 'modules/ROOT/pages/documentation.adoc'),
-		path.join(targetDir, 'docs', 'modules/ROOT/pages/getting-started.adoc'),
-		path.join(targetDir, 'mocks', 'cli', 'generate-data.mjs'),
-		path.join(targetDir, 'prototype', 'README.md'),
-		path.join(targetDir, 'ui', 'README.md'),
-	]);
-
-	const filesWithAppTitle = await Promise.all([
-		path.join(targetDir, 'README.md'),
-		path.join(targetDir, 'docs', 'antora-playbook.yml'),
-		path.join(targetDir, 'docs', 'antora.yml'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'architecture.adoc'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'index.adoc'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'monorepo.adoc'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'prototype.adoc'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'partials', 'monorepo.puml'),
-		path.join(targetDir, 'docs', 'modules', 'ROOT', 'nav.adoc'),
-		path.join(targetDir, 'docs', 'antora-playbook.yml'),
-		path.join(targetDir, 'docs', 'package.json'),
-		path.join(targetDir, 'prototype', 'app', 'root.tsx'),
-		path.join(targetDir, 'prototype', 'app', 'routes', '_index.tsx'),
-		path.join(targetDir, 'mocks', 'cli', 'generate-data.mjs'),
-	]);
-
-	// Replace all instances of the app title
-	for (const file of filesWithAppTitle) {
-		const fileContent = await fs.readFile(file, 'utf-8');
-		const newFile = fileContent.replaceAll(appTitleRegex, APP_TITLE);
-		await fs.writeFile(file, newFile);
-	}
-	// Replace all instances of the app name
-	for (const file of filesWithAppName) {
-		const fileContent = await fs.readFile(file, 'utf-8');
-		const newFile = fileContent.replaceAll(appNameRegex, APP_NAME);
-		await fs.writeFile(file, newFile);
-	}
-
-	const packageJson = JSON.parse(packageJsonString);
-
-	packageJson.name = APP_NAME;
-	delete packageJson.author;
-	delete packageJson.license;
-
-	const fileOperationPromises = [
-		fs.copyFile(EXAMPLE_ENV_PATH, ENV_PATH),
-		fs.writeFile(PKG_PATH, JSON.stringify(packageJson, null, 2)),
-	];
-
-	await Promise.all(fileOperationPromises);
-
-	if (!process.env.SKIP_SETUP) {
-		execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
-		execSync('npm run typecheck', { cwd: targetDir, stdio: 'inherit' });
-		execSync('npm run build:data', { cwd: targetDir, stdio: 'inherit' });
-	}
-
-	if (!process.env.SKIP_FORMAT) {
-		execSync('npm run format -- --log-level warn', {
-			cwd: targetDir,
-			stdio: 'inherit',
-		});
-	}
-
-	console.log(
-		`
+  const ENV_PATH = path.join(targetDir, '.env');
+  const PKG_PATH = path.join(targetDir, 'package.json');
+
+  const appNameRegex = /planning-stack-template/g;
+  const appTitleRegex = /PLANNING STACK TEMPLATE/g;
+
+  const packageJsonString = await fs.readFile(PKG_PATH, 'utf-8');
+
+  const filesWithAppName = [
+    PKG_PATH,
+    path.join(targetDir, 'README.md'),
+    path.join(targetDir, 'docs', 'antora-playbook.yml'),
+    path.join(targetDir, 'docs', 'antora.yml'),
+    path.join(targetDir, 'docs', 'modules/ROOT/pages/architecture.adoc'),
+    path.join(targetDir, 'docs', 'modules/ROOT/pages/documentation.adoc'),
+    path.join(targetDir, 'docs', 'modules/ROOT/pages/getting-started.adoc'),
+    path.join(targetDir, 'prototype', 'README.md'),
+    path.join(targetDir, 'ui', 'README.md'),
+  ];
+
+  const filesWithAppTitle = [
+    path.join(targetDir, 'README.md'),
+    path.join(targetDir, 'docs', 'antora-playbook.yml'),
+    path.join(targetDir, 'docs', 'antora.yml'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'architecture.adoc'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'index.adoc'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'monorepo.adoc'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'pages', 'prototype.adoc'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'partials', 'monorepo.puml'),
+    path.join(targetDir, 'docs', 'modules', 'ROOT', 'nav.adoc'),
+    path.join(targetDir, 'docs', 'package.json'),
+    path.join(targetDir, 'prototype', 'app', 'root.tsx'),
+    path.join(targetDir, 'prototype', 'app', 'routes', '_index.tsx'),
+    path.join(targetDir, 'prototype', 'README.md'),
+  ];
+
+  await replaceTokensInFiles(filesWithAppTitle, appTitleRegex, APP_TITLE);
+  await replaceTokensInFiles(filesWithAppName, appNameRegex, APP_NAME);
+
+  const packageJson = JSON.parse(packageJsonString);
+
+  packageJson.name = APP_NAME;
+  delete packageJson.author;
+  delete packageJson.license;
+
+  await Promise.all([
+    fs.copyFile(EXAMPLE_ENV_PATH, ENV_PATH),
+    fs.writeFile(PKG_PATH, JSON.stringify(packageJson, null, 2)),
+  ]);
+
+  if (!process.env.SKIP_SETUP) {
+    execSync('npm install', { cwd: targetDir, stdio: 'inherit' });
+    execSync('npm run typecheck', { cwd: targetDir, stdio: 'inherit' });
+    execSync('npm run build:data', { cwd: targetDir, stdio: 'inherit' });
+  }
+
+  if (!process.env.SKIP_FORMAT) {
+    execSync('npm run format -- --log-level warn', {
+      cwd: targetDir,
+      stdio: 'inherit',
+    });
+  }
+
+  console.log(
+    `
 Setup is complete.
 
 What's next?
@@ -114,23 +120,40 @@ What's next?
 - Build your mock API
 - Build your prototype
 - Iterate
-		`.trim(),
-	);
+    `.trim(),
+  );
+}
+
+async function replaceTokensInFiles(files, pattern, replacement) {
+  for (const file of files) {
+    try {
+      const fileContent = await fs.readFile(file, 'utf-8');
+      await fs.writeFile(file, fileContent.replaceAll(pattern, replacement));
+    } catch (error) {
+      if (error.code !== 'ENOENT') {
+        throw error;
+      }
+    }
+  }
 }
 
-async function getTitle() {
-	// Check if we are in interactive mode
-	if (process.env.CI) {
-		return 'Demo Title';
-	}
-
-	const { title } = await inquirer.prompt([
-		{
-			type: 'input',
-			name: 'title',
-			message: 'Enter the title of the app',
-		},
-	]);
-
-	return title;
+async function getTitle(providedTitle) {
+  if (typeof providedTitle === 'string' && providedTitle.trim().length > 0) {
+    return providedTitle.trim();
+  }
+
+  // Check if we are in interactive mode
+  if (process.env.CI) {
+    return 'Demo Title';
+  }
+
+  const { title } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'title',
+      message: 'Enter the title of the app',
+    },
+  ]);
+
+  return title;
 }
diff --git a/example-templates/react-router/.cursor/rules/accessibility.mdc b/example-templates/react-router/.cursor/rules/accessibility.mdc
new file mode 100644
index 0000000..9774ae0
--- /dev/null
+++ b/example-templates/react-router/.cursor/rules/accessibility.mdc
@@ -0,0 +1,24 @@
+---
+description: All tasks that are related to improving accessibility (a11y)
+globs: 
+alwaysApply: false
+---
+
+# Accessibility Rules
+
+All UI components in must comply with the WCAG 2.1 AA standard.
+
+- For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
+- Non-native user interactive components need their `role` attribute set. Pay attention to nested components and also take the role of parent components into account.
+- Non-native user interactive components which can be in different UI states, need to be annotated with WAI-ARIA state and property attributes where possible.
+- Interactive components need to be labelled either via label elements or through `aria-label` or `aria-labelledby`.
+- Do not add noise and information that is not relevant to a user.
+- Avoid redundancy. Verify that there are no duplicated annotations. Also check parent and child components.
+- Keyboard navigation needs to work in all components.
+- User focus needs to be properly guided.
+- New titles need to be localized.
+- Interactive elements cannot contain other interactive elements.
+
+Do not forget to also update the tests for a component.
+
+Use the class `sr-only` for elements that should only be visible to screenreaders.
\ No newline at end of file
diff --git a/example-templates/react-router/.cursor/rules/react.mdc b/example-templates/react-router/.cursor/rules/react.mdc
new file mode 100644
index 0000000..eab9da8
--- /dev/null
+++ b/example-templates/react-router/.cursor/rules/react.mdc
@@ -0,0 +1,18 @@
+---
+description: 
+globs: *.tsx
+alwaysApply: false
+---
+
+# Rules for authoring React components
+
+- React is not just a UI framework but also a concept of how a UI is composed. Information should only flow downwards (One-Way dataflow). Never break this concept.
+- Only trigger updates through events / actions or handlers.
+- Avoid Refs to a child component. Use Props / Context instead and have the child component react to a change in props. Never trigger changes on a different component explicitly.
+- React uses functional concepts instead of OOP concepts.
+- Components and Hooks must be pure.
+- Prefer useReducer over multiple useStates in the same component.
+- Document the code in a way that you still understand it a year later.
+
+
+
diff --git a/example-templates/react-router/.cursor/rules/tests.mdc b/example-templates/react-router/.cursor/rules/tests.mdc
new file mode 100644
index 0000000..0cf4039
--- /dev/null
+++ b/example-templates/react-router/.cursor/rules/tests.mdc
@@ -0,0 +1,11 @@
+---
+description: 
+globs: *.spec.tsx
+alwaysApply: false
+---
+
+# Tests
+
+- This project is using Testing-Library
+- Use semantic selectors from testing-library over querySelector().
+- Prefer user-event over fireEvent.
diff --git a/example-templates/react-router/.env.example b/example-templates/react-router/.env.example
new file mode 100644
index 0000000..0827589
--- /dev/null
+++ b/example-templates/react-router/.env.example
@@ -0,0 +1,2 @@
+VITE_BUILD_NUMBER=Vite
+VITE_VERSION=dev
\ No newline at end of file
diff --git a/example-templates/react-router/.gitignore b/example-templates/react-router/.gitignore
new file mode 100644
index 0000000..afda6bb
--- /dev/null
+++ b/example-templates/react-router/.gitignore
@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+/.cache
+.react-router/
+/public/build
+tsconfig.tsbuildinfo
+data-mocks/
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+vite.config.ts.timestamp-*
+
+# Misc
+.DS_Store
+*.pem
+.idea/
+
+
+catalyst-ui-kit/
\ No newline at end of file
diff --git a/example-templates/react-router/.gitlab-ci.yml b/example-templates/react-router/.gitlab-ci.yml
new file mode 100644
index 0000000..ce76e08
--- /dev/null
+++ b/example-templates/react-router/.gitlab-ci.yml
@@ -0,0 +1,188 @@
+# Root CI File
+
+include:
+  - component: $CI_SERVER_HOST/$CI_COMPONENT_DIR/gitlab-environments/preview@1.0
+    inputs:
+      build_job: 'build prototype'
+      stage: publish
+      build_folder: 'prototype/build/client'
+
+default:
+  image: node:22
+  interruptible: true
+  # Usage of global_cache key to override the default push-pull policy
+  # https://docs.gitlab.com/ee/ci/caching/index.html
+  cache: &npm_cache
+    key:
+      files:
+        - package-lock.json
+    policy: pull
+    paths:
+      - 'node_modules/'
+      - './*/node_modules/'
+      - 'config/*/node_modules/'
+  timeout: 2 minutes
+
+stages:
+  - install
+  - verify
+  - build
+  - publish
+
+variables:
+  TURBO_TELEMETRY_DISABLED: 1
+  VITE_BUILD_NUMBER: ${CI_PIPELINE_IID}
+  VITE_VERSION: ${CI_COMMIT_SHORT_SHA}
+
+workflow:
+  rules:
+    - if: $CI_MERGE_REQUEST_IID
+    - if: $CI_COMMIT_TAG
+      when: always
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH && $CI_COMMIT_TAG == null
+    - if: $CI_PIPELINE_SOURCE == "schedule"
+
+############################################################
+#
+#     Install stage
+#
+############################################################
+
+# Install dependencies
+install dependencies:
+  stage: install
+  interruptible: false
+  cache:
+    - <<: *npm_cache
+      policy: pull-push
+  script:
+    - node -v
+    - echo "Installing Dependencies"
+    - 'find . -name "node_modules" -type d -prune -exec rm -rf "{}" +'
+    - time npm clean-install
+    # We need to install the linux version of rollup here. https://github.com/npm/cli/issues/4828
+    - npm i -O @rollup/rollup-linux-x64-gnu
+  rules:
+    - if: $CI_COMMIT_REF_PROTECTED == "true"
+    - if: $CI_MERGE_REQUEST_IID
+      changes:
+        - 'package-lock.json'
+      allow_failure: false
+    - if: $CI_PIPELINE_SOURCE == "schedule"
+
+force install dependencies:
+  extends: install dependencies
+  rules:
+    - when: manual
+      allow_failure: true
+  script:
+    - node -v
+    - 'find . -name "node_modules" -type d -prune -exec rm -rf "{}" +'
+    - npm install --frozen-lockfile --no-progress --non-interactive
+    - npm i -O @rollup/rollup-linux-x64-gnu
+
+############################################################
+#
+#     Verify stage
+#
+############################################################
+
+# Run Type Checks on all changed modules.
+verify:
+  stage: verify
+  interruptible: true
+  variables:
+    ESLINT_CODE_QUALITY_REPORT: 'gl-code-quality-report.json'
+  cache:
+    - <<: *npm_cache
+    - key: verify-$CI_COMMIT_REF_SLUG
+      paths:
+        - '.turbo/'
+        - '**/.turbo/'
+  needs:
+    - job: install dependencies
+      optional: true
+  script:
+    - node --version
+    - npm --version
+    - npm ci
+    - ./node_modules/.bin/turbo run typecheck
+    - ./node_modules/.bin/turbo run lint
+  artifacts:
+    when: always
+    expire_in: 5 days
+    paths:
+      - gl-code-quality-report.json
+    reports:
+      codequality: 'gl-code-quality-report.json'
+
+test:
+  stage: verify
+  interruptible: true
+  needs:
+    - job: install dependencies
+      optional: true
+  script:
+    - ./node_modules/.bin/turbo run test
+
+############################################################
+#
+#   Build stage
+#
+############################################################
+
+build prototype:
+  interruptible: true
+  stage: build
+  script:
+    - npm ci
+    - npm run build:prototype
+  artifacts:
+    paths:
+      - prototype/build
+
+############################################################
+#
+#   Publish stage
+#
+############################################################
+
+pages:
+  stage: publish
+  needs:
+    - job: install dependencies
+      optional: true
+  allow_failure: true
+  script:
+    - npm ci
+    - npm run docs
+  artifacts:
+    paths:
+      - docs/build
+  publish: docs/build
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      changes:
+        - 'docs/**/*'
+
+publish prototype continuous:
+  extends: create preview
+  variables:
+    CI_MERGE_REQUEST_ID: p${CI_PROJECT_ID}-cont
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+  environment:
+    name: 'prototype/${CI_PROJECT_PATH_SLUG}/continuous'
+    url: $CI_MERGE_REQUEST_REVIEW_URL
+    on_stop: 'stop prototype continuous'
+
+stop prototype continuous:
+  extends: stop preview
+  variables:
+    CI_MERGE_REQUEST_ID: p${CI_PROJECT_ID}-cont
+  environment:
+    name: 'prototype/${CI_PROJECT_PATH_SLUG}/continuous'
+    action: stop
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      when: manual
diff --git a/example-templates/react-router/.licenses/isc.md b/example-templates/react-router/.licenses/isc.md
new file mode 100644
index 0000000..31b673a
--- /dev/null
+++ b/example-templates/react-router/.licenses/isc.md
@@ -0,0 +1,17 @@
+# ISC License
+
+- Lucide
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All
+other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee
+is hereby granted, provided that the above copyright notice and this permission notice appear in all
+copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
+SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS
+SOFTWARE.
diff --git a/example-templates/react-router/.lintstagedrc.js b/example-templates/react-router/.lintstagedrc.js
new file mode 100644
index 0000000..90e682a
--- /dev/null
+++ b/example-templates/react-router/.lintstagedrc.js
@@ -0,0 +1,3 @@
+export default {
+	'*.{js,jsx,ts,tsx,json,css,scss,md}': ['prettier --write'],
+}
diff --git a/example-templates/react-router/.nvmrc b/example-templates/react-router/.nvmrc
new file mode 100644
index 0000000..e4f846d
--- /dev/null
+++ b/example-templates/react-router/.nvmrc
@@ -0,0 +1 @@
+v22.10.0
diff --git a/example-templates/react-router/.prettierignore b/example-templates/react-router/.prettierignore
new file mode 100644
index 0000000..c7e2c6b
--- /dev/null
+++ b/example-templates/react-router/.prettierignore
@@ -0,0 +1,6 @@
+/node_modules
+package-lock.json
+.gitignore
+.cursorrules.md
+**/public
+.htaccess
\ No newline at end of file
diff --git a/example-templates/react-router/.prettierrc.js b/example-templates/react-router/.prettierrc.js
new file mode 100644
index 0000000..5af14a2
--- /dev/null
+++ b/example-templates/react-router/.prettierrc.js
@@ -0,0 +1,30 @@
+/** @type {import("prettier").Options} */
+export default {
+	arrowParens: 'avoid',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	embeddedLanguageFormatting: 'auto',
+	endOfLine: 'lf',
+	htmlWhitespaceSensitivity: 'css',
+	insertPragma: false,
+	jsxSingleQuote: false,
+	printWidth: 100,
+	proseWrap: 'always',
+	quoteProps: 'consistent',
+	requirePragma: false,
+	semi: true,
+	singleAttributePerLine: false,
+	singleQuote: true,
+	tabWidth: 2,
+	trailingComma: 'all',
+	useTabs: true,
+	overrides: [
+		{
+			files: ['**/*.json', '**/*.yaml', '**/*.yml', '/**/*.adoc', '**/*.md'],
+			options: {
+				useTabs: false,
+			},
+		},
+	],
+	plugins: ['prettier-plugin-organize-imports'],
+};
diff --git a/example-templates/react-router/.vscode/settings.json b/example-templates/react-router/.vscode/settings.json
new file mode 100644
index 0000000..335f886
--- /dev/null
+++ b/example-templates/react-router/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
\ No newline at end of file
diff --git a/example-templates/react-router/LICENSE.md b/example-templates/react-router/LICENSE.md
new file mode 100644
index 0000000..55654ce
--- /dev/null
+++ b/example-templates/react-router/LICENSE.md
@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2025 ti&m
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/example-templates/react-router/README.md b/example-templates/react-router/README.md
new file mode 100644
index 0000000..cd950c2
--- /dev/null
+++ b/example-templates/react-router/README.md
@@ -0,0 +1,33 @@
+# React Router Example
+
+This is the self-contained React Router example for Tinker Stack.
+
+It preserves the original demo-oriented workspace, including:
+
+- a richer prototype flow
+- generated mock data
+- MSW handlers wired to that dataset
+- docs that describe the demo setup
+
+## Run the example
+
+Work inside this directory, not from the generated project root:
+
+```bash
+npm install
+npm run build:data
+npm run dev
+```
+
+## How to use it
+
+This example is meant to be mined for patterns, not coupled to the main workspace.
+
+Copy ideas selectively from:
+
+- `prototype/` for routing, layouts, and UI flows
+- `mocks/` for seeded dataset generation
+- `msw/` for handler composition
+- `api/` for shared response types
+
+You can delete the entire example directory without affecting the generated root project.
diff --git a/example-templates/react-router/api/commons/enums.ts b/example-templates/react-router/api/commons/enums.ts
new file mode 100644
index 0000000..3984b3c
--- /dev/null
+++ b/example-templates/react-router/api/commons/enums.ts
@@ -0,0 +1,12 @@
+/**
+ * Granular Permissions.
+ * The UI only uses these permissions which are derived from the roles in the JWT.
+ * The key is the permission name and the value is the permission description.
+ */
+export const permissions = {
+	'reports-create': 'Create reports',
+	'reports-approve': 'Approve reports',
+	'admin': 'Administrative privileges',
+};
+
+export type Permission = keyof typeof permissions;
diff --git a/example-templates/react-router/api/commons/types.ts b/example-templates/react-router/api/commons/types.ts
new file mode 100644
index 0000000..3df1886
--- /dev/null
+++ b/example-templates/react-router/api/commons/types.ts
@@ -0,0 +1,42 @@
+/**
+ * Image Object
+ */
+export type Image = {
+	url: string;
+	alt?: string;
+	width?: number;
+	height?: number;
+};
+
+/**
+ * Calendar Date String (YYYY-MM-DD)
+ */
+export type IsoDateString = string;
+/**
+ * ISO 8601 Timestamp String
+ */
+export type IsoTimestampString = string;
+
+/**
+ * Spring Boot Paginated Response
+ */
+export type PaginatedResponse<T> = {
+	content: T[];
+	pageable: {
+		pageNumber: number;
+		pageSize: number;
+	};
+	totalPages: number;
+	totalElements: number;
+	first: boolean;
+	last: boolean;
+	size: number;
+	number: number;
+};
+
+export type File = {
+	readonly type: string;
+	readonly name: string;
+	readonly size: number;
+	readonly createdAt: IsoTimestampString;
+};
diff --git a/template/api/demo/types.ts b/example-templates/react-router/api/demo/types.ts
similarity index 100%
rename from template/api/demo/types.ts
rename to example-templates/react-router/api/demo/types.ts
diff --git a/example-templates/react-router/api/eslint.config.js b/example-templates/react-router/api/eslint.config.js
new file mode 100644
index 0000000..75d444b
--- /dev/null
+++ b/example-templates/react-router/api/eslint.config.js
@@ -0,0 +1,15 @@
+import baseConfig from '@repo/eslint-config/base';
+
+export default [
+	{
+		ignores: ['**/node_modules/**', '**/dist/**', '**/.turbo/**'],
+	},
+	...baseConfig,
+	{
+		languageOptions: {
+			parserOptions: {
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+];
diff --git a/example-templates/react-router/api/package.json b/example-templates/react-router/api/package.json
new file mode 100644
index 0000000..c297c84
--- /dev/null
+++ b/example-templates/react-router/api/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@repo/api",
+  "description": "Domain Types und Enums",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-alias",
+    "dev": "tsc && (concurrently \"tsc -w\" \"tsc-alias -w\")",
+    "clean": "rimraf dist && rimraf .turbo",
+    "format": "prettier --write .",
+    "typecheck": "tsc && tsc-alias",
+    "lint": "eslint .",
+    "lint-staged": "lint-staged"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "exports": {
+    "./commons/types": {
+      "types": "./dist/commons/types.d.ts"
+    },
+    "./commons/enums": {
+      "types": "./dist/commons/enums.d.ts",
+      "import": "./dist/commons/enums.js"
+    },
+    "./demo/types": {
+      "types": "./dist/demo/types.d.ts"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/example-templates/react-router/api/tsconfig.json b/example-templates/react-router/api/tsconfig.json
new file mode 100644
index 0000000..1c4452b
--- /dev/null
+++ b/example-templates/react-router/api/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@repo/typescript-config/node-library.json",
+  "include": ["./**/*.ts"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./*"]
+    },
+    "outDir": "dist"
+  },
+  "exclude": ["node_modules", "dist", ".turbo"]
+}
diff --git a/example-templates/react-router/config/eslint/README.md b/example-templates/react-router/config/eslint/README.md
new file mode 100644
index 0000000..8b42d90
--- /dev/null
+++ b/example-templates/react-router/config/eslint/README.md
@@ -0,0 +1,3 @@
+# `@turbo/eslint-config`
+
+Collection of internal eslint configurations.
diff --git a/example-templates/react-router/config/eslint/base.js b/example-templates/react-router/config/eslint/base.js
new file mode 100644
index 0000000..d14dd65
--- /dev/null
+++ b/example-templates/react-router/config/eslint/base.js
@@ -0,0 +1,61 @@
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import importPlugin from 'eslint-plugin-import';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+/**
+ * This is the basic rule set for all projects.
+ * Make sure to add the languageOptions.parserOptions.tsconfigRootDir to the project you want to lint.
+ * @returns { import('typescript-eslint').FlatConfig.ConfigArray }
+ */
+export default tseslint.config(
+	eslint.configs.recommended,
+	importPlugin.flatConfigs.recommended,
+	importPlugin.flatConfigs.typescript,
+	...tseslint.configs.recommendedTypeChecked,
+	...tseslint.configs.stylisticTypeChecked,
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			parserOptions: {
+				projectService: {
+					allowDefaultProject: ['*.js'],
+					defaultProject: 'tsconfig.json',
+				},
+				ecmaFeatures: {
+					jsx: true,
+				},
+			},
+			globals: {
+				// ...globals.browser,
+				...globals.serviceworker,
+			},
+		},
+		settings: {
+			'import/internal-regex': '^#/',
+		},
+		rules: {
+			'@typescript-eslint/no-empty-object-type': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/consistent-type-definitions': 'off',
+			'@typescript-eslint/only-throw-error': 'off',
+			'@typescript-eslint/no-duplicate-type-constituents': [
+				'error',
+				{
+					ignoreUnions: true,
+					ignoreIntersections: true,
+				},
+			],
+			'@typescript-eslint/consistent-type-imports': [
+				'error',
+				{ fixStyle: 'separate-type-imports', prefer: 'type-imports' },
+			],
+			'import/no-unresolved': 'off', // does not properly work with nodenext yet.
+			'import/no-relative-packages': 'error',
+			'import/no-relative-parent-imports': 'error',
+		},
+	},
+	eslintConfigPrettier,
+);
diff --git a/example-templates/react-router/config/eslint/package.json b/example-templates/react-router/config/eslint/package.json
new file mode 100644
index 0000000..7bf38de
--- /dev/null
+++ b/example-templates/react-router/config/eslint/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@repo/eslint-config",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "base.js",
+    "react.js"
+  ],
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-turbo": "^2.6.3",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0"
+  },
+  "type": "module",
+  "exports": {
+    "./base": "./base.js",
+    "./react": "./react.js"
+  }
+}
diff --git a/example-templates/react-router/config/eslint/react.js b/example-templates/react-router/config/eslint/react.js
new file mode 100644
index 0000000..d163295
--- /dev/null
+++ b/example-templates/react-router/config/eslint/react.js
@@ -0,0 +1,42 @@
+import baseConfig from '@repo/eslint-config/base';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+
+/**
+ * This config adds additional rules for React and JSX.
+ * @returns { import('typescript-eslint').FlatConfig.ConfigArray }
+ */
+export default tseslint.config(
+	...baseConfig,
+	{
+		settings: {
+			react: {
+				version: 'detect',
+			},
+		},
+	},
+	reactPlugin.configs.flat.recommended,
+	reactPlugin.configs.flat['jsx-runtime'],
+	// enable a11y rules for the frontend and UI only
+	// jsxA11yPlugin.flatConfigs.recommended,
+	// React
+	{
+		files: ['**/*.{tsx}'],
+		settings: {
+			formComponents: ['Form'],
+			linkComponents: [
+				{ name: 'Link', linkAttribute: 'to' },
+				{ name: 'NavLink', linkAttribute: 'to' },
+			],
+		},
+		plugins: {
+			'react-hooks': reactHooksPlugin,
+		},
+		rules: {
+			'react/react-in-jsx-scope': 'off',
+			...reactHooksPlugin.configs.recommended.rules,
+			'react-hooks/rules-of-hooks': 'error',
+		},
+	},
+);
diff --git a/example-templates/react-router/config/typescript/base.json b/example-templates/react-router/config/typescript/base.json
new file mode 100644
index 0000000..20d7e23
--- /dev/null
+++ b/example-templates/react-router/config/typescript/base.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": true,
+    "esModuleInterop": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "lib": ["ESNext"],
+    "forceConsistentCasingInFileNames": true,
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": false,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "noEmit": true
+  }
+}
diff --git a/example-templates/react-router/config/typescript/node-library.json b/example-templates/react-router/config/typescript/node-library.json
new file mode 100644
index 0000000..9fb6019
--- /dev/null
+++ b/example-templates/react-router/config/typescript/node-library.json
@@ -0,0 +1,12 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "Node Library",
+    "extends": "./base.json",
+    "compilerOptions": {
+      "noEmit": false,
+      "declaration": true,
+      "declarationMap": true,
+      "sourceMap": true,
+      "target": "ESNext",
+    }
+  }
\ No newline at end of file
diff --git a/example-templates/react-router/config/typescript/package.json b/example-templates/react-router/config/typescript/package.json
new file mode 100644
index 0000000..27c0e60
--- /dev/null
+++ b/example-templates/react-router/config/typescript/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@repo/typescript-config",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/example-templates/react-router/config/typescript/react-app.json b/example-templates/react-router/config/typescript/react-app.json
new file mode 100644
index 0000000..37e1448
--- /dev/null
+++ b/example-templates/react-router/config/typescript/react-app.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React App",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true
+  }
+}
diff --git a/example-templates/react-router/config/typescript/react-library.json b/example-templates/react-router/config/typescript/react-library.json
new file mode 100644
index 0000000..2543a7f
--- /dev/null
+++ b/example-templates/react-router/config/typescript/react-library.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "allowImportingTsExtensions": true,
+  }
+}
diff --git a/example-templates/react-router/docs/antora-playbook.yml b/example-templates/react-router/docs/antora-playbook.yml
new file mode 100644
index 0000000..dfc9cb1
--- /dev/null
+++ b/example-templates/react-router/docs/antora-playbook.yml
@@ -0,0 +1,22 @@
+site:
+  title: PLANNING STACK TEMPLATE Dokumentation
+  start_page: planning-stack-template-frontend::index.adoc
+  url: https://frontend-6dd0b0.pages.ti8m.ch
+content:
+  sources:
+    - url: ../
+      branches: HEAD
+      start_path: docs
+ui:
+  bundle:
+    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
+    snapshot: true
+output:
+  dir: ./build
+asciidoc:
+  attributes:
+    # makes the extension download and store diagrams in Antora's _images folder (in output dir)
+    kroki-fetch-diagram: true
+    product: PLANNING STACK TEMPLATE
+  extensions:
+    - asciidoctor-kroki
diff --git a/example-templates/react-router/docs/antora.yml b/example-templates/react-router/docs/antora.yml
new file mode 100644
index 0000000..18fdf82
--- /dev/null
+++ b/example-templates/react-router/docs/antora.yml
@@ -0,0 +1,5 @@
+name: 'planning-stack-template-frontend'
+title: 'PLANNING STACK TEMPLATE Frontend'
+version: true
+nav:
+  - modules/ROOT/nav.adoc
diff --git a/example-templates/react-router/docs/modules/ROOT/images/Prototyp-Repo.drawio.png b/example-templates/react-router/docs/modules/ROOT/images/Prototyp-Repo.drawio.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e73d5a9d44f9bb9bf3fc79ace5d15ea263d57d5
GIT binary patch
literal 24086
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
T8Sp=Phmn<3lqh*@81VlAoYLA%

literal 0
HcmV?d00001

diff --git a/example-templates/react-router/docs/modules/ROOT/nav.adoc b/example-templates/react-router/docs/modules/ROOT/nav.adoc
new file mode 100644
index 0000000..f8c4bf7
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/nav.adoc
@@ -0,0 +1,11 @@
+:product: PLANNING STACK TEMPLATE
+
+* xref:index.adoc[Übersicht]
+** xref:getting-started.adoc[Erste Schritte]
+** xref:architecture.adoc[Architektur]
+** xref:monorepo.adoc[Monorepo]
+** xref:prototype.adoc[Prototyp]
+** xref:mocks.adoc[Testdaten]
+** xref:design-system.adoc[Design System]
+** xref:login.adoc[Login Flow]
+** xref:tailwind.adoc[Tailwind] 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/architecture.adoc b/example-templates/react-router/docs/modules/ROOT/pages/architecture.adoc
new file mode 100644
index 0000000..a940995
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/architecture.adoc
@@ -0,0 +1,145 @@
+= Architektur
+:experimental:
+:plantuml-server-url: http://www.plantuml.com/plantuml
+:source-highlighter: highlight.js
+
+== Überblick
+
+Das PLANNING STACK TEMPLATE Frontend ist als Monorepo mit mehreren Packages aufgebaut. Der Fokus liegt auf:
+
+* Schnelle Iteration durch Prototyping
+* Wiederverwendbare Komponenten
+* Typsicherheit durch TypeScript
+* Realistische Testdaten
+
+== Architekturprinzipien
+
+=== Domain-Driven Design
+
+
+
+
+=== Prototypen-getriebene Entwicklung
+
+Der Entwicklungsprozess folgt einem iterativen Ansatz:
+
+1. Features werden zuerst im Prototyp implementiert
+2. Designer-, Stakeholder- und Benutzer-Feedback wird eingeholt
+3. Validierte Features werden in die produktive Anwendung übernommen
+
+Dies ermöglicht:
+
+* Reduzierung von Entwicklungsrisiken
+* Validierung von UX-Konzepten
+* Schnelles Feedback von Benutzern
+
+=== Typsicherheit
+
+* Strikte TypeScript Konfiguration
+* Zentrale Definition von Domain Types
+* Shared Types zwischen Packages
+
+=== Komponenten-Bibliothek
+
+Die UI-Komponenten sind in einem separaten Package (`@repo/ui`) organisiert:
+
+* Basis auf shadcn/ui, Tailwind UI und Tailwind
+* Wiederverwendbar zwischen Prototyp und Produktion
+* Einheitliches Design-System basierend auf Tailwind UI und dem Figma Design System
+
+== Technische Architektur
+
+Siehe auch xref:monorepo.adoc#aufbau[Monorepo].
+
+=== Frontend Stack
+
+[cols="1,2,2"]
+|===
+|Technologie |Verwendung |Begründung
+
+|React
+|UI Framework
+|Etabliert, grosses Ökosystem
+
+|React Router
+|Full-Stack Framework
+|Gute DX, Server Components
+
+|Tailwind
+|CSS Framework
+|Utility-First, Wartbar
+
+|shadcn/ui
+|UI-Komponenten
+|Zugänglich, Anpassbar
+
+|TypeScript
+|Programmiersprache
+|Typsicherheit, DX
+|===
+
+=== Mock Backend
+
+[plantuml,msw,svg]
+----
+@startuml
+actor Browser
+participant "React Router App" as App
+participant "MSW" as MSW
+database "Mock Data" as Data
+
+Browser -> App: Request
+App -> MSW: API Call
+MSW -> Data: Load Data
+Data --> MSW: Data
+MSW --> App: Response
+App --> Browser: Render
+@enduml
+----
+
+* MSW (Mock Service Worker) für API-Simulation
+* Realistische HTTP-Requests
+* Einfacher Wechsel zu echtem Backend
+
+== Entwicklungsprozess
+
+=== Feature Entwicklung
+
+1. Feature-Anforderung
+2. Prototyp Implementation
+3. User Testing
+4. Feedback Integration
+5. Production Implementation
+
+=== Code Organisation
+
+* Feature-basierte Ordnerstruktur
+* Shared Logic in Utils
+* Typed API Boundaries
+
+== Deployment
+
+=== Prototype
+
+* Automatisches Deployment bei Push auf `main` 
+** URL: 
+** Aktuelle Entwicklungsversion
+* Deployment bei Tag-Commit
+** URL: 
+** Stabile Version für User-Testing
+
+=== Documentation
+
+* Antora Site Generator
+* Deployed zusammen mit Prototype
+* Automatische Updates
+
+== Supporting Subdomain
+
+
+== Zukünftige Entwicklung
+
+* Migration zu Production App
+* API Integration
+* E2E Tests
+* Performance Monitoring 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/design-system.adoc b/example-templates/react-router/docs/modules/ROOT/pages/design-system.adoc
new file mode 100644
index 0000000..ffa094c
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/design-system.adoc
@@ -0,0 +1,57 @@
+= Design System
+:experimental:
+
+== Überblick
+
+
+== Komponenten
+
+
+=== Verwendung
+
+[source,tsx]
+----
+import { Button } from '@repo/ui/components/button'
+import { LucideIcon } from 'lucide-react'
+
+export function IconButton({ icon: Icon }) {
+  return (
+    <Button variant="ghost" size="icon">
+      <Icon className="h-4 w-4" />
+    </Button>
+  )
+}
+----
+
+== Theming
+
+=== Figma Integration
+
+* Designs aus Figma Projekt
+* Farben und Typography synchron halten
+* Komponenten-Patterns übernehmen
+
+=== Tailwind Konfiguration
+
+* Custom Colors aus CI
+* Spacing und Typography nach Design System
+* Erweiterbare Struktur
+
+Siehe auch xref:tailwind.adoc[Tailwind Dokumentation] für Best Practices.
+
+== Komponenten entwickeln
+
+=== Workflow
+
+1. Figma Design reviewen
+2. shadcn/ui Komponente als Basis nehmen
+3. Mit Tailwind UI Patterns abgleichen
+4. An Design System anpassen
+5. Dokumentation erstellen
+
+=== Guidelines
+
+* Accessibility first
+* Responsive Design
+* Konsistente Props API
+* Dokumentation in Storybook
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/documentation.adoc b/example-templates/react-router/docs/modules/ROOT/pages/documentation.adoc
new file mode 100644
index 0000000..4478161
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/documentation.adoc
@@ -0,0 +1,93 @@
+= Dokumentation
+:experimental:
+:url-antora-docs: https://docs.antora.org/antora/latest/
+:url-kroki-docs: https://docs.kroki.io/kroki/
+
+== Überblick
+
+Die Entwicklerdokumentation wird mit {url-antora-docs}[Antora] erstellt und über GitLab Pages bereitgestellt.
+
+* URL: 
+* Automatisches Deployment bei Push auf `main`
+* Versionierung über Git
+
+== Struktur
+
+[source]
+----
+docs/
+├── antora.yml          # Antora Projekt-Konfiguration
+├── antora-playbook.yml # Site Generator Konfiguration
+└── modules/
+    └── ROOT/
+        ├── nav.adoc    # Navigation
+        ├── pages/      # Dokumentationsseiten
+        └── partials/   # Wiederverwendbare Inhalte
+----
+
+== Diagramme
+
+Die Dokumentation unterstützt verschiedene Diagrammtypen über {url-kroki-docs}[Kroki]:
+
+=== PlantUML
+
+[source,asciidoc]
+----
+[plantuml,format=svg]
+----
+@startuml
+package "Frontend" {
+  [Components]
+  [Routes]
+}
+[Components] --> [Routes]
+@enduml
+----
+----
+
+=== Weitere Diagrammtypen
+
+* Mermaid
+* C4 (mit PlantUML)
+* GraphViz
+* ...
+
+Siehe {url-kroki-docs}#diagram-types[Kroki Diagram Types] für eine vollständige Liste.
+
+== Lokale Entwicklung
+
+=== Voraussetzungen
+
+* Node.js >= 22.0.0
+* npm >= 10.0.0
+
+=== Dokumentation lokal generieren
+
+[source,bash]
+----
+# Im docs Verzeichnis
+npm run docs
+----
+
+Die generierte Dokumentation ist dann unter `docs/build` verfügbar.
+
+== Best Practices
+
+* Neue Features parallel zur Implementierung dokumentieren
+* Diagramme für komplexe Zusammenhänge nutzen
+* Wiederverwendbare Inhalte in `partials` auslagern
+* Interne Links mit `xref:` erstellen
+
+== Deployment
+
+Das Deployment erfolgt automatisch über die GitLab CI/CD Pipeline:
+
+* Trigger: Push auf `main`
+* Output: Statische Seiten
+* Hosting: GitLab Pages
+
+== Nützliche Links
+
+* {url-antora-docs}[Antora Dokumentation]
+* {url-antora-docs}asciidoc/page/[AsciiDoc Syntax Guide]
+* {url-kroki-docs}[Kroki Dokumentation] 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/getting-started.adoc b/example-templates/react-router/docs/modules/ROOT/pages/getting-started.adoc
new file mode 100644
index 0000000..7229b2a
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/getting-started.adoc
@@ -0,0 +1,139 @@
+= Erste Schritte
+:experimental:
+:icons: font
+
+
+
+== Voraussetzungen
+
+Für die Entwicklung werden folgende Tools benötigt:
+
+* Node.js >= 22
+* npm >= 10
+* Git
+
+== Repository klonen
+
+[source,bash]
+----
+git clone TODO
+cd planning-stack-template
+----
+
+== Installation
+
+Das Projekt verwendet npm Workspaces. Alle Abhängigkeiten können mit einem Befehl installiert werden:
+
+[source,bash]
+----
+npm install
+----
+
+== Entwicklungsumgebung einrichten
+
+=== Mock-Daten generieren
+
+Vor dem ersten Start müssen die Mock-Daten generiert werden:
+
+[source,bash]
+----
+npm run build:data
+----
+
+=== Entwicklungsserver starten
+
+Der Entwicklungsserver kann mit folgendem Befehl im Root-Verzeichnis des Repos gestartet werden:
+
+[source,bash]
+----
+npm run dev
+----
+
+Dies startet:
+
+* Den https://reactrouter.com/home[React Router] Entwicklungsserver (Prototyp)
+* Einen Watcher für die Mock-Daten
+* Einen Watcher für die UI-Komponenten
+
+Die Anwendung ist dann unter http://localhost:5173 erreichbar.
+
+== Projektstruktur
+
+[source]
+----
+.
+├── api/             # Domain Types & Enums
+├── config/
+│   ├── eslint/      # ESLint Konfigurationen
+│   ├── typescript/  # Typescript Konfigurationen
+├── docs/            # Dokumentation
+├── frontend/        # Produktives Frontend (noch nicht eingerichtet)
+├── mocks/       # Testdaten Generator
+├── mock-api/        # Mock Backend
+├── prototype/       # Klickbarer UX-Prototyp
+└── ui/              # Design-System Komponenten
+----
+
+
+== IDE Konfiguration
+
+=== VS Code
+
+Empfohlene Extensions:
+
+* ESLint
+* Prettier
+* Tailwind CSS IntelliSense
+* AsciiDoc
+
+Die Projekteinstellungen für VS Code sind bereits im Repository enthalten.
+
+=== WebStorm
+
+Für WebStorm müssen folgende Plugins installiert werden:
+
+* Tailwind CSS
+* AsciiDoc
+
+== Typische Entwicklungsabläufe
+
+=== Neue Feature im Prototyp entwickeln
+
+1. Feature-Branch erstellen
+2. Route in `prototype/app/routes` anlegen
+3. UI mit shadcn/ui Komponenten aufbauen
+4. Mock-Daten in `mocks` erweitern falls nötig
+5. Feature testen und iterieren
+6. Pull Request erstellen
+
+=== UI-Komponente hinzufügen
+
+1. Komponente in `packages/ui/src/components` erstellen
+2. Storybook Story schreiben
+3. Tests hinzufügen
+4. Komponente exportieren und im Prototyp verwenden
+
+== Nächste Schritte
+
+* xref:architecture.adoc[Architektur] verstehen
+* xref:prototype.adoc[Prototyp] kennenlernen
+* xref:design-system.adoc[Design System] erkunden
+
+== Troubleshooting
+
+=== Bekannte Probleme
+
+[qanda]
+Typescript Fehler nach npm install::
+  Führen Sie `npm run build` aus, um alle Packages zu bauen.
+
+Mock-Daten werden nicht aktualisiert::
+  Löschen Sie den `.cache` Ordner und führen Sie `npm run build:data` erneut aus.
+
+=== Support
+
+Bei Problemen:
+
+1. Prüfen Sie die bekannten Probleme
+2. Suchen Sie in den GitHub Issues
+3. Erstellen Sie ein neues Issue 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/index.adoc b/example-templates/react-router/docs/modules/ROOT/pages/index.adoc
new file mode 100644
index 0000000..4d0ccaa
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/index.adoc
@@ -0,0 +1,78 @@
+= PLANNING STACK TEMPLATE Frontend Dokumentation
+:description: Entwicklerdokumentation für das PLANNING STACK TEMPLATE Frontend
+:experimental:
+
+== Über dieses Projekt
+
+Beschreibung des Projekts
+
+== Module
+
+.Frontend-Struktur
+image::Prototyp-Repo.drawio.png[Repository-Struktur]
+
+Das Projekt ist als Monorepo mit folgenden Hauptmodulen aufgebaut:
+
+[cols="1,4"]
+|===
+|Modul |Beschreibung
+
+|@repo/api 
+|Domain-Typen und Enums
+
+|@repo/docs
+|Diese Dokumentation
+
+|@repo/e2e
+|End-to-End und Integrations-Tests (Browser-Tests)
+
+|@repo/frontend
+|Frontend-Anwendung
+
+|@repo/msw
+|Mock-Backend mit MSW
+
+|@repo/mocks
+|Synthetische Testdaten-Generator
+
+|@repo/prototype
+|Klickbarer UX-Prototyp für schnelles Feedback
+
+|@repo/ui
+|Design-System und Komponenten-Bibliothek
+
+|===
+
+Das Mock-API muss mit dem Backend synchron gehalten werden. Somit ist es möglich, die Frontend-Anwendung lokal zu entwickeln und gleichzeitig das Backend zu testen.
+
+Ausserdem ist es dadurch möglich, mit dem Prototypen gegen das echte Backend zu testen.
+
+
+== Technologie-Stack
+
+Das Frontend basiert auf folgenden Haupttechnologien:
+
+* *React* mit TypeScript für die UI-Entwicklung
+* *Tailwind CSS* mit shadcn/ui für das Design-System
+* *Turborepo* für das Monorepo-Management
+* *MSW* (Mock Service Worker) für das Mock-Backend
+* *Antora* für die Dokumentation
+
+Die Technologie für das Frontend ist noch offen. Empfohlen wird 
+React Router v7 als Framework (Isomorph). 
+
+Der Prototyp verwendet React Router SPA, damit er auf einem Shared-Host deployed werden kann.
+
+== Erste Schritte
+
+Siehe xref:getting-started.adoc[Erste Schritte] für Setup-Anweisungen und einen Überblick über die Entwicklungsumgebung.
+
+== Architektur 
+
+Die Anwendung folgt einer prototypen-getriebenen Entwicklung:
+
+1. Schnelle Iteration über Features im Prototyp
+2. Feedback von Benutzern einholen
+3. Validierte Features in die produktive Anwendung übernehmen
+
+Mehr Details zur Architektur unter xref:architecture.adoc[Architektur]. 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/login.adoc b/example-templates/react-router/docs/modules/ROOT/pages/login.adoc
new file mode 100644
index 0000000..627d3a5
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/login.adoc
@@ -0,0 +1,62 @@
+= Login Flow (Prototyp)
+:experimental:
+
+== Überblick
+
+Im Prototyp wird ein vereinfachtes Login-System verwendet:
+
+* Cookie-basierte Authentifizierung
+* Mock Implementation mit MSW
+* Vordefinierte Test-Benutzer
+
+== Implementation
+
+=== Mock Service Worker
+
+[plantuml,mock-auth,svg]
+----
+@startuml
+participant "Browser" as Browser
+participant "MSW Handler" as MSW
+database "Mock Data" as Data
+
+Browser -> MSW: POST /auth/login
+note right: Form Data mit Username
+MSW -> Data: Token lookup
+Data --> MSW: JWT Payload
+MSW -> MSW: Permissions aus\nRollen ermitteln
+MSW --> Browser: Set-Cookie: authToken
+@enduml
+----
+
+=== Test-Benutzer
+
+[cols="1,2,1"]
+|===
+|Persona |Organisation |Permissions
+
+|Administrator
+|Primär-Organisation
+|Alle Org-Berechtigungen
+
+|===
+
+== Authentifizierung
+
+Die Auth-Prüfung erfolgt in den MSW Handlers:
+
+[source,typescript]
+----
+// Beispiel eines geschützten msw Endpoints
+http.post('/reports/approve', async ({ cookies }) => {
+  const { sub, orgId, permissions } = auth(cookies);
+  // ... Handler Implementation
+});
+----
+
+== Hinweise
+
+* Diese Implementation ist nur für den Prototyp, sollte aber ähnlich sein zu der späteren Produktiv-Implementation
+* Keine echte Sicherheit
+* Dient nur der Feature-Entwicklung
+* Produktive Implementation erfolgt später mit IAM
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/mock-data.adoc b/example-templates/react-router/docs/modules/ROOT/pages/mock-data.adoc
new file mode 100644
index 0000000..e871f62
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/mock-data.adoc
@@ -0,0 +1,46 @@
+= Testdaten
+:experimental:
+
+== Überblick
+
+Das `@repo/mocks` Package generiert synthetische Testdaten für die Entwicklung. Die Daten sind:
+
+* Realistisch und konsistent
+* Typsicher durch TypeScript
+* Reproduzierbar durch feste Seeds
+
+Die Daten werden im Entwicklungs-Modus On-The-Fly beim Reload der Applikation generiert.
+
+== Generator
+
+=== Technologie
+
+* https://fakerjs.dev/[Faker.js] für realistische Daten
+* TypeScript für Typsicherheit
+* 3 vorgegebene Konfigurationen für unterschiedliche Datenmengen
+  ** `small`: Für manuelle Prüfung der erstellten Daten.
+  ** `medium`: Für automatisches Testen und Entwicklung.
+  ** `full`: Alle Organisationen, für vollständige Tests.
+
+
+=== Verwendung
+
+Siehe `@repo/mocks/README.md`
+
+Der Ordner enthält Generator-Klassen für die einzelnen Entitäten.
+
+In der Datei `dataset.ts` werden die einzelnen Generatoren zu einem Datensatz zusammengefasst.
+
+== Daten erweitern
+
+1. Domain-Types in `@repo/api` definieren und falls nötig im lokalen Repository anpassen.
+2. Generator in `@repo/mocks/src/generators` erstellen
+3. In `dataset.ts` integrieren
+4. Build mit `npm run build:data`
+
+== Best Practices
+
+* Realistische Wertebereiche verwenden
+* Beziehungen zwischen Entitäten beachten
+* Lokale Besonderheiten berücksichtigen (z.B. Schweizer Adressen)
+* Reproduzierbarkeit durch Seeds sicherstellen 
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/monorepo.adoc b/example-templates/react-router/docs/modules/ROOT/pages/monorepo.adoc
new file mode 100644
index 0000000..f31d30c
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/monorepo.adoc
@@ -0,0 +1,64 @@
+= Monorepo
+
+Siehe auch README.md.
+
+Wir verwenden Turborepo mit der https://turbo.build/repo/docs/core-concepts/internal-packages#compiled-packages[Compiled Packages] Strategie.
+
+Alle Pakete sind ESM-Module und verwenden den `@repo` Scope.
+
+Dieses Monorepo enthält die folgenden Pakete/Apps:
+
+== Apps und Pakete
+
+- `@repo/frontend`: das Frontend für die PLANNING STACK TEMPLATE Anwendung (noch zu erstellen).
+- `@repo/prototype`: ein Prototyp für die PLANNING STACK TEMPLATE Anwendung.
+- `@repo/api`: ein Paket, das die Domain-Typen und -Enums bereitstellt.
+- `@repo/docs`: Dokumentationen für die PLANNING STACK TEMPLATE Anwendung im Antora-Format.
+- `@repo/mocks`: ein Paket, das synthetische Daten für die Anwendungen bereitstellt.
+- `@repo/mock-api`: ein Paket, das eine Mock-API über Service-Worker bereitstellt.
+- `@repo/ui`: eine Basis-React-Komponentenbibliothek, die von den Anwendungen `FAS` und `prototype`
+  gemeinsam genutzt wird
+- `@repo/eslint-config`: `eslint`-Konfigurationen
+- `@repo/typescript-config`: `tsconfig.json`s, die im gesamten Monorepo verwendet werden
+
+== Build
+
+Die Builds sind alle von https://turbo.build[Turborepo] gesteuert und sollten aus dem
+Root-Verzeichnis heraus aufgerufen werden. werden.
+
+Um alle Apps und Pakete zu bauen, führe den folgenden Befehl aus:
+
+```
+npm run build
+```
+
+Es ist auch möglich, nur ein bestimmtes Paket oder eine bestimmte App zu bauen:
+
+```
+npm run build:data
+
+npm run build:msw
+
+npm run build:prototype
+```
+
+### Entwicklung
+
+Aktuell ist standardmässig der Prototyp aktiviert. Um die Entwicklung zu starten, führe den
+folgenden Befehl aus. Dieser startet einen lokalen Server und watcher für die Abhängigen Pakete.
+
+```
+npm run dev
+```
+
+
+
+== Aufbau
+
+[plantuml,monorepo,svg,role=component]
+----
+include::partial$monorepo.puml[]
+----
+
+Das Monorepo verwendet die export und import Direktiven von node ESM Modulen.
+Alle exportierten Namespaces müssen in der package.json Datei aufgelistet werden.
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/prototype.adoc b/example-templates/react-router/docs/modules/ROOT/pages/prototype.adoc
new file mode 100644
index 0000000..a0d1223
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/prototype.adoc
@@ -0,0 +1,105 @@
+= Prototyp
+:experimental:
+
+== Zweck
+
+Der PLANNING STACK TEMPLATE Prototyp dient als:
+
+* Testumgebung für neue Features und UX-Konzepte
+* Basis für Benutzerfeedback und Iterationen
+* Proof-of-Concept für technische Lösungen
+
+== Struktur
+
+Die Ordnerstruktur des Prototypen orientiert sich an den Modulen des Produktionssystems.
+Zusätzlich gibt es den Ordner 'components' für Modulübergreifende UI-Komponenten und 'hooks' für wiederverwendbare Logik.
+Der Ordner 'lib' enthält Hilfsfunktionen. Der Ordner 'mocks' die Logik für die Mock-Daten.
+
+Die Routen sind über eine Route-Konfiguration in app/routes.ts definiert.
+Die Route-Komponenten sind in den entsprechenden Modul-Ordnern.
+
+== API
+
+Der Prototyp verwendet das `ky` Paket für HTTP-Anfragen.
+
+
+=== Technischer Aufbau
+
+* React Router SPA mit TypeScript
+* Mock-Backend via MSW
+* Synthetische Testdaten
+* shadcn/ui Komponenten
+
+== Entwicklungsprozess
+
+=== Feature-Entwicklung
+
+1. Feature-Anforderung erfassen
+2. Schnelle Implementierung im Prototyp
+3. Review mit Stakeholdern
+4. Feedback einarbeiten
+5. User-Stories updaten
+6. Feature für Produktion freigeben
+
+=== Guidelines
+
+* Fokus auf Benutzerinteraktion, nicht auf Datenvalidierung
+* TODOs für fehlende Produktionsanforderungen
+* Schnelle Iteration über perfekte Implementation
+* Realistische Testdaten verwenden
+
+== Deployment
+
+Das Deployment erfolgt automatisch über die CI/CD Pipeline:
+
+=== Umgebungen
+
+[cols="1,3"]
+|===
+|Umgebung |Beschreibung
+
+|Continuous Integration
+|* Deployment bei Push auf `main`
+* URL: 
+* Aktuelle Entwicklungsversion
+
+|Acceptance Test
+|* Deployment bei Tag-Commit
+* URL: 
+* Stabile Version für User-Testing
+
+
+|Preview
+|* Preview-Umgebung, z.B. für Merge-Requests
+* URL: 
+* Alternative Version für A/B Tests.
+|===
+
+Die nötigen Zugangsdaten müssen in den Umgebungsvariablen gesetzt werden. Siehe `.env.example`.
+
+Das Deployment auf Preview kann bei einem Merge-Request manuell ausgelöst werden.
+
+=== Zugriff
+
+* Die Hosts sind über einen IP-Filter geschützt. Die Konfiguration ist in der .htaccess Datei im Ordner `prototype/app/public`.
+
+* Der Host für die Dokumentation kann nur vom internen Netzwerk aus erreicht werden.
+
+
+== Limitationen
+
+* Keine echte Backend-Anbindung
+* Eingeschränkte Validierung
+* Vereinfachte Berechtigungen
+* Keine Performance-Optimierung
+
+== Nächste Schritte
+
+* Integration von Benutzer-Feedback
+* Priorisierung der Features für Produktion
+* Identifikation technischer Herausforderungen 
+
+== Bekannte Probleme
+
+* msw in einer Version höher als 2.6.3 (getestet bis 2.6.6) funktioniert nicht mit dem dev server. Das CSS kann nicht geladen werden.
+Aktuell ist die Version auf 2.6.3 gepinnt. Allenfalls später nochmals testen und ggf. einen Github-Issue erstellen.
\ No newline at end of file
diff --git a/example-templates/react-router/docs/modules/ROOT/pages/tailwind.adoc b/example-templates/react-router/docs/modules/ROOT/pages/tailwind.adoc
new file mode 100644
index 0000000..2359bef
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/pages/tailwind.adoc
@@ -0,0 +1,22 @@
+= Tailwind Tipps und Tricks
+
+Tailwind Docs: https://tailwindcss.com/docs/
+
+== State
+Die Seite soll barrierefrei sein, daher bietet es sich an, die States falls möglich
+auf den jeweiligen Aria-States zu basieren.
+
+.Beispiel Button
+```tsx
+    <Button
+        key={section.id}
+        variant="link"
+        aria-current={activeSection === section.id ? 'step' : undefined}
+        className="w-full justify-start aria-[current=step]:font-bold"
+        onClick={() => scrollToSection(section.id)}
+    >
+```
+
+Hier basiert der Button-State auf dem https://a11y-guidelines.orange.com/en/articles/using-aria-current-attribute/[`aria-current`] Attribut.
+
+https://x.com/shadcn/status/1842329158879420864[Tailwind Tipps von shadcn]
diff --git a/example-templates/react-router/docs/modules/ROOT/partials/monorepo.puml b/example-templates/react-router/docs/modules/ROOT/partials/monorepo.puml
new file mode 100644
index 0000000..c9b1664
--- /dev/null
+++ b/example-templates/react-router/docs/modules/ROOT/partials/monorepo.puml
@@ -0,0 +1,42 @@
+@startuml
+!define RECTANGLE class
+
+skinparam component {
+  BackgroundColor<<app>> LightBlue
+  BackgroundColor<<package>> LightGreen
+}
+
+package "PLANNING STACK TEMPLATE Frontend Monorepo" {
+  [prototype]<<app>> as prototype
+  [frontend]<<app>> as frontend
+  [api]<<package>> as api
+  [docs]<<app>> as docs
+  [mocks]<<package>> as mockData
+  [msw]<<package>> as mockApi
+  [ui]<<package>> as ui
+  [config/eslint]<<package>> as eslintConfig
+  [config/typescript]<<package>> as typescriptConfig
+}
+
+prototype --> api : verwendet
+prototype --> mockApi : verwendet
+prototype --> ui : verwendet
+
+frontend --> api : verwendet
+frontend --> mockApi : verwendet
+frontend --> ui : verwendet
+
+mockApi --> mockData : verwendet
+mockApi --> api : verwendet
+mockData --> api : verwendet
+
+note top of prototype : PLANNING STACK TEMPLATE Anwendung Prototyp
+note top of frontend : PLANNING STACK TEMPLATE Anwendung Frontend
+note bottom of api : Domain-Typen und -Enums
+note bottom of mockData : Synthetische Daten
+note left of mockApi : Mock-API über Service-Worker
+note right of ui : React-Komponentenbibliothek
+note top of eslintConfig : ESLint-Konfigurationen
+note top of typescriptConfig : TypeScript-Konfigurationen
+
+@enduml
\ No newline at end of file
diff --git a/example-templates/react-router/docs/package.json b/example-templates/react-router/docs/package.json
new file mode 100644
index 0000000..e59c98a
--- /dev/null
+++ b/example-templates/react-router/docs/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@repo/docs",
+  "version": "0.0.0",
+  "main": "index.js",
+  "scripts": {
+    "docs": "antora ./antora-playbook.yml"
+  },
+  "keywords": [
+    "antora"
+  ],
+  "author": "",
+  "dependencies": {
+    "@antora/cli": "^3.1.14",
+    "@antora/site-generator-default": "^3.1.14",
+    "asciidoctor-kroki": "^0.18.1",
+    "mkdirp": "^3.0.1",
+    "unxhr": "^1.2.0"
+  },
+  "license": "UNLICENSED",
+  "private": true,
+  "description": "Entwicklerdokumentation für das PLANNING STACK TEMPLATE Projekt"
+}
diff --git a/example-templates/react-router/frontend/package.json b/example-templates/react-router/frontend/package.json
new file mode 100644
index 0000000..7441f2c
--- /dev/null
+++ b/example-templates/react-router/frontend/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@repo/frontend",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@repo/api": "*",
+    "@repo/msw": "*",
+    "@repo/ui": "*"
+  }
+}
diff --git a/example-templates/react-router/mocks/AGENTS.md b/example-templates/react-router/mocks/AGENTS.md
new file mode 100644
index 0000000..e7b4e3a
--- /dev/null
+++ b/example-templates/react-router/mocks/AGENTS.md
@@ -0,0 +1,128 @@
+# Mocks – Agent Guide
+
+This guide explains how the mock dataset under `mocks/` is structured, how to extend it for new entities/fields, and how to keep it deterministic and aligned with the real API. These mocks power both MSW handlers (dev and tests) and the optional JSON snapshot CLI.
+
+Related docs
+- `../msw/AGENTS.md` — MSW handler conventions and RBAC patterns.
+- `../AGENTS.md` — project overview and how mocks are used.
+- `./README.md` — ERD and API Models; authoritative schema reference for mocks.
+
+See the root AGENTS.md for the role of mocks in local dev and tests. This document focuses on how to create and maintain the generators themselves.
+
+## Goals
+
+- Deterministic, realistic sample data with Faker.
+- Type-safe and aligned with `src/types/*` shapes returned by the real API.
+- Referential integrity between entities and reverse indices preserved.
+- Simple knobs to control dataset size, seed, and reference date.
+
+## Folder Overview
+
+- `src/generators/config.ts`: dataset presets and the `DatasetConfig` type. Control size, seeding, and reference date.
+- `src/generators/dataset.ts`: `buildDataset(config)` orchestrates end-to-end data creation and assembles indices.
+- `src/generators`: pure, per-entity generators.
+- `facts`: static catalogs (hero users, model names, endpoint bases) used across generations.
+- `types.ts`: mock-local types not present in `src/types/*` (e.g., `EntraUser`).
+- `utils.ts`: small helpers (e.g., `today()` zeroed to midnight for stable dates).
+- `cli/generate-data.ts`: CLI to write JSON snapshots under `mocks/data-mocks/` for manual review.
+- `data-mocks/`: optional generated snapshots, not used by the app at runtime.
+
+## Quick Start
+
+- Build a dataset in code (used by MSW):
+  - `import { buildDataset, datasetConfigs } from '@/mocks'` then `const { data } = buildDataset(datasetConfigs.medium)`.
+- Run dev server with MSW-based mocks: `npm run dev:mocks`.
+- Generate a JSON snapshot (manual inspection only):
+  - `npm run generate:small`
+  - or `npx tsx mocks/cli/generate-data.ts -d medium -s 42 -o mocks/data-mocks/mocks.<size>.json`
+
+## Determinism and Seeding
+
+- `buildDataset(config)` uses Faker with a `Randomizer` and optional `seed`. Provide one for reproducible datasets.
+- `refDate` (in presets) anchors all time-dependent Faker calls for stability across runs.
+- If you need purely random runs, omit both `seed` and `refDate` and pass a custom `randomizer` if needed.
+
+## Dataset Shape and Indices
+
+`Dataset` (in `dataset.ts`) stores flat maps plus reverse indices for joins:
+
+- Entities: `Thing` <TODO: Add entities here>.
+- Reverse indices:
+  - `users_things: Record<userId, subscriptionId[]>`
+
+When mutating or extending the dataset, always keep the indices in sync. MSW handlers rely on these to serve list/detail endpoints efficiently.
+
+## Generators – Authoring Guidelines
+
+- Keep generators pure: they should only use the provided `faker` and arguments to return a typed value.
+- Use domain read types from `src/types/*` for outputs (e.g., `ThingRead`) where possible. Otherwise, create custom types in `mocks/types.ts`.
+- Respect API invariants and optionals:
+  - Example: optional entries should sometimes be `undefined`.
+- Use `UniqueEnforcer` (already wired in `dataset.ts`) for fields that must be unique.
+- Timestamps: prefer `created_at` <= `updated_at` <= `now/refDate` patterns. Use `faker.date.between({ from, to })` to keep order valid.
+- Cross-entity coherence: generate IDs first, then derive relationships.
+
+## Orchestration – `buildDataset`
+
+- Users: creates two “hero” users from `static.ts` (`admin`, `user`) and fills the remainder with Faker.
+- TODO: Add more hints here.
+
+If you add new entities or relationships, follow the same pattern: create base catalogs in `static.ts` (if needed), generate entities, then compute derived relationships and reverse indices in a single pass to avoid inconsistencies.
+
+## Presets – `config.ts`
+
+- `DatasetConfig` supports:
+  - `seed` and `refDate` for determinism; or a custom `randomizer`.
+  - Size knobs: Tune these only when necessary for performance or demo fidelity.
+- When changing presets, ensure MSW dev config still behaves well (see `msw/dev-handlers.ts` which uses `datasetConfigs.medium`).
+
+## Extending the Mocks – New Entity Checklist
+
+1. Types first
+   - Add zod/TS types under `src/types/<entity>.ts` (Read/Write shapes).
+   - Reuse API-level types for generator outputs (e.g., `<Entity>Read`).
+2. Generator
+   - Implement `generate<Entity>({ faker, ...deps })` in `mocks/generators.ts`.
+   - Ensure required foreign keys are passed in or computable.
+3. Static catalogs (optional)
+   - If the entity has a fixed base set (like model names or endpoint bases), add a list to `mocks/src/facts/static.ts`.
+4. Dataset assembly
+   - Extend `Dataset` in `mocks/src/generators/dataset.ts` with new maps and necessary reverse indices.
+   - Update `buildDataset` to generate, link, and index the new entity consistently.
+5. MSW handlers
+   - Add or update handlers in `msw/*.ts` to expose list/detail/mutations using the new dataset fields. See `msw/AGENTS.md` for conventions.
+6. CLI output (optional)
+   - Snapshots automatically include anything in `data`. No CLI changes needed unless you add CLI flags.
+
+## Maintaining and Evolving Fields
+
+- Add a field to an entity
+  - Update `src/types/*` first; adjust generators to produce realistic values.
+  - If the field is relational, update `Dataset` maps/indices and the assembly logic.
+  - Update MSW handlers to read/write the field on mutations.
+- Rename/remove a field
+  - Change `src/types/*`, fix generators and any code in `dataset.ts` referencing it.
+  - Consider a transitional period where generators output both old and new data only if MSW/test code requires it; otherwise, prefer a straight rename.
+- Optional booleans/dates
+  - Randomize presence with a clear probability (e.g., `faker.datatype.boolean({ probability: 0.3 })` for optional dates) to surface varied UI states.
+
+## Quality and Performance
+
+- Keep functions small and side-effect free; orchestration goes in `buildDataset`.
+- Be mindful of the `full` preset size; it is for stress testing, not for default dev.
+- Avoid heavy computations in per-entity generators; precompute sets/lists in `buildDataset` and pass them down.
+
+## Common Pitfalls
+
+- Forgetting reverse index updates when adding relationships (leads to empty lists in MSW routes).
+- Using ad-hoc shapes instead of `src/types/*` (breaks type safety and handler consistency).
+- Reading current time directly; prefer `faker.setDefaultRefDate(refDate)` and `today()` for stable scenarios.
+- Returning fields that only exist in write payloads or server-only flows (e.g., secret key material).
+
+## Examples
+
+Add examples here
+
+---
+
+For handler conventions and RBAC patterns, see `msw/AGENTS.md`. For how mocks integrate into the app and tests, see the root `AGENTS.md` (sections 2.3–2.5).
diff --git a/example-templates/react-router/mocks/README.md b/example-templates/react-router/mocks/README.md
new file mode 100644
index 0000000..593a753
--- /dev/null
+++ b/example-templates/react-router/mocks/README.md
@@ -0,0 +1,74 @@
+# PLANNING STACK TEMPLATE Mock Data
+
+This module contains a mock data generator for the PLANNING STACK TEMPLATE Web Project. Pseudorandom
+data is generated using the [Faker JS Library](https://fakerjs.dev/).
+
+NOTE: This repo builds only snapshot releases. Make sure you always install the latest version of
+the package using the 'next' tag.
+
+```bash
+npm install @repo/mocks@next
+```
+
+Also make sure Vite does not cache the module.
+
+```javascript
+// vite.config.ts
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['@repo/mocks'],
+  },
+});
+```
+
+A full dataset export for medium and small size are exported separately and can be imported into
+projects.
+
+    import { medium } from '@repo/mocks/medium';
+
+The Repository also exports msw 2 handlers for the mock data. The handlers can read the user data
+from the request and return the correct data for the user. msw is a peer dependency of this package.
+
+```typescript
+// handlers.ts
+
+import { stammdatenHandlers, auth } from '@repo/mocks/handlers';
+import { medium } from '@repo/mocks/medium';
+
+// Create handlers for the medium dataset and the provided auth function
+export const handlers = [...stammdatenHandlers(medium, auth)];
+```
+
+The dataset is also built during CI and can be downloaded from the
+[CI Pipelines page](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/pipelines).
+
+Download the latest Artifact:
+[JSON](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/jobs/artifacts/main/download?job=publish)
+/
+[JavaScript](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/jobs/artifacts/main/download?job=build).
+
+## Usage
+
+NOTE: To get consistent data, there has to be one randomizer instance that is used exclusively for
+the whole run and passed in as an argument to all generators. Never use a global Faker instance to
+generate data.
+
+The generator creates models that represent the data structure for the domain. Then the API
+responses are inferred from these models.
+
+The `buildDataset` method generates a complete dataset based on the provided configuration. There
+are 3 pre-defined configurations in `datasetConfigs` that can be used:
+
+- `small`: Generates a dataset with 7 organisations with up to 6 members each.
+- `medium`: Generates a dataset with 7 organisations with up to 18 members each.
+- `full`: Generates a dataset with all organisations with the true number of members each. (not
+  implemented yet)
+
+## Repo Structure
+
+- cli: Command-Line tool to generate the dataset.
+- src/data: Contains the Typescript exports for the small and medium dataset. The dataset is
+  generated at import time.
+- src/facts: Contains static data from other sources or enums.
+- src/generators: Contains the Typescript code for the generated mock data.
diff --git a/example-templates/react-router/mocks/cli/generate-data.mjs b/example-templates/react-router/mocks/cli/generate-data.mjs
new file mode 100755
index 0000000..778a61c
--- /dev/null
+++ b/example-templates/react-router/mocks/cli/generate-data.mjs
@@ -0,0 +1,66 @@
+#! /usr/bin/env node
+
+import { Option, program } from 'commander';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { buildDataset, datasetConfigs } from '../dist/src/index.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const defaultOutputFile = path.join(
+	path.dirname(__filename),
+	'../data-mocks/mocks.<size>.json',
+);
+
+const hintOutputFile = path.join(path.dirname(__filename), '../data-mocks/hints.<size>.json');
+
+program
+	.name('planning-stack-template-mocks-generator')
+	.description('CLI to generate mock data for the PLANNING STACK TEMPLATE Web Project.')
+	.option(
+		'-o, --output [./path/to/save/file.json]',
+		'Path where the generated data should be saved. The <size> placeholder will be replaced by the size of the dataset.',
+		defaultOutputFile,
+	)
+	.addOption(
+		new Option('-d, --dataset <size>', 'Dataset to use for the generation of the mock data.')
+			.choices(['small', 'medium', 'full'])
+			.makeOptionMandatory(),
+	)
+	// .option('-i, --indexed', 'Generate an indexed dataset.', false)
+	.option('-s, --seed <seed>', 'Seed for the random number generator.')
+	.parse(process.argv);
+
+const options = program.opts();
+const { output, dataset, seed } = options;
+
+const outfile = output.replace('<size>', dataset);
+
+if (!fs.existsSync(path.dirname(outfile))) {
+	console.log(
+		`\x1b[33m Output folder '${outfile}' does not exist, creating it right now. \u001B[0m`,
+	);
+	fs.mkdirSync(path.dirname(outfile), {
+		recursive: true,
+	});
+}
+
+const message = `\x1b[33m Generated mock data, writing ${outfile}... \u001B[0m`;
+
+console.time(message);
+
+const config = datasetConfigs[dataset];
+
+if (!config) {
+	throw new Error(`Dataset ${dataset} not found`);
+}
+
+if (seed) {
+	config.seed = seed;
+}
+
+const { data } = buildDataset(config);
+
+console.timeEnd(message);
+
+fs.writeFileSync(outfile, JSON.stringify(data, undefined, 2));
diff --git a/example-templates/react-router/mocks/eslint.config.js b/example-templates/react-router/mocks/eslint.config.js
new file mode 100644
index 0000000..098af4f
--- /dev/null
+++ b/example-templates/react-router/mocks/eslint.config.js
@@ -0,0 +1,12 @@
+import baseConfig from '@repo/eslint-config/base';
+
+export default [
+	...baseConfig,
+	{
+		languageOptions: {
+			parserOptions: {
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+];
diff --git a/example-templates/react-router/mocks/package.json b/example-templates/react-router/mocks/package.json
new file mode 100644
index 0000000..064c24f
--- /dev/null
+++ b/example-templates/react-router/mocks/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@repo/mocks",
+  "sideEffects": false,
+  "type": "module",
+  "bin": {
+    "generate-data": "cli/generate-data.mjs"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-alias",
+    "dev": "tsc && (concurrently \"tsc -w\" \"tsc-alias -w\")",
+    "clean": "rimraf dist && rimraf data-mocks && rimraf .turbo",
+    "format": "prettier --write .",
+    "generate:small": "node cli/generate-data.mjs -d small",
+    "generate:medium": "node cli/generate-data.mjs -d medium",
+    "generate:full": "node cli/generate-data.mjs -d full",
+    "format:check": "prettier . --check",
+    "typecheck": "tsc && tsc-alias",
+    "lint": "eslint src",
+    "test": "vitest",
+    "publish:manual": "npm publish --@planning-stack-template:registry=https://bin.ti8m.ch/artifactory/api/npm/planning-stack-template_npm-snapshot-local/",
+    "lint-staged": "lint-staged"
+  },
+  "files": [
+    "data-mocks",
+    "dist",
+    "cli"
+  ],
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.7.4",
+    "fs-extra": "^11.3.2",
+    "rimraf": "^6.1.2"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^10.1.0",
+    "@repo/api": "*",
+    "commander": "^14.0.2",
+    "enforce-unique": "^1.3.0",
+    "memoize": "^10.2.0"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js"
+    },
+    "./data-mocks/*.json": {
+      "import": "./data-mocks/*.json"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  }
+}
diff --git a/template/mocks/src/generators/auth.ts b/example-templates/react-router/mocks/src/generators/auth.ts
similarity index 100%
rename from template/mocks/src/generators/auth.ts
rename to example-templates/react-router/mocks/src/generators/auth.ts
diff --git a/example-templates/react-router/mocks/src/generators/config.ts b/example-templates/react-router/mocks/src/generators/config.ts
new file mode 100644
index 0000000..81c26b8
--- /dev/null
+++ b/example-templates/react-router/mocks/src/generators/config.ts
@@ -0,0 +1,55 @@
+import type { Randomizer } from '@faker-js/faker';
+
+type ConfigBase = {
+	/**
+	 * Optional randomizer to use for generating the dataset.
+	 */
+	randomizer?: Randomizer;
+	companyCount: number;
+	/**
+	 * Number of persons to generate.
+	 */
+	personCount: number;
+};
+
+type ConfigWithSeed = {
+	/**
+	 * The seed for the random number generator.
+	 */
+	seed: number;
+	/**
+	 * The reference date for the dataset.
+	 */
+	refDate: Date;
+} & ConfigBase;
+
+type ConfigWithoutSeed = {
+	randomizer?: Randomizer;
+	seed?: never;
+	refDate?: never;
+} & ConfigBase;
+
+export type DatasetConfig = ConfigWithSeed | ConfigWithoutSeed;
+
+export const datasetConfigs = {
+	small: {
+		seed: 1,
+		refDate: new Date('2024-09-11T00:00:00.000Z'),
+		companyCount: 2,
+		personCount: 3,
+	},
+	medium: {
+		seed: 1,
+		refDate: new Date('2024-09-11T00:00:00.000Z'),
+		companyCount: 2,
+		personCount: 50,
+	},
+	full: {
+		seed: 1,
+		refDate: new Date('2024-09-11T00:00:00.000Z'),
+		companyCount: 300,
+		personCount: 10000,
+	},
+} satisfies Record<string, DatasetConfig>;
+
+export type DatasetPreset = keyof typeof datasetConfigs;
diff --git a/example-templates/react-router/mocks/src/generators/dataset.test.ts b/example-templates/react-router/mocks/src/generators/dataset.test.ts
new file mode 100644
index 0000000..534743d
--- /dev/null
+++ b/example-templates/react-router/mocks/src/generators/dataset.test.ts
@@ -0,0 +1,24 @@
+import { expect, test } from 'vitest';
+import { datasetConfigs } from './config.js';
+import { buildDataset } from './dataset.js';
+
+const smallConfig = datasetConfigs.small;
+
+test('small dataset', () => {
+	const { data } = buildDataset(smallConfig);
+	expect(data).toBeDefined();
+	expect(data.companies).toBeDefined();
+	expect(Object.keys(data.companies).length).toBe(smallConfig.companyCount);
+	expect(data.persons).toBeDefined();
+	expect(Object.keys(data.persons).length).toBe(smallConfig.personCount);
+	expect(data.tokens).toBeDefined();
+});
+
+test('small dataset is deterministic', () => {
+	const { data: dataset1 } = buildDataset(smallConfig);
+	buildDataset(smallConfig);
+	const { data: dataset2 } = buildDataset(smallConfig);
+	expect(dataset1).toEqual(dataset2);
+	const { data: dataset3 } = buildDataset({ ...smallConfig, seed: 1234 });
+	expect(dataset1).not.toEqual(dataset3);
+});
diff --git a/example-templates/react-router/mocks/src/generators/dataset.ts b/example-templates/react-router/mocks/src/generators/dataset.ts
new file mode 100644
index 0000000..6da521f
--- /dev/null
+++ b/example-templates/react-router/mocks/src/generators/dataset.ts
@@ -0,0 +1,180 @@
+import { JWTPayload } from '#/generators/auth.js';
+import { Person } from '#/generators/demo/persons.js';
+import type { ICompany, IPerson, IWorkingAt } from '#/generators/demo/types.js';
+import { generateMersenne53Randomizer } from '@faker-js/faker';
+import type { DatasetConfig } from './config.js';
+import { Company, WorkingAt } from './demo/companies.js';
+import { createFaker } from './utils.js';
+
+function today() {
+	const d = new Date();
+	d.setHours(0, 0, 0, 0);
+	return d;
+}
+
+/**
+ * The dataset generated by the buildDataset function. This is exported and used
+ * by the mock api to serve data.
+ */
+export type Dataset = {
+	// Example entities
+	/**
+	 * All companies in the dataset indexed by their ID.
+	 */
+	companies: Record<string, ICompany>;
+
+	/**
+	 * All persons in the dataset indexed by their ID.
+	 */
+	persons: Record<string, IPerson>;
+
+	/**
+	 * All working at relationships in the dataset indexed by their person ID.
+	 */
+	workingAt: IWorkingAt[];
+
+	/**
+	 * All tokens in the dataset indexed by their login id.
+	 */
+	tokens: Record<string, JWTPayload>;
+};
+
+/**
+ * Indexes for the dataset. These are used to speed up queries.
+ * They can be used without performance penalty by the mock api, but should not be exported to JSON
+ * since it is redundant data.
+ */
+export type DatasetIndexes = {
+	workingAtIndexedByPersonId: Record<string, IWorkingAt>;
+	workingAtIndexedByCompanyId: Record<string, IWorkingAt[]>;
+};
+
+/**
+ * This method generates a complete dataset based on the provided configuration.
+ * @param config - The configuration for the dataset.
+ * @returns The generated dataset.
+ */
+export function buildDataset(config: DatasetConfig) {
+	// Create a randomizer or use the provided one.
+	const randomizer = config.randomizer ?? generateMersenne53Randomizer();
+
+	// Seed the randomizer if a seed is provided to get deterministic results.
+	if (config.seed != null) {
+		randomizer.seed(config.seed + 1);
+	}
+
+	// Create a faker instance with the randomizer and refDate.
+	// The refDate is used to generate data that is relative to a specific date.
+	// If no refDate is provided, the current date is used.
+	const refDate = config.refDate ?? today();
+	const faker = createFaker({ randomizer, refDate });
+
+	// Create a unique enforcer to ensure unique ids.
+	// const uniqueEnforcer = new UniqueEnforcer();
+
+	/*
+		Generate a demo dataset. This code can be deleted
+		and replaced with your own data generation logic.
+	*/
+
+	// Generate companies
+	const companies: Record<string, ICompany> = {};
+	// The first company is our main company. We pass it a name so we can identify it.
+	companies.acme = Company({
+		faker,
+		refDate,
+		id: 'acme',
+		name: 'ACME Inc.',
+	});
+
+	// The remaining companies are generated by the Company generator.
+	// The iterator starts at 1 because we already created the main company.
+	for (let i = 1; i < config.companyCount; i++) {
+		const company = Company({
+			faker,
+			refDate,
+		});
+		companies[company.id] = company;
+	}
+
+	// Generate persons
+	const persons: Record<string, IPerson> = {};
+	// We need an admin user, so we create it first.
+	persons.admin = Person({
+		faker,
+		id: 'admin',
+	});
+
+	// The remaining persons are generated by the Person generator.
+	// The iterator starts at 1 because we already created the admin user.
+	for (let i = 1; i < config.personCount; i++) {
+		const person = Person({
+			faker,
+		});
+		persons[person.id] = person;
+	}
+
+	// Generate working at relationships
+	const workingAt: IWorkingAt[] = [];
+	const { admin, ...otherPersons } = persons;
+	// Our admin user works at the main company.
+	workingAt.push({ personId: admin.id, companyId: companies.acme.id, role: 'admin' });
+	// The remaining persons are assigned to a random company.
+	for (const person of Object.values(otherPersons)) {
+		const company = faker.helpers.objectValue(companies);
+		workingAt.push(WorkingAt({ faker, personId: person.id, companyId: company.id }));
+	}
+	// Make sure we also have at least one manager and one employee.
+	if (workingAt[1] != null) workingAt[1].role = 'manager';
+	if (workingAt[2] != null) workingAt[2].role = 'employee';
+
+	// Index the working at relationships by person id for further processing.
+	// To make the example easier, a person can only work at one company.
+	const workingAtIndexedByPersonId = Object.fromEntries(workingAt.map(e => [e.personId, e]));
+	// A company can have multiple persons working at it.
+	const workingAtIndexedByCompanyId = Object.groupBy(workingAt, e => e.companyId) as Record<
+		string,
+		IWorkingAt[]
+	>;
+
+	// Create Login tokens for the admin user, a manager and an employee.
+	const tokens: Record<string, JWTPayload> = {};
+	tokens.admin = JWTPayload({ person: admin, company: companies.acme, role: 'admin' });
+	const manager = workingAt.find(e => e.role === 'manager');
+	const employee = workingAt.find(e => e.role === 'employee');
+	if (manager != null)
+		tokens.manager = JWTPayload({
+			person: persons[manager.personId]!,
+			company: companies[manager.companyId]!,
+			role: manager.role,
+		});
+	if (employee != null)
+		tokens.employee = JWTPayload({
+			person: persons[employee.personId]!,
+			company: companies[employee.companyId]!,
+			role: employee.role,
+		});
+
+	const data: Dataset = {
+		companies,
+		persons,
+		workingAt,
+		tokens,
+	};
+
+	const indexes: DatasetIndexes = {
+		workingAtIndexedByPersonId,
+		workingAtIndexedByCompanyId,
+	};
+
+	/*
+		END CUSTOM DATA GENERATION
+	*/
+
+	return {
+		randomizer,
+		faker,
+		data,
+		indexes,
+	};
+}
diff --git a/template/mocks/src/generators/demo/companies.ts b/example-templates/react-router/mocks/src/generators/demo/companies.ts
similarity index 100%
rename from template/mocks/src/generators/demo/companies.ts
rename to example-templates/react-router/mocks/src/generators/demo/companies.ts
diff --git a/template/mocks/src/generators/demo/persons.ts b/example-templates/react-router/mocks/src/generators/demo/persons.ts
similarity index 100%
rename from template/mocks/src/generators/demo/persons.ts
rename to example-templates/react-router/mocks/src/generators/demo/persons.ts
diff --git a/template/mocks/src/generators/demo/types.ts b/example-templates/react-router/mocks/src/generators/demo/types.ts
similarity index 100%
rename from template/mocks/src/generators/demo/types.ts
rename to example-templates/react-router/mocks/src/generators/demo/types.ts
diff --git a/template/mocks/src/generators/utils.ts b/example-templates/react-router/mocks/src/generators/utils.ts
similarity index 100%
rename from template/mocks/src/generators/utils.ts
rename to example-templates/react-router/mocks/src/generators/utils.ts
diff --git a/example-templates/react-router/mocks/src/index.ts b/example-templates/react-router/mocks/src/index.ts
new file mode 100644
index 0000000..11ec417
--- /dev/null
+++ b/example-templates/react-router/mocks/src/index.ts
@@ -0,0 +1,5 @@
+export type { JWTPayload } from '#/generators/auth.js';
+export { datasetConfigs } from '#/generators/config.js';
+export type { DatasetConfig, DatasetPreset } from '#/generators/config.js';
+export { buildDataset } from '#/generators/dataset.js';
+export type { Dataset, DatasetIndexes } from '#/generators/dataset.js';
diff --git a/example-templates/react-router/mocks/src/static/README.md b/example-templates/react-router/mocks/src/static/README.md
new file mode 100644
index 0000000..1ccd576
--- /dev/null
+++ b/example-templates/react-router/mocks/src/static/README.md
@@ -0,0 +1 @@
+Add static data here.
diff --git a/example-templates/react-router/mocks/tsconfig.json b/example-templates/react-router/mocks/tsconfig.json
new file mode 100644
index 0000000..bfecdbc
--- /dev/null
+++ b/example-templates/react-router/mocks/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@repo/typescript-config/node-library.json",
+  "include": ["./src/**/*.ts", "./src/**/*.json"],
+  "compilerOptions": {
+    "paths": {
+      "#/*": ["./src/*"]
+    },
+    "baseUrl": ".",
+    "outDir": "dist"
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/example-templates/react-router/mocks/vite.config.ts b/example-templates/react-router/mocks/vite.config.ts
new file mode 100644
index 0000000..843864c
--- /dev/null
+++ b/example-templates/react-router/mocks/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig(() => {
+	return {
+		plugins: [tsconfigPaths()],
+	};
+});
diff --git a/example-templates/react-router/msw/AGENTS.md b/example-templates/react-router/msw/AGENTS.md
new file mode 100644
index 0000000..a4bced2
--- /dev/null
+++ b/example-templates/react-router/msw/AGENTS.md
@@ -0,0 +1,167 @@
+# MSW Mocks – Agent Guide
+
+This document captures the conventions for adding and evolving the MSW handlers in this repo. Follow these guidelines to keep mocks predictable, type-safe, and realistic.
+
+Related docs
+- `../mocks/AGENTS.md` — mock dataset structure, generators and presets.
+- `../AGENTS.md` — project overview and how mocks integrate in dev/tests.
+- `../mocks/data-mocks/mocks.small.json` — A small and representative example of the dataset that is passed to the generate functions.
+
+## Core Principles
+
+- Type safety first: use the http method generics for Params, RequestBody, ResponseBody but not Path since this is inferred.
+- Never read cookies directly: always call `auth(request.headers)` or `auth(request.headers, 'admin')`.
+- Prefer early auth failure: use `auth(request.headers, 'admin')` on admin-only routes to avoid manual checks.
+- Keep responses realistic: return 404 for missing resources and 403 for RBAC violations, and add small `serverDelay(...)`.
+- Mutations can and should update the in-memory dataset in-place, including reverse indices.
+- Use absolute URLs for paths: `http://localhost:3000/api/v1/...`.
+- You can throw error responses like 403 with custom bodies instead of returning them to avoid type errors.
+
+The code for the api layer that is consuming the mock API is defined in src/api.
+
+## Imports You’ll Typically Need
+
+- Dataset and types
+  - `import type { Dataset } from '@/mocks/dataset'`
+  - Domain types from `src/types/*
+- Helpers
+  - `import { serverDelay } from '@/msw/utils'`
+  - `import type { AuthFunction } from '@/msw/utils'`
+
+## Handler Shape and Exports
+
+- Group related handlers in a `getXxxHandlers(dataset, auth, addDelay)` function that returns a plain object.
+- Export `xxxHandlers(dataset, auth, addDelay)` as an array: `Object.values(getXxxHandlers(...))`.
+
+Example skeleton:
+
+```
+function getWidgetHandlers(dataset: Dataset, auth: AuthFunction, addDelay: boolean) {
+  return {
+    list: http.get<never, never, WidgetRead[], 'http://localhost:3000/api/v1/widgets'>(
+      'http://localhost:3000/api/v1/widgets',
+      async ({ request }) => {
+        auth(request.headers, 'admin');
+        const data = Object.values(dataset.widgets);
+        await serverDelay(data.length, addDelay);
+        return HttpResponse.json(data);
+      },
+    ),
+  };
+}
+
+export const widgetHandlers = (dataset: Dataset, auth: AuthFunction, addDelay: boolean) =>
+  Object.values(getWidgetHandlers(dataset, auth, addDelay));
+```
+
+## Generics and Types
+
+Always annotate the handler with generics: `http.METHOD<Params, RequestBody, ResponseBody>(...)`.
+Do not pass the path as a 4th generic argument — it is inferred from the first string parameter. Keep only the first three generic parameters typed.
+
+Examples for a "Things" Endpoint:
+
+- List
+```
+http.get<never, never, ThingRead[]>(
+  'http://localhost:3000/api/v1/things',
+  async ({ request }) => { /* auth(request.headers, 'admin') ... */ },
+)
+```
+
+- Mine
+```
+http.get<never, never, ThingRead[]>(
+  'http://localhost:3000/api/v1/things/mine',
+  async ({ request }) => { /* auth(request.headers) ... */ },
+)
+```
+
+- Detail
+```
+http.get<{ id: string }, never, ThingRead>(
+  'http://localhost:3000/api/v1/things/:id',
+  async ({ request, params }) => { /* ... */ },
+)
+```
+
+- Create
+```
+http.post<never, Thing, ThingRead>(
+  'http://localhost:3000/api/v1/things',
+  async ({ request }) => { /* ... */ },
+)
+```
+
+- Update
+```
+http.put<{ id: string }, Thing & { readonly id: string }, ThingRead>(
+  'http://localhost:3000/api/v1/things/:id',
+  async ({ request, params }) => { /* ... */ },
+)
+```
+
+- Delete
+```
+http.delete<{ id: string }, never>(
+  'http://localhost:3000/api/v1/things/:id',
+  async ({ request, params }) => { /* ... */ },
+)
+```
+
+## Auth and RBAC
+
+- Use `auth(request.headers)` for routes accessible to both admin and end-users. RBAC checks (e.g., owner vs non-owner) must be handled within the handler.
+- Use `auth(request.headers, 'admin')` for admin-only routes. This fails early with a standardized error — no extra checks needed.
+- Do not access cookies directly. The `auth` helper returns a Session with `user.role` and `user.id`.
+- If mocks are active, the Auth token that was returned from Entra ID is replaced with a serialized hero user object. This is then extracted in the auth() function.
+
+Owner-check example (admin-or-owner):
+
+```
+const session = auth(request.headers);
+const isAdmin = session.user.role === 'admin';
+const userId = session.user.id!;
+const isOwner = userId === thing.ownerId
+if (!isAdmin && !isOwner) {
+  return HttpResponse.json({ detail: 'Not authorized' }, { status: 403, statusText: 'Forbidden' });
+}
+```
+
+## Errors and Delays
+
+- Not found: `return HttpResponse.json(null, { status: 404, statusText: 'Not Found' })`.
+- Unauthorized: `403` for RBAC failures inside handlers. Admin-only endpoints use `auth(request.headers, 'admin')` to fail early.
+- Add small artificial latency using `serverDelay(sizeOr1, addDelay)`.
+
+## Dataset Mutations
+
+Mutations should update the dataset in-place. Maintain reverse indices to keep data consistent.
+
+- Creating a Thing (example entity)
+  - Add to `dataset.things[id]`.
+  - Push `id` into owner arrays: `dataset.users_things[owner_id]`.
+
+- Updating a Thing
+  - Merge fields and update `updated_at`/`updated_by`.
+  - If owners change, remove previous links and add new ones in `dataset.users_things`.
+
+- Deleting a Thing
+  - Remove id from owners in `dataset.users_things`.
+
+## Path Conventions
+
+- Always use absolute URL strings as the path argument (e.g., `'http://localhost:3000/api/v1/...')`. Do not pass the path as a generic type parameter; it’s inferred from the first argument.
+
+## Do and Don’t
+
+- Do:
+  - Keep handlers concise and deterministic.
+  - Use the types from `src/types` and keep response shapes identical to the real API.
+  - Group related handlers and export as arrays.
+- Don’t:
+  - Read cookies directly or from `document.cookie` in these handlers.
+  - Return shapes that differ from the real API.
+
+---
+
diff --git a/example-templates/react-router/msw/eslint.config.js b/example-templates/react-router/msw/eslint.config.js
new file mode 100644
index 0000000..098af4f
--- /dev/null
+++ b/example-templates/react-router/msw/eslint.config.js
@@ -0,0 +1,12 @@
+import baseConfig from '@repo/eslint-config/base';
+
+export default [
+	...baseConfig,
+	{
+		languageOptions: {
+			parserOptions: {
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+];
diff --git a/example-templates/react-router/msw/full/index.ts b/example-templates/react-router/msw/full/index.ts
new file mode 100644
index 0000000..1d4150c
--- /dev/null
+++ b/example-templates/react-router/msw/full/index.ts
@@ -0,0 +1,22 @@
+import { auth } from '#/auth.js';
+import { authHandlers } from '#/handlers/auth.js';
+import { demoHandlers } from '#/handlers/demo.js';
+import type { Dataset } from '@repo/mocks';
+import { buildDataset, datasetConfigs } from '@repo/mocks';
+import type { HttpHandler } from 'msw';
+
+console.time('building dataset');
+const { data, indexes } = buildDataset(datasetConfigs.full);
+console.timeEnd('building dataset');
+
+/**
+ * Full import
+ */
+
+const handlers: HttpHandler[] = [
+	...authHandlers(data),
+	...demoHandlers({ dataset: data, indexes, auth, addDelay: false }),
+];
+
+export { handlers };
+export type { Dataset };
diff --git a/example-templates/react-router/msw/medium/index.ts b/example-templates/react-router/msw/medium/index.ts
new file mode 100644
index 0000000..f90962a
--- /dev/null
+++ b/example-templates/react-router/msw/medium/index.ts
@@ -0,0 +1,18 @@
+import { auth } from '#/auth.js';
+import { authHandlers } from '#/handlers/auth.js';
+import { demoHandlers } from '#/handlers/demo.js';
+import type { Dataset } from '@repo/mocks';
+import { buildDataset, datasetConfigs } from '@repo/mocks';
+import type { HttpHandler } from 'msw';
+
+console.time('building dataset');
+const { data, indexes } = buildDataset(datasetConfigs.medium);
+console.timeEnd('building dataset');
+
+const handlers: HttpHandler[] = [
+	...authHandlers(data),
+	...demoHandlers({ dataset: data, indexes, auth, addDelay: false }),
+];
+
+export { handlers };
+export type { Dataset };
diff --git a/example-templates/react-router/msw/package.json b/example-templates/react-router/msw/package.json
new file mode 100644
index 0000000..44e84a4
--- /dev/null
+++ b/example-templates/react-router/msw/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@repo/msw",
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-alias",
+    "dev": "tsc && (concurrently \"tsc -w\" \"tsc-alias -w\")",
+    "clean": "rimraf dist && rimraf .turbo",
+    "format": "prettier --write .",
+    "typecheck": "tsc && tsc-alias",
+    "lint": "eslint src",
+    "lint-staged": "lint-staged"
+  },
+  "dependencies": {
+    "@repo/api": "*",
+    "@repo/mocks": "*",
+    "@tinyhttp/cookie": "^2.1.1",
+    "memoize": "^10.2.0",
+    "msw": "^2.12.4",
+    "query-string": "^9.3.1"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/node": "^22.7.4",
+    "openapi-typescript": "^7.10.1",
+    "prettier": "^3.7.4"
+  },
+  "peerDependencies": {
+    "msw": "^2.4.9"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js"
+    },
+    "./handlers": {
+      "types": "./dist/src/handlers/index.d.ts",
+      "import": "./dist/src/handlers/index.js"
+    },
+    "./medium": {
+      "types": "./dist/medium/index.d.ts",
+      "import": "./dist/medium/index.js"
+    },
+    "./full": {
+      "types": "./dist/full/index.d.ts",
+      "import": "./dist/full/index.js"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/template/msw/src/auth.ts b/example-templates/react-router/msw/src/auth.ts
similarity index 100%
rename from template/msw/src/auth.ts
rename to example-templates/react-router/msw/src/auth.ts
diff --git a/template/msw/src/handlers/auth.ts b/example-templates/react-router/msw/src/handlers/auth.ts
similarity index 100%
rename from template/msw/src/handlers/auth.ts
rename to example-templates/react-router/msw/src/handlers/auth.ts
diff --git a/template/msw/src/handlers/demo.ts b/example-templates/react-router/msw/src/handlers/demo.ts
similarity index 100%
rename from template/msw/src/handlers/demo.ts
rename to example-templates/react-router/msw/src/handlers/demo.ts
diff --git a/example-templates/react-router/msw/src/handlers/index.ts b/example-templates/react-router/msw/src/handlers/index.ts
new file mode 100644
index 0000000..e482c73
--- /dev/null
+++ b/example-templates/react-router/msw/src/handlers/index.ts
@@ -0,0 +1,2 @@
+export { authHandlers as getAuthHandlers } from './auth.js';
+export { demoHandlers as getDemoHandlers } from './demo.js';
diff --git a/example-templates/react-router/msw/src/index.ts b/example-templates/react-router/msw/src/index.ts
new file mode 100644
index 0000000..fe6a037
--- /dev/null
+++ b/example-templates/react-router/msw/src/index.ts
@@ -0,0 +1,2 @@
+export { auth } from '#/auth.js';
+export type { JWTPayload } from './handlers/auth.ts';
diff --git a/example-templates/react-router/msw/src/utils.ts b/example-templates/react-router/msw/src/utils.ts
new file mode 100644
index 0000000..d653d9a
--- /dev/null
+++ b/example-templates/react-router/msw/src/utils.ts
@@ -0,0 +1,39 @@
+import type { PaginatedResponse } from '@repo/api/commons/types';
+
+/**
+ * This function simulates a delay that is caused by the server.
+ * It waits a constant amount and adds an optional linear amount depending on the parameter n.
+ * @param n - lenght of the returned data array.
+ * @param active - if false, the function will not wait.
+ * @param constantDelay - the constant delay in milliseconds.
+ * @param variableDelay - the linear delay in milliseconds per item.
+ */
+export async function serverDelay(n = 1, active = false, constantDelay = 100, variableDelay = 1) {
+	const delay = active ? constantDelay + n * variableDelay : 0;
+	await new Promise(resolve => setTimeout(resolve, delay));
+}
+
+/**
+ * Pagination helper. Returns a Spring Boot Paginated Response.
+ * @param data Paginated data
+ * @param pageStr Page number (1-indexed) as string
+ * @param sizeStr Page size as string
+ * @returns Paginated response
+ */
+export function paginate<T>(data: T[], searchParams: URLSearchParams): PaginatedResponse<T> {
+	const page = Number(searchParams.get('page') ?? 1);
+	const size = Number(searchParams.get('size') ?? 50);
+	const start = (page - 1) * size;
+	const end = start + size;
+	const totalPages = Math.ceil(data.length / size);
+	return {
+		content: data.slice(start, end),
+		pageable: { pageNumber: page, pageSize: size },
+		totalPages,
+		totalElements: data.length,
+		first: page === 1,
+		last: page === totalPages,
+		size,
+		number: page,
+	};
+}
diff --git a/example-templates/react-router/msw/tsconfig.json b/example-templates/react-router/msw/tsconfig.json
new file mode 100644
index 0000000..820d378
--- /dev/null
+++ b/example-templates/react-router/msw/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@repo/typescript-config/node-library.json",
+  "include": ["./src/**/*.ts", "./full/*.ts", "./medium/*.ts"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/*"]
+    },
+    "outDir": "dist"
+  },
+  "exclude": ["node_modules", "dist", ".turbo"]
+}
diff --git a/example-templates/react-router/package.json b/example-templates/react-router/package.json
new file mode 100644
index 0000000..7f4bd67
--- /dev/null
+++ b/example-templates/react-router/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "planning-stack-template",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "build:data": "turbo run build:data",
+    "build:msw": "turbo build --filter=@repo/msw",
+    "build:prototype": "turbo build --filter=@repo/prototype",
+    "dev": "turbo run dev",
+    "docs": "turbo run docs",
+    "lint": "turbo run lint -- --fix",
+    "test": "turbo run test",
+    "typecheck": "turbo run typecheck",
+    "upgrade": "npx npm-check-updates --interactive --format group -c 2",
+    "clean": "rimraf .turbo && turbo run clean",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "@repo/api": "*",
+    "eslint-plugin-import": "^2.32.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "tsc-alias": "^1.8.16",
+    "turbo": "^2.6.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "resolutions": {
+    "typescript": "5.8.3"
+  },
+  "type": "module",
+  "packageManager": "npm@11.7.0",
+  "license": "MIT",
+  "workspaces": [
+    "api",
+    "config/eslint",
+    "config/typescript",
+    "docs",
+    "frontend",
+    "mocks",
+    "msw",
+    "prototype",
+    "ui"
+  ],
+  "dependencies": {
+    "concurrently": "^9.2.1"
+  }
+}
\ No newline at end of file
diff --git a/example-templates/react-router/prototype/.cursorrules.md b/example-templates/react-router/prototype/.cursorrules.md
new file mode 100644
index 0000000..adc4613
--- /dev/null
+++ b/example-templates/react-router/prototype/.cursorrules.md
@@ -0,0 +1,18 @@
+Dies ist ein Remix SPA Projekt.
+
+Prüfe zuerst die Prompt-Eingabe ob sie Sinn macht und die Anfrage mit den beireitgestellen
+Informationen umgesetzt werden kann. Wenn nicht, frage nach.
+
+Verwende Typescript strict mode. Wähle die Types und Variablen so, dass ungültige Zustände möglichst
+nicht vorkommen können.
+
+Es handelt sich hier um einen Prototypen mit Fokus auf einfache Anpassbarkeit. Es ist nicht nötig,
+Benutzereingaben zu validieren, füge einfache ein TODO-Kommentar hinzu wo es Sinn machen würde.
+
+Optimiere die Antwort auf gute Lesbarkeit und Wartbarkeit. Verwende die Browser APIs wo möglich.
+Beachte dass der Code sowohl im Browser als auch in Node.js ausführbar sein muss.
+
+Die UI-Komponenten im Ordner #/components/ui sind von shadcn/ui. Füge keine weiteren Styling-Klassen
+hinzu (Ausgenommen für äusseres Layout wie margins).
+
+Die Sprache ist deutsch, mit de-ch locale.
diff --git a/example-templates/react-router/prototype/README.md b/example-templates/react-router/prototype/README.md
new file mode 100644
index 0000000..a3ed6cc
--- /dev/null
+++ b/example-templates/react-router/prototype/README.md
@@ -0,0 +1,22 @@
+# PLANNING STACK TEMPLATE Prototyp
+
+Dies ist ein klickbarer UX-Prototyp für das PLANNING STACK TEMPLATE-Projekt. Er ist nicht für den
+Produktiveinsatz gedacht. Der Code ist schnell und einfach geschrieben und nicht optimiert.
+
+Das Ziel dieses Prototyps ist es, schnell über das Design und die Funktionalität der PLANNING STACK
+TEMPLATE-Anwendung iterieren zu können.
+
+Das verwendete UI-Framework ist [shadcn/ui](https://ui.shadcn.com/) mit Tailwind. Das Iconpaket ist
+[Lucide](https://lucide.dev/icons/).
+
+Die Daten werden mit dem Mock-Daten-Generator erzeugt.
+
+## URL
+
+## Entwicklung
+
+Der Prototyp mit dem Mock-Server kann mit folgendem Befehl gestartet werden:
+
+```shellscript
+npm run dev
+```
diff --git a/template/prototype/app/components/context-providers/apiContext.tsx b/example-templates/react-router/prototype/app/components/context-providers/apiContext.tsx
similarity index 100%
rename from template/prototype/app/components/context-providers/apiContext.tsx
rename to example-templates/react-router/prototype/app/components/context-providers/apiContext.tsx
diff --git a/template/prototype/app/components/context-providers/permissionContext.tsx b/example-templates/react-router/prototype/app/components/context-providers/permissionContext.tsx
similarity index 100%
rename from template/prototype/app/components/context-providers/permissionContext.tsx
rename to example-templates/react-router/prototype/app/components/context-providers/permissionContext.tsx
diff --git a/example-templates/react-router/prototype/app/components/ui/avatar.tsx b/example-templates/react-router/prototype/app/components/ui/avatar.tsx
new file mode 100644
index 0000000..4261172
--- /dev/null
+++ b/example-templates/react-router/prototype/app/components/ui/avatar.tsx
@@ -0,0 +1,45 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '#/lib/utils';
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn('aspect-square h-full w-full', className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			'flex h-full w-full items-center justify-center rounded-full bg-muted',
+			className,
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };
diff --git a/example-templates/react-router/prototype/app/components/ui/button.tsx b/example-templates/react-router/prototype/app/components/ui/button.tsx
new file mode 100644
index 0000000..bad4600
--- /dev/null
+++ b/example-templates/react-router/prototype/app/components/ui/button.tsx
@@ -0,0 +1,50 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '#/lib/utils';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+				destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+				outline:
+					'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2',
+				sm: 'h-8 rounded-md px-3 text-xs',
+				lg: 'h-10 rounded-md px-8',
+				icon: 'h-9 w-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button';
+		return (
+			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+		);
+	},
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/example-templates/react-router/prototype/app/components/ui/card.tsx b/example-templates/react-router/prototype/app/components/ui/card.tsx
new file mode 100644
index 0000000..0d36f76
--- /dev/null
+++ b/example-templates/react-router/prototype/app/components/ui/card.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { cn } from '#/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+			{...props}
+		/>
+	),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+	),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('font-semibold leading-none tracking-tight', className)}
+			{...props}
+		/>
+	),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+	),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+	),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+	),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/example-templates/react-router/prototype/app/components/ui/empty-state.tsx b/example-templates/react-router/prototype/app/components/ui/empty-state.tsx
new file mode 100644
index 0000000..2df6fea
--- /dev/null
+++ b/example-templates/react-router/prototype/app/components/ui/empty-state.tsx
@@ -0,0 +1 @@
+export { EmptyState } from '@repo/ui/empty-state';
diff --git a/example-templates/react-router/prototype/app/components/ui/table.tsx b/example-templates/react-router/prototype/app/components/ui/table.tsx
new file mode 100644
index 0000000..0fdee6a
--- /dev/null
+++ b/example-templates/react-router/prototype/app/components/ui/table.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+import { cn } from '#/lib/utils';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="relative w-full overflow-auto">
+			<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+		</div>
+	),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tfoot
+		ref={ref}
+		className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+		{...props}
+	/>
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn(
+			'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			className,
+		)}
+		{...props}
+	/>
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
diff --git a/template/prototype/app/demo/admin.tsx b/example-templates/react-router/prototype/app/demo/admin.tsx
similarity index 100%
rename from template/prototype/app/demo/admin.tsx
rename to example-templates/react-router/prototype/app/demo/admin.tsx
diff --git a/template/prototype/app/demo/api.ts b/example-templates/react-router/prototype/app/demo/api.ts
similarity index 100%
rename from template/prototype/app/demo/api.ts
rename to example-templates/react-router/prototype/app/demo/api.ts
diff --git a/template/prototype/app/demo/dashboard.tsx b/example-templates/react-router/prototype/app/demo/dashboard.tsx
similarity index 100%
rename from template/prototype/app/demo/dashboard.tsx
rename to example-templates/react-router/prototype/app/demo/dashboard.tsx
diff --git a/template/prototype/app/demo/employees.tsx b/example-templates/react-router/prototype/app/demo/employees.tsx
similarity index 100%
rename from template/prototype/app/demo/employees.tsx
rename to example-templates/react-router/prototype/app/demo/employees.tsx
diff --git a/example-templates/react-router/prototype/app/entry.client.tsx b/example-templates/react-router/prototype/app/entry.client.tsx
new file mode 100644
index 0000000..7d5c375
--- /dev/null
+++ b/example-templates/react-router/prototype/app/entry.client.tsx
@@ -0,0 +1,17 @@
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+import { startWorker } from './mocks/browser';
+
+startWorker()
+	.then(() =>
+		startTransition(() => {
+			hydrateRoot(
+				document,
+				<StrictMode>
+					<HydratedRouter />
+				</StrictMode>,
+			);
+		}),
+	)
+	.catch(console.error);
diff --git a/example-templates/react-router/prototype/app/hooks/useBreakpoint.ts b/example-templates/react-router/prototype/app/hooks/useBreakpoint.ts
new file mode 100644
index 0000000..7e46e6e
--- /dev/null
+++ b/example-templates/react-router/prototype/app/hooks/useBreakpoint.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+type Breakpoint = 'sm' | 'md' | 'lg';
+
+export function useBreakpoint(): Breakpoint {
+	const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');
+
+	useEffect(() => {
+		const smQuery = window.matchMedia('(max-width: 599px)');
+		const mdQuery = window.matchMedia('(min-width: 600px) and (max-width: 999px)');
+		const lgQuery = window.matchMedia('(min-width: 1000px)');
+
+		const updateBreakpoint = () => {
+			if (smQuery.matches) setBreakpoint('sm');
+			else if (mdQuery.matches) setBreakpoint('md');
+			else if (lgQuery.matches) setBreakpoint('lg');
+		};
+
+		// Initialer Aufruf
+		updateBreakpoint();
+
+		// Event Listener hinzufügen
+		smQuery.addEventListener('change', updateBreakpoint);
+		mdQuery.addEventListener('change', updateBreakpoint);
+		lgQuery.addEventListener('change', updateBreakpoint);
+
+		// Cleanup
+		return () => {
+			smQuery.removeEventListener('change', updateBreakpoint);
+			mdQuery.removeEventListener('change', updateBreakpoint);
+			lgQuery.removeEventListener('change', updateBreakpoint);
+		};
+	}, []);
+
+	return breakpoint;
+}
diff --git a/example-templates/react-router/prototype/app/lib/utils.ts b/example-templates/react-router/prototype/app/lib/utils.ts
new file mode 100644
index 0000000..95ccdcc
--- /dev/null
+++ b/example-templates/react-router/prototype/app/lib/utils.ts
@@ -0,0 +1,35 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+const prefersReducedMotion =
+	typeof window === 'undefined'
+		? true
+		: window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * View Transition API compatibility layer for non-browser environments.
+ */
+export const viewTransition =
+	!prefersReducedMotion && globalThis.document && 'startViewTransition' in document
+		? globalThis.document.startViewTransition.bind(globalThis.document)
+		: (cb: () => void) => cb();
+
+/**
+ * Konvertiert einen String in einen URL-sicheren Slug
+ * @param input - Der zu konvertierende String
+ * @returns Ein URL-sicherer Slug
+ */
+export const createSlug = (input: string): string => {
+	return input
+		.toLowerCase()
+		.replace(/ä/g, 'ae')
+		.replace(/ö/g, 'oe')
+		.replace(/ü/g, 'ue')
+		.replace(/ß/g, 'ss')
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+};
diff --git a/example-templates/react-router/prototype/app/mocks/browser.ts b/example-templates/react-router/prototype/app/mocks/browser.ts
new file mode 100644
index 0000000..2f3131d
--- /dev/null
+++ b/example-templates/react-router/prototype/app/mocks/browser.ts
@@ -0,0 +1,9 @@
+import type { RequestHandler } from 'msw';
+import { setupWorker } from 'msw/browser';
+
+export async function startWorker() {
+	const { handlers } = await import('#/mocks/handlers');
+	const worker = setupWorker(...(handlers as RequestHandler[]));
+
+	return worker.start();
+}
diff --git a/example-templates/react-router/prototype/app/mocks/handlers.ts b/example-templates/react-router/prototype/app/mocks/handlers.ts
new file mode 100644
index 0000000..cdd923f
--- /dev/null
+++ b/example-templates/react-router/prototype/app/mocks/handlers.ts
@@ -0,0 +1,9 @@
+// Import medium or full dataset. (build full dateset before import)
+import { handlers as mockHandlers } from '@repo/msw/medium';
+import { http, passthrough } from 'msw';
+
+export const handlers = [
+	...mockHandlers,
+	// Pass-Through Handler für alles andere
+	http.get('*', () => passthrough()),
+];
diff --git a/example-templates/react-router/prototype/app/root.tsx b/example-templates/react-router/prototype/app/root.tsx
new file mode 100644
index 0000000..1d612c2
--- /dev/null
+++ b/example-templates/react-router/prototype/app/root.tsx
@@ -0,0 +1,288 @@
+import { ApiProvider } from '#/components/context-providers/apiContext';
+import { AuthProvider, usePermissions } from '#/components/context-providers/permissionContext';
+import { Avatar, AvatarFallback, AvatarImage } from '#/components/ui/avatar';
+import { Button } from '#/components/ui/button';
+import { DemoApi } from '#/demo/api';
+import { useBreakpoint } from '#/hooks/useBreakpoint';
+import { cn } from '#/lib/utils';
+import styles from '#/styles/tailwind.css?url';
+import type { MeResponse } from '@repo/api/demo/types';
+import ky from 'ky';
+import {
+	HomeIcon,
+	LayoutDashboard,
+	LogOutIcon,
+	PanelLeftClose,
+	PanelLeftOpen,
+	Shield,
+	User,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import type { ClientActionFunctionArgs } from 'react-router';
+import {
+	Form,
+	Links,
+	Meta,
+	NavLink,
+	Outlet,
+	redirectDocument,
+	Scripts,
+	ScrollRestoration,
+	useLoaderData,
+} from 'react-router';
+
+/**
+ * Fetch the user data from the mock backend.
+ */
+export async function clientLoader(): Promise<
+	| {
+			me: MeResponse;
+			authenticated: true;
+	  }
+	| { authenticated: false; me?: never; groups?: never; error?: Error }
+> {
+	const api = DemoApi(ky);
+	let me: MeResponse;
+	if (typeof document !== 'undefined' && document.cookie?.includes('authToken')) {
+		try {
+			me = await api.me();
+			return { me, authenticated: true };
+		} catch (error) {
+			console.error('Error fetching initial data', error);
+			return { authenticated: false, error: error as Error };
+		}
+	}
+
+	return { authenticated: false };
+}
+
+/**
+ * Log the user in or out.
+ * @param request
+ */
+export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
+	const formData = await request.formData();
+	const intent = formData.get('intent');
+	if (intent === 'login') {
+		try {
+			await ky.post('/auth/login', {
+				body: formData,
+			});
+		} catch (error) {
+			console.error('Error logging in', error);
+			return null;
+		}
+	} else if (intent === 'logout' && typeof document !== 'undefined') {
+		const response = await ky.post('/auth/logout');
+		document.cookie = '';
+		console.log({ response });
+	}
+	throw redirectDocument('./');
+};
+
+export function links() {
+	return [{ rel: 'stylesheet', href: styles }];
+}
+
+export function Document({ children }: { children?: React.ReactNode }) {
+	return (
+		<html lang="de">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="robots" content="noindex nofollow" />
+				<Meta />
+				<Links />
+			</head>
+			<body className="font-sans overflow-hidden max-h-screen">
+				{children}
+
+				<Scripts />
+			</body>
+		</html>
+	);
+}
+
+function Header({ children }: { children?: React.ReactNode }) {
+	return (
+		<header className="col-span-2 grid grid-cols-[1fr_auto] items-center bg-popover px-10 pt-4 pb-3 shadow-sm z-10">
+			<div className="flex items-center">
+				<div className="text-3xl font-bold">PLANNING STACK TEMPLATE Prototype</div>
+			</div>
+			{children}
+		</header>
+	);
+}
+
+function MainNav({ showLabels }: { showLabels: boolean }) {
+	const permissions = usePermissions();
+	return (
+		<nav className="mt-8 flex-grow overflow-y-auto">
+			<NavItem href="/" icon={<HomeIcon />} label="Home" isOpen={showLabels} />
+			<NavItem href="/dashboard" icon={<LayoutDashboard />} label="Dashboard" isOpen={showLabels} />
+			<NavItem href="/employees" icon={<User />} label="Personal" isOpen={showLabels} />
+			{permissions.includes('admin') && (
+				<NavItem href="/admin" icon={<Shield />} label="Admin" isOpen={showLabels} />
+			)}
+		</nav>
+	);
+}
+
+const apiContext = {
+	demo: DemoApi(ky),
+};
+
+export default function App() {
+	const breakpoint = useBreakpoint();
+	const loaderData = useLoaderData<typeof clientLoader>();
+	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+	useEffect(() => {
+		if (!isSidebarOpen && breakpoint === 'lg') {
+			// TODO: Temporär deaktiviert für User-Testing
+			// setIsSidebarOpen(true);
+		} else if (isSidebarOpen && breakpoint === 'sm') {
+			setIsSidebarOpen(false);
+		}
+		// only act on a change of breakpoint.
+	}, [breakpoint]);
+
+	if (!loaderData) return <Document />;
+
+	// Wenn der Benutzer nicht eingeloggt ist, wird er aufgefordert sich einzuloggen.
+	if (loaderData?.authenticated === false) {
+		return (
+			<Document>
+				<Form action="./" method="POST">
+					<input type="hidden" name="intent" value="login" readOnly />
+					<div className="flex  gap-4 mx-auto p-10">
+						<Button type="submit" variant="outline" name="username" value="admin">
+							Login as administrator
+						</Button>
+						<Button type="submit" variant="outline" name="username" value="manager">
+							Login as manager
+						</Button>
+						<Button type="submit" variant="outline" name="username" value="employee">
+							Login as employee
+						</Button>
+					</div>
+					{loaderData.error && <div className="text-red-500">{loaderData.error.message}</div>}
+				</Form>
+			</Document>
+		);
+	}
+
+	const { me } = loaderData;
+	const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
+	return (
+		<Document>
+			<AuthProvider>
+				<ApiProvider value={apiContext}>
+					<div className="grid grid-rows-[auto_1fr] grid-cols-[auto_1fr] h-screen bg-background">
+						<Header>
+							<div className="flex items-center justify-end px-4 py-3 gap-2">
+								<Avatar className="h-6 w-6">
+									<AvatarImage src={me.portrait} alt="" />
+									<AvatarFallback>{me.firstName.charAt(0)}</AvatarFallback>
+								</Avatar>
+								<div className="text-sm">
+									{me.firstName} {me.lastName}
+								</div>
+								<Form action="./" method="POST">
+									<input type="hidden" name="intent" value="logout" readOnly />
+									<Button type="submit" variant="ghost" size="icon">
+										<LogOutIcon className="h-5 w-5" />
+									</Button>
+								</Form>
+							</div>
+						</Header>
+
+						<aside
+							data-open={isSidebarOpen}
+							className="bg-popover text-popover-foreground transition-all duration-300 flex flex-col w-64 data-[open=false]:w-20 data-[open=false]:items-center row-start-2 col-start-1 h-full"
+						>
+							<MainNav showLabels={isSidebarOpen} />
+							<div className="text-xs text-muted p-4">
+								Version {import.meta.env.VITE_VERSION}, Build {import.meta.env.VITE_BUILD_NUMBER},{' '}
+								{breakpoint}
+							</div>
+							<div className="p-4 flex justify-center">
+								<Button
+									variant="ghost"
+									size="icon"
+									className="text-muted-foreground hover:text-secondary-foreground"
+									onClick={toggleSidebar}
+									title={isSidebarOpen ? 'Sidebar schliessen' : 'Sidebar öffnen'}
+								>
+									{isSidebarOpen ? (
+										<PanelLeftClose className="h-6 w-6" />
+									) : (
+										<PanelLeftOpen className="h-6 w-6" />
+									)}
+								</Button>
+							</div>
+						</aside>
+						<main className="row-start-2 col-start-2 overflow-x-hidden overflow-y-auto p-6 max-h-full relative scroll-smooth">
+							<Outlet />
+							<ScrollRestoration />
+						</main>
+					</div>
+				</ApiProvider>
+			</AuthProvider>
+		</Document>
+	);
+}
+
+function NavItem({
+	href,
+	icon,
+	label,
+	isOpen,
+}: {
+	href: string;
+	icon: React.ReactNode;
+	label: string;
+	isOpen: boolean;
+}) {
+	return (
+		<NavLink
+			to={href}
+			className={({ isActive }) =>
+				cn('flex flex-none items-center px-4 py-2 hover:bg-accent', {
+					'justify-start': isOpen,
+					'justify-center w-12 px-0': !isOpen,
+					'rounded-sm': !isOpen,
+					'bg-accent': isActive,
+					'font-bold': isActive,
+				})
+			}
+		>
+			<span title={label}>{icon}</span>
+			{
+				<span className={cn('inline-block overflow-hidden', { 'w-0': !isOpen, 'ml-4': isOpen })}>
+					{label}
+				</span>
+			}
+		</NavLink>
+	);
+}
+
+export function HydrateFallback() {
+	return (
+		<Document>
+			<div className="grid grid-rows-[auto_1fr] grid-cols-[auto_1fr] h-screen bg-background">
+				<Header>
+					<div className="h-[3.75rem]" />
+				</Header>
+				{/* TODO: md Klassen hinzufügen*/}
+				<aside className="bg-popover text-popover-foreground flex flex-col w-20 items-center row-start-2 col-start-1 h-full"></aside>
+				<main className="row-start-2 col-start-2 overflow-x-hidden overflow-y-auto p-6 max-h-full relative scroll-smooth">
+					<div className="font-sans p-4">
+						<h1 className="text-3xl mb-3">Lädt...</h1>
+					</div>
+				</main>
+			</div>
+		</Document>
+	);
+}
diff --git a/example-templates/react-router/prototype/app/routes.ts b/example-templates/react-router/prototype/app/routes.ts
new file mode 100644
index 0000000..6c8e094
--- /dev/null
+++ b/example-templates/react-router/prototype/app/routes.ts
@@ -0,0 +1,11 @@
+// app/routes.ts
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+const routes = [
+	route('dashboard', './demo/dashboard.tsx'),
+	route('employees', './demo/employees.tsx'),
+	route('admin', './demo/admin.tsx'),
+	index('./routes/_index.tsx'),
+] satisfies RouteConfig;
+
+export default routes;
diff --git a/example-templates/react-router/prototype/app/routes/_index.tsx b/example-templates/react-router/prototype/app/routes/_index.tsx
new file mode 100644
index 0000000..259a1e7
--- /dev/null
+++ b/example-templates/react-router/prototype/app/routes/_index.tsx
@@ -0,0 +1,16 @@
+import type { MetaFunction } from 'react-router';
+
+export const meta: MetaFunction = () => {
+	return [{ title: 'PLANNING STACK TEMPLATE Prototype' }];
+};
+
+export default function Index() {
+	return (
+		<div className="font-sans p-4">
+			<h1 className="text-3xl mb-3">PLANNING STACK TEMPLATE Prototype</h1>
+			<p>Dies ist ein klickbarer Prototyp für die PLANNING STACK TEMPLATE-Anwendung.</p>
+			<p>Es dient zum Austesten von Anwendungsfällen und Prozessen.</p>
+			<p>Alle Daten sind synthetisch und es gibt keinen Zugriff auf ein Backend.</p>
+		</div>
+	);
+}
diff --git a/example-templates/react-router/prototype/app/styles/tailwind.css b/example-templates/react-router/prototype/app/styles/tailwind.css
new file mode 100644
index 0000000..f2d7cc2
--- /dev/null
+++ b/example-templates/react-router/prototype/app/styles/tailwind.css
@@ -0,0 +1,70 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	.lucide {
+		display: inline-flex;
+	}
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 0% 3.9%;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+		--ring: 0 0% 83.1%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
diff --git a/example-templates/react-router/prototype/app/vite-env.d.ts b/example-templates/react-router/prototype/app/vite-env.d.ts
new file mode 100644
index 0000000..e528a04
--- /dev/null
+++ b/example-templates/react-router/prototype/app/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_BUILD_NUMBER: string;
+	readonly VITE_VERSION: string;
+	// more env variables...
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}
diff --git a/example-templates/react-router/prototype/components.json b/example-templates/react-router/prototype/components.json
new file mode 100644
index 0000000..b363fb4
--- /dev/null
+++ b/example-templates/react-router/prototype/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "#/components",
+    "utils": "#/lib/utils",
+    "ui": "#/components/ui",
+    "lib": "#/lib",
+    "hooks": "#/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/example-templates/react-router/prototype/eslint.config.mjs b/example-templates/react-router/prototype/eslint.config.mjs
new file mode 100644
index 0000000..c95e1ec
--- /dev/null
+++ b/example-templates/react-router/prototype/eslint.config.mjs
@@ -0,0 +1,38 @@
+import baseConfig from '@repo/eslint-config/react';
+import reactCompiler from 'eslint-plugin-react-compiler';
+
+export default [
+	...baseConfig,
+	{
+		files: ['./app/**/*.tsx'],
+		plugins: {
+			'react-compiler': reactCompiler,
+		},
+		rules: {
+			'react-compiler/react-compiler': 'error',
+		},
+	},
+	{
+		languageOptions: {
+			parserOptions: {
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+		// disable some rules for the prototype
+		rules: {
+			'@typescript-eslint/no-unsafe-assignment': 'off',
+			'@typescript-eslint/no-unsafe-call': 'off',
+			'@typescript-eslint/no-unsafe-member-access': 'off',
+			'@typescript-eslint/prefer-nullish-coalescing': 'off',
+			'@typescript-eslint/no-base-to-string': 'off',
+			'react/no-unknown-property': 'off',
+		},
+	},
+	{
+		// Rules for shadcn/ui components
+		files: ['**/components/ui/*.tsx'],
+		rules: {
+			'react/prop-types': 'off',
+		},
+	},
+];
diff --git a/example-templates/react-router/prototype/package.json b/example-templates/react-router/prototype/package.json
new file mode 100644
index 0000000..68a6eed
--- /dev/null
+++ b/example-templates/react-router/prototype/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@repo/prototype",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "clean": "rimraf build && rimraf .turbo",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint app/",
+    "preview": "vite preview",
+    "typecheck": "react-router typegen && tsc",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@react-router/node": "^7.10.1",
+    "@repo/api": "*",
+    "@repo/msw": "*",
+    "@repo/ui": "*",
+    "@tinyhttp/cookie": "^2.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "isbot": "^5",
+    "ky": "^1.14.1",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.472.0",
+    "react": "^19.0.2",
+    "react-dom": "^19.0.2",
+    "react-router": "^7.10.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "use-container-queries": "^1.0.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.10.1",
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.7.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.22",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+    "msw": "2.12.4",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "tailwindcss": "^3.4.13"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/example-templates/react-router/prototype/postcss.config.js b/example-templates/react-router/prototype/postcss.config.js
new file mode 100644
index 0000000..7b75c83
--- /dev/null
+++ b/example-templates/react-router/prototype/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/example-templates/react-router/prototype/public/favicon.ico b/example-templates/react-router/prototype/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8830cf6821b354114848e6354889b8ecf6d2bc61
GIT binary patch
literal 16958
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
EKbET!0{{R3

literal 0
HcmV?d00001

diff --git a/example-templates/react-router/prototype/public/mockServiceWorker.js b/example-templates/react-router/prototype/public/mockServiceWorker.js
new file mode 100644
index 0000000..558540f
--- /dev/null
+++ b/example-templates/react-router/prototype/public/mockServiceWorker.js
@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.12.4'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}
diff --git a/example-templates/react-router/prototype/public/robots.txt b/example-templates/react-router/prototype/public/robots.txt
new file mode 100644
index 0000000..1f53798
--- /dev/null
+++ b/example-templates/react-router/prototype/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/example-templates/react-router/prototype/react-router.config.ts b/example-templates/react-router/prototype/react-router.config.ts
new file mode 100644
index 0000000..3591e39
--- /dev/null
+++ b/example-templates/react-router/prototype/react-router.config.ts
@@ -0,0 +1,6 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+	prerender: true,
+	ssr: false,
+} satisfies Config;
diff --git a/example-templates/react-router/prototype/tailwind.config.js b/example-templates/react-router/prototype/tailwind.config.js
new file mode 100644
index 0000000..21e3faf
--- /dev/null
+++ b/example-templates/react-router/prototype/tailwind.config.js
@@ -0,0 +1,10 @@
+import baseConfig from '@repo/ui/tailwind.config';
+
+export default {
+    ...baseConfig,
+	darkMode: ['selector'],
+	content: {
+		relative: true,
+		files: ['./app/**/*.tsx', '../ui/src/**/*.tsx'],
+	},    
+};
diff --git a/example-templates/react-router/prototype/tsconfig.json b/example-templates/react-router/prototype/tsconfig.json
new file mode 100644
index 0000000..2576016
--- /dev/null
+++ b/example-templates/react-router/prototype/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@repo/typescript-config/react-app.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["@react-router/node", "vite/client"],
+    "paths": {
+      "#/*": ["./app/*"]
+    },
+    "outDir": "build",
+    "rootDirs": ["./", "./.react-router/types"]
+  },
+  "include": [
+    ".react-router/types/**/*",
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "react-router.config.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/example-templates/react-router/prototype/vite.config.ts b/example-templates/react-router/prototype/vite.config.ts
new file mode 100644
index 0000000..d89a387
--- /dev/null
+++ b/example-templates/react-router/prototype/vite.config.ts
@@ -0,0 +1,26 @@
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+	plugins: [reactRouter(), tsconfigPaths()],
+	resolve: {
+		preserveSymlinks: false,
+	},
+	optimizeDeps: {
+		exclude:
+			process.env.NODE_ENV === 'development'
+				? [
+						'@repo/msw/medium',
+						'@repo/msw/handlers',
+						'@repo/api/stammdaten/enums',
+						'@repo/ui',
+					]
+				: [],
+	},
+	server: {
+		watch: {
+			followSymlinks: true, // Vite beobachtet auch verlinkte Dependencies
+		},
+	},
+});
diff --git a/example-templates/react-router/turbo.json b/example-templates/react-router/turbo.json
new file mode 100644
index 0000000..835bd45
--- /dev/null
+++ b/example-templates/react-router/turbo.json
@@ -0,0 +1,59 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**", "build/client/**"],
+      "env": ["VITE_BUILD_NUMBER", "VITE_VERSION"]
+    },
+    "@repo/mocks#generate:medium": {
+      "dependsOn": ["^@repo/mocks#build"],
+      "outputs": ["data-mocks/mocks.medium.json", "data-mocks/hints.medium.json"]
+    },
+    "@repo/mocks#generate:small": {
+      "dependsOn": ["^@repo/mocks#build"],
+      "outputs": ["data-mocks/mocks.small.json", "data-mocks/hints.small.json"]
+    },
+    "build:data": {
+      "dependsOn": ["^@repo/mocks#generate:small", "^@repo/mocks#generate:medium"]
+    },
+    "lint": {},
+    "test": {},
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "docs": {
+      "inputs": ["$TURBO_DEFAULT$", "antora-playbook.yml"],
+      "outputs": ["build/**"]
+    },
+    "clean": {
+      "cache": false,
+      "dependsOn": []
+    },
+    "typecheck": {
+      "outputs": ["dist/**"],
+      "dependsOn": ["^typecheck"]
+    },
+    "@repo/prototype#typecheck": {
+      "outputs": [".react-router/**"],
+      "dependsOn": ["^typecheck"]
+    },
+    "@repo/prototype#build": {
+      "inputs": ["public/**", "react-router.config.ts", "vite.config.ts", "taiwind.config.js"],
+      "dependsOn": ["^@repo/msw#build"],
+      "outputs": ["build/client/**"],
+      "env": ["VITE_BUILD_NUMBER", "VITE_VERSION"]
+    },
+    "@repo/frontend#typecheck": {
+      "outputs": [".react-router/**"],
+      "dependsOn": ["^typecheck"]
+    },
+    "@repo/ui#typecheck": {
+      "outputs": [],
+      "dependsOn": ["^typecheck"]
+    }
+  }
+}
diff --git a/example-templates/react-router/ui/README.md b/example-templates/react-router/ui/README.md
new file mode 100644
index 0000000..c07fb5a
--- /dev/null
+++ b/example-templates/react-router/ui/README.md
@@ -0,0 +1,6 @@
+# PLANNING STACK TEMPLATE UI
+
+Dieses Paket enthält die UI-Komponenten für das PLANNING STACK TEMPLATE. Das UI basiert auf
+[Tailwind UI](https://tailwindui.com/) und [Shadcn](https://ui.shadcn.com/).
+
+Die einzelnen Komponenten werden als Node-Pfad exportiert (im package.json).
diff --git a/example-templates/react-router/ui/eslint.config.mjs b/example-templates/react-router/ui/eslint.config.mjs
new file mode 100644
index 0000000..82a7c74
--- /dev/null
+++ b/example-templates/react-router/ui/eslint.config.mjs
@@ -0,0 +1,21 @@
+import baseConfig from '@repo/eslint-config/react';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+
+export default [
+	...baseConfig,
+	jsxA11yPlugin.flatConfigs.recommended,
+	{
+		languageOptions: {
+			parserOptions: {
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+	{
+		// Rules for shadcn/ui components
+		files: ['**/ui/*.tsx'],
+		rules: {
+			'react/prop-types': 'off',
+		},
+	},
+];
diff --git a/example-templates/react-router/ui/package.json b/example-templates/react-router/ui/package.json
new file mode 100644
index 0000000..0145510
--- /dev/null
+++ b/example-templates/react-router/ui/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@repo/ui",
+  "version": "0.0.0",
+  "sideEffects": false,
+  "private": true,
+  "exports": {
+    "./scroll-area": "./src/ui/scroll-area.tsx",
+    "./tailwind.config": "./tailwind.config.js",
+    "./empty-state": "./src/ui/empty-state.tsx"
+  },
+  "imports": {
+    "#utils": "./src/lib/utils.ts",
+    "#ui/*": "./src/ui/*"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "lint": "eslint src --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@turbo/gen": "^2.6.3",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^22.7.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "react": "^19.0.2",
+    "react-dom": "^19.0.2",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.472.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
+    "use-container-queries": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
+  "type": "module"
+}
\ No newline at end of file
diff --git a/example-templates/react-router/ui/src/lib/utils.ts b/example-templates/react-router/ui/src/lib/utils.ts
new file mode 100644
index 0000000..9fc54a4
--- /dev/null
+++ b/example-templates/react-router/ui/src/lib/utils.ts
@@ -0,0 +1,20 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** Class-Name-Utility that supports TailwindCSS merge */
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}
+
+const prefersReducedMotion =
+	typeof window === 'undefined'
+		? true
+		: window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * View Transition API compatibility layer for non-browser environments.
+ */
+export const viewTransition =
+	!prefersReducedMotion && globalThis.document && 'startViewTransition' in document
+		? globalThis.document.startViewTransition.bind(globalThis.document)
+		: (cb: () => void) => cb();
diff --git a/example-templates/react-router/ui/src/ui/empty-state.tsx b/example-templates/react-router/ui/src/ui/empty-state.tsx
new file mode 100644
index 0000000..76e0337
--- /dev/null
+++ b/example-templates/react-router/ui/src/ui/empty-state.tsx
@@ -0,0 +1,19 @@
+export function EmptyState({
+	children,
+	icon,
+}: {
+	children?: React.ReactNode;
+	icon?: React.ReactNode;
+}) {
+	return (
+		<div className="p-6 flex flex-col justify-center items-center gap-4">
+			{icon && (
+				<div className="flex-none *:size-[50%] size-[114px] bg-card rounded-full flex items-center justify-center">
+					{icon}
+				</div>
+			)}
+			<div className="text-muted-foreground flex-none">{children}</div>
+			<div className="flex-1"></div>
+		</div>
+	);
+}
diff --git a/example-templates/react-router/ui/src/ui/scroll-area.tsx b/example-templates/react-router/ui/src/ui/scroll-area.tsx
new file mode 100644
index 0000000..2ff7011
--- /dev/null
+++ b/example-templates/react-router/ui/src/ui/scroll-area.tsx
@@ -0,0 +1,44 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+import { cn } from '#utils';
+
+const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn('relative overflow-hidden', className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			'flex touch-none select-none transition-colors',
+			orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+			orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/example-templates/react-router/ui/tailwind.config.js b/example-templates/react-router/ui/tailwind.config.js
new file mode 100644
index 0000000..a5dd77b
--- /dev/null
+++ b/example-templates/react-router/ui/tailwind.config.js
@@ -0,0 +1,60 @@
+import containerQueries from '@tailwindcss/container-queries'; // Obsolete in Tailwind 4
+import typography from '@tailwindcss/typography';
+import animate from 'tailwindcss-animate';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	darkMode: 'selector',
+	theme: {
+		extend: {
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)',
+			},
+			colors: {
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))',
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))',
+				},
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))',
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))',
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))',
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))',
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))',
+				},
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				chart: {
+					1: 'hsl(var(--chart-1))',
+					2: 'hsl(var(--chart-2))',
+					3: 'hsl(var(--chart-3))',
+					4: 'hsl(var(--chart-4))',
+					5: 'hsl(var(--chart-5))',
+				},
+			},
+		},
+	},
+	plugins: [typography, animate, containerQueries],
+};
diff --git a/example-templates/react-router/ui/tsconfig.json b/example-templates/react-router/ui/tsconfig.json
new file mode 100644
index 0000000..dcc232f
--- /dev/null
+++ b/example-templates/react-router/ui/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/example-templates/react-router/ui/turbo/generators/config.ts b/example-templates/react-router/ui/turbo/generators/config.ts
new file mode 100644
index 0000000..b5375c2
--- /dev/null
+++ b/example-templates/react-router/ui/turbo/generators/config.ts
@@ -0,0 +1,30 @@
+import type { PlopTypes } from '@turbo/gen';
+
+// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+export default function generator(plop: PlopTypes.NodePlopAPI): void {
+	// A simple generator to add a new React component to the internal UI library
+	plop.setGenerator('react-component', {
+		description: 'Adds a new react component',
+		prompts: [
+			{
+				type: 'input',
+				name: 'name',
+				message: 'What is the name of the component?',
+			},
+		],
+		actions: [
+			{
+				type: 'add',
+				path: 'src/{{kebabCase name}}.tsx',
+				templateFile: 'templates/component.hbs',
+			},
+			{
+				type: 'append',
+				path: 'package.json',
+				pattern: /"exports": {(?<insertion>)/g,
+				template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+			},
+		],
+	});
+}
diff --git a/example-templates/react-router/ui/turbo/generators/templates/component.hbs b/example-templates/react-router/ui/turbo/generators/templates/component.hbs
new file mode 100644
index 0000000..d968b9e
--- /dev/null
+++ b/example-templates/react-router/ui/turbo/generators/templates/component.hbs
@@ -0,0 +1,8 @@
+export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h1>{{ pascalCase name }} Component</h1>
+      {children}
+    </div>
+  );
+};
diff --git a/package.json b/package.json
index 55860e0..4ac427f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "type": "module",
   "files": [
     "template",
+    "example-templates",
     "create"
   ],
   "engines": {
@@ -32,12 +33,12 @@
     "create-tinker-stack"
   ],
   "scripts": {
-    "prerelease": "find template -name package-lock.json -delete && find template -name tsconfig.tsbuildinfo -delete && find template -name .turbo -type d -prune -exec rm -rf {} +",
+    "prerelease": "find template example-templates -name package-lock.json -delete && find template example-templates -name tsconfig.tsbuildinfo -delete && find template example-templates -name .turbo -type d -prune -exec rm -rf {} +",
     "release": "commit-and-tag-version",
     "test": "npm run test:e2e",
     "test:e2e": "vitest run --no-file-parallelism",
     "upgrade:template": "npx npm-check-updates --interactive --format group -c 2 -w --cwd template",
-    "postupgrade:template": "find template -name package-lock.json -delete && find template -name node_modules -type d -prune -exec rm -rf {} +",
+    "postupgrade:template": "find template example-templates -name package-lock.json -delete && find template example-templates -name node_modules -type d -prune -exec rm -rf {} +",
     "upgrade:root": "npx npm-check-updates --interactive --format group -c 2"
   },
   "dependencies": {
diff --git a/template/.prettierignore b/template/.prettierignore
index c7e2c6b..b40141c 100644
--- a/template/.prettierignore
+++ b/template/.prettierignore
@@ -1,6 +1,7 @@
 /node_modules
+/examples
 package-lock.json
 .gitignore
 .cursorrules.md
 **/public
-.htaccess
\ No newline at end of file
+.htaccess
diff --git a/template/README.md b/template/README.md
index 0b93ae2..35c9cfc 100644
--- a/template/README.md
+++ b/template/README.md
@@ -1,76 +1,45 @@
 # PLANNING STACK TEMPLATE Frontend Monorepo
 
-Dieses Monorepo enthält alle Module und Apps für das PLANNING STACK TEMPLATE Frontend. Inklusive der
-Testdaten und des Prototyps.
+This monorepo is the default Tinker Stack starter for PLANNING STACK TEMPLATE.
 
-## Was ist enthalten?
+It is intentionally lightweight:
 
-Dieses Monorepo enthält die folgenden Pakete/Apps:
-
-### Apps und Pakete
-
-- `@repo/prototype`: ein Prototyp für die PLANNING STACK TEMPLATE Anwendung.
-- `@repo/api`: ein Paket, das die Domain-Typen und -Enums bereitstellt.
-- `@repo/docs`: Dokumentationen für die PLANNING STACK TEMPLATE Anwendung im Antora-Format.
-- `@repo/mocks`: ein Paket, das synthetische Daten für die Anwendungen bereitstellt.
-- `@repo/mock-api`: ein Paket, das eine Mock-API über Service-Worker bereitstellt.
-- `@repo/ui`: eine Basis-React-Komponentenbibliothek, die von den Anwendungen
-  `PLANNING STACK TEMPLATE` und `prototype` gemeinsam genutzt wird
-- `@repo/eslint-config`: `eslint`-Konfigurationen (enthält `eslint-config-next` und
-  `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s, die im gesamten Monorepo verwendet werden
-
-Jedes Paket/jede App ist in [TypeScript](https://www.typescriptlang.org/) geschrieben.
-
-## Dokumentation
-
-Die Entwickler-Dokumentation befindet sich im Ordner `docs`. Sie wird automatisch mittels
-Gitlab-Pages
-[hier](https://frontend-6dd0b0.pages.ti8m.ch/planning-stack-template-frontend/HEAD/index.html)
-veröffentlicht.
-
-Die Projekt-Dokumentation ist in [AsciiDoc](https://asciidoctor.org/) verfasst und wird mittels
-[Antora](https://antora.org/) generiert.
+- `@repo/prototype`: a minimal React Router prototype shell
+- `@repo/api`: shared domain types and enums
+- `@repo/docs`: Antora-based project documentation
+- `@repo/mocks`: starter-safe mock-data package
+- `@repo/msw`: starter-safe MSW package
+- `@repo/ui`: shared UI primitives
 
 ## Build
 
-Die Builds sind alle von [Turborepo](https://turbo.build) gesteuert und sollten aus dem
-Root-Verzeichnis heraus aufgerufen werden. werden.
-
-Um alle Apps und Pakete zu bauen, führe den folgenden Befehl aus:
+Run commands from the repository root:
 
-```
+```bash
 npm run build
+npm run typecheck
+npm run test
 ```
 
-Es ist auch möglich, nur ein bestimmtes Paket oder eine bestimmte App zu bauen:
-
-```
-npm run build:data
-
-npm run build:msw
+`npm run build:data` is available for the `@repo/mocks` package and succeeds even before you add
+real generators.
 
-npm run build:prototype
-```
+## Development
 
-### Entwicklung
+Start the prototype and package watchers:
 
-Bevor der Dev-Server zum ersten Mal gestartet werden kann, müssen die Mock-Daten gebaut werden.
-
-```
-npm run build:data
+```bash
+npm run dev
 ```
 
-Aktuell ist standardmässig der Prototyp aktiviert. Um die Entwicklung zu starten, führe den
-folgenden Befehl aus. Dieser startet einen lokalen Server und watcher für die Abhängigen Pakete.
+## Examples
 
-```
-npm run dev
-```
+Optional examples, when generated, live under `examples/<name>/`.
 
-### Publish
+They are independent from this monorepo:
 
-Der Prototyp sollte automatisch bei einem Push auf die `main`-Branch auf einen Preview-Server
-deployed werden.
+- they are not listed in the root workspaces
+- they are not built by default Turbo commands
+- they can be installed, run, or deleted separately
 
-Die Dokumentation wird bei einem Push auf die `main`-Branch mittels Gitlab-Pages deployed.
+See the README inside each example directory for its own setup and copyable patterns.
diff --git a/template/api/package.json b/template/api/package.json
index c297c84..8c3f6fe 100644
--- a/template/api/package.json
+++ b/template/api/package.json
@@ -27,9 +27,6 @@
     "./commons/enums": {
       "types": "./dist/commons/enums.d.ts",
       "import": "./dist/commons/enums.js"
-    },
-    "./demo/types": {
-      "types": "./dist/demo/types.d.ts"
     }
   },
   "lint-staged": {
@@ -40,4 +37,4 @@
       "prettier --write"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/template/docs/modules/ROOT/pages/architecture.adoc b/template/docs/modules/ROOT/pages/architecture.adoc
index a940995..230498d 100644
--- a/template/docs/modules/ROOT/pages/architecture.adoc
+++ b/template/docs/modules/ROOT/pages/architecture.adoc
@@ -5,52 +5,40 @@
 
 == Überblick
 
-Das PLANNING STACK TEMPLATE Frontend ist als Monorepo mit mehreren Packages aufgebaut. Der Fokus liegt auf:
+Das PLANNING STACK TEMPLATE Frontend ist als Monorepo aufgebaut. Der Fokus liegt auf:
 
-* Schnelle Iteration durch Prototyping
-* Wiederverwendbare Komponenten
+* schneller Iteration
+* klar getrennten Paketen
 * Typsicherheit durch TypeScript
-* Realistische Testdaten
+* optionalen, unabhängigen Referenzbeispielen
 
 == Architekturprinzipien
 
-=== Domain-Driven Design
-
-
+=== Starter zuerst
 
+Das Basisprojekt soll sofort installierbar und buildbar sein, ohne eine vorgefertigte Demo zu
+erzwingen.
 
 === Prototypen-getriebene Entwicklung
 
-Der Entwicklungsprozess folgt einem iterativen Ansatz:
-
-1. Features werden zuerst im Prototyp implementiert
-2. Designer-, Stakeholder- und Benutzer-Feedback wird eingeholt
-3. Validierte Features werden in die produktive Anwendung übernommen
+Der empfohlene Ablauf bleibt:
 
-Dies ermöglicht:
+1. Feature zuerst im Prototyp modellieren
+2. Feedback einholen
+3. Validierte Muster in die produktive Anwendung übernehmen
 
-* Reduzierung von Entwicklungsrisiken
-* Validierung von UX-Konzepten
-* Schnelles Feedback von Benutzern
+=== Unabhängige Beispiele
 
-=== Typsicherheit
+Optionale Beispiele liegen ausserhalb der Root-Workspaces in `examples/<name>/`.
 
-* Strikte TypeScript Konfiguration
-* Zentrale Definition von Domain Types
-* Shared Types zwischen Packages
+Das bedeutet:
 
-=== Komponenten-Bibliothek
-
-Die UI-Komponenten sind in einem separaten Package (`@repo/ui`) organisiert:
-
-* Basis auf shadcn/ui, Tailwind UI und Tailwind
-* Wiederverwendbar zwischen Prototyp und Produktion
-* Einheitliches Design-System basierend auf Tailwind UI und dem Figma Design System
+* keine automatische Teilnahme an `npm run build`
+* keine Kopplung an die Root-Turbo-Pipeline
+* sichere Löschbarkeit ohne Folgeschäden im Hauptprojekt
 
 == Technische Architektur
 
-Siehe auch xref:monorepo.adoc#aufbau[Monorepo].
-
 === Frontend Stack
 
 [cols="1,2,2"]
@@ -62,84 +50,33 @@ Siehe auch xref:monorepo.adoc#aufbau[Monorepo].
 |Etabliert, grosses Ökosystem
 
 |React Router
-|Full-Stack Framework
-|Gute DX, Server Components
+|Starter-Prototyp
+|Schnelles Routing und gute DX
 
 |Tailwind
 |CSS Framework
-|Utility-First, Wartbar
-
-|shadcn/ui
-|UI-Komponenten
-|Zugänglich, Anpassbar
+|Schnelle, konsistente UI-Entwicklung
 
 |TypeScript
 |Programmiersprache
-|Typsicherheit, DX
+|Typsicherheit und Refactoring-Sicherheit
 |===
 
-=== Mock Backend
+=== Mocking
 
 [plantuml,msw,svg]
 ----
 @startuml
 actor Browser
-participant "React Router App" as App
+participant "Prototype" as App
 participant "MSW" as MSW
-database "Mock Data" as Data
 
 Browser -> App: Request
-App -> MSW: API Call
-MSW -> Data: Load Data
-Data --> MSW: Data
-MSW --> App: Response
+App -> MSW: Optional API Call
+MSW --> App: Mocked or passthrough response
 App --> Browser: Render
 @enduml
 ----
 
-* MSW (Mock Service Worker) für API-Simulation
-* Realistische HTTP-Requests
-* Einfacher Wechsel zu echtem Backend
-
-== Entwicklungsprozess
-
-=== Feature Entwicklung
-
-1. Feature-Anforderung
-2. Prototyp Implementation
-3. User Testing
-4. Feedback Integration
-5. Production Implementation
-
-=== Code Organisation
-
-* Feature-basierte Ordnerstruktur
-* Shared Logic in Utils
-* Typed API Boundaries
-
-== Deployment
-
-=== Prototype
-
-* Automatisches Deployment bei Push auf `main` 
-** URL: 
-** Aktuelle Entwicklungsversion
-* Deployment bei Tag-Commit
-** URL: 
-** Stabile Version für User-Testing
-
-=== Documentation
-
-* Antora Site Generator
-* Deployed zusammen mit Prototype
-* Automatische Updates
-
-== Supporting Subdomain
-
-
-== Zukünftige Entwicklung
-
-* Migration zu Production App
-* API Integration
-* E2E Tests
-* Performance Monitoring 
\ No newline at end of file
+Die Basis liefert nur eine starter-sichere MSW-Schicht. Projektspezifische Handler und Datensätze
+werden später ergänzt oder aus einem optionalen Beispiel übernommen.
diff --git a/template/docs/modules/ROOT/pages/getting-started.adoc b/template/docs/modules/ROOT/pages/getting-started.adoc
index 7229b2a..12b068f 100644
--- a/template/docs/modules/ROOT/pages/getting-started.adoc
+++ b/template/docs/modules/ROOT/pages/getting-started.adoc
@@ -2,8 +2,6 @@
 :experimental:
 :icons: font
 
-
-
 == Voraussetzungen
 
 Für die Entwicklung werden folgende Tools benötigt:
@@ -29,33 +27,38 @@ Das Projekt verwendet npm Workspaces. Alle Abhängigkeiten können mit einem Bef
 npm install
 ----
 
-== Entwicklungsumgebung einrichten
+== Entwicklungsserver starten
 
-=== Mock-Daten generieren
-
-Vor dem ersten Start müssen die Mock-Daten generiert werden:
+Der Entwicklungsserver kann direkt im Root-Verzeichnis gestartet werden:
 
 [source,bash]
 ----
-npm run build:data
+npm run dev
 ----
 
-=== Entwicklungsserver starten
+Dies startet den Prototypen und die Watcher für die abhängigen Pakete.
+
+Die Anwendung ist dann unter http://localhost:5173 erreichbar.
+
+== Mock-Daten
 
-Der Entwicklungsserver kann mit folgendem Befehl im Root-Verzeichnis des Repos gestartet werden:
+Der Starter liefert absichtlich leere Mock-Daten. Sobald eigene Generatoren vorhanden sind, kann das
+JSON wie gewohnt gebaut werden:
 
 [source,bash]
 ----
-npm run dev
+npm run build:data
 ----
 
-Dies startet:
+== Optionale Beispiele
 
-* Den https://reactrouter.com/home[React Router] Entwicklungsserver (Prototyp)
-* Einen Watcher für die Mock-Daten
-* Einen Watcher für die UI-Komponenten
+Falls das Projekt mit einem Beispiel generiert wurde, liegt dieses unter `examples/<name>/`.
 
-Die Anwendung ist dann unter http://localhost:5173 erreichbar.
+Die Beispiele sind unabhängig vom Hauptprojekt:
+
+* Sie sind nicht Teil der Root-Workspaces
+* Sie werden nicht automatisch von Turborepo gebaut
+* Sie müssen im jeweiligen Beispielordner separat installiert werden
 
 == Projektstruktur
 
@@ -67,73 +70,26 @@ Die Anwendung ist dann unter http://localhost:5173 erreichbar.
 │   ├── eslint/      # ESLint Konfigurationen
 │   ├── typescript/  # Typescript Konfigurationen
 ├── docs/            # Dokumentation
-├── frontend/        # Produktives Frontend (noch nicht eingerichtet)
-├── mocks/       # Testdaten Generator
-├── mock-api/        # Mock Backend
+├── frontend/        # Platzhalter für das produktive Frontend
+├── mocks/           # Starter für generierte Mock-Daten
+├── msw/             # Starter für MSW-Handler
 ├── prototype/       # Klickbarer UX-Prototyp
 └── ui/              # Design-System Komponenten
 ----
 
-
-== IDE Konfiguration
-
-=== VS Code
-
-Empfohlene Extensions:
-
-* ESLint
-* Prettier
-* Tailwind CSS IntelliSense
-* AsciiDoc
-
-Die Projekteinstellungen für VS Code sind bereits im Repository enthalten.
-
-=== WebStorm
-
-Für WebStorm müssen folgende Plugins installiert werden:
-
-* Tailwind CSS
-* AsciiDoc
-
 == Typische Entwicklungsabläufe
 
-=== Neue Feature im Prototyp entwickeln
+=== Erste Produktstrecke im Prototyp entwickeln
 
 1. Feature-Branch erstellen
-2. Route in `prototype/app/routes` anlegen
-3. UI mit shadcn/ui Komponenten aufbauen
-4. Mock-Daten in `mocks` erweitern falls nötig
-5. Feature testen und iterieren
-6. Pull Request erstellen
-
-=== UI-Komponente hinzufügen
-
-1. Komponente in `packages/ui/src/components` erstellen
-2. Storybook Story schreiben
-3. Tests hinzufügen
-4. Komponente exportieren und im Prototyp verwenden
-
-== Nächste Schritte
-
-* xref:architecture.adoc[Architektur] verstehen
-* xref:prototype.adoc[Prototyp] kennenlernen
-* xref:design-system.adoc[Design System] erkunden
-
-== Troubleshooting
-
-=== Bekannte Probleme
-
-[qanda]
-Typescript Fehler nach npm install::
-  Führen Sie `npm run build` aus, um alle Packages zu bauen.
-
-Mock-Daten werden nicht aktualisiert::
-  Löschen Sie den `.cache` Ordner und führen Sie `npm run build:data` erneut aus.
-
-=== Support
+2. Route in `prototype/app/routes.ts` ergänzen
+3. UI im Prototyp aufbauen
+4. Falls nötig Mock-Daten und MSW-Handler ergänzen
+5. Validieren und iterieren
 
-Bei Problemen:
+=== Optionales Beispiel untersuchen
 
-1. Prüfen Sie die bekannten Probleme
-2. Suchen Sie in den GitHub Issues
-3. Erstellen Sie ein neues Issue 
\ No newline at end of file
+1. In den entsprechenden `examples/<name>/` Ordner wechseln
+2. Dort `npm install` ausführen
+3. Beispiel lokal starten oder bauen
+4. Gewünschte Muster gezielt in das Hauptprojekt übernehmen
diff --git a/template/docs/modules/ROOT/pages/index.adoc b/template/docs/modules/ROOT/pages/index.adoc
index 4d0ccaa..cd35fd9 100644
--- a/template/docs/modules/ROOT/pages/index.adoc
+++ b/template/docs/modules/ROOT/pages/index.adoc
@@ -1,78 +1,59 @@
-= PLANNING STACK TEMPLATE Frontend Dokumentation
-:description: Entwicklerdokumentation für das PLANNING STACK TEMPLATE Frontend
+= PLANNING STACK TEMPLATE Frontend Documentation
+:description: Developer documentation for the PLANNING STACK TEMPLATE frontend monorepo
 :experimental:
 
-== Über dieses Projekt
+== Overview
 
-Beschreibung des Projekts
+This repository is the default Tinker Stack starter for PLANNING STACK TEMPLATE.
 
-== Module
+The base workspace is intentionally empty enough to let a team start from first principles instead
+of deleting a built-in demo.
 
-.Frontend-Struktur
-image::Prototyp-Repo.drawio.png[Repository-Struktur]
+== Modules
 
-Das Projekt ist als Monorepo mit folgenden Hauptmodulen aufgebaut:
+.Frontend structure
+image::Prototyp-Repo.drawio.png[Repository structure]
 
 [cols="1,4"]
 |===
-|Modul |Beschreibung
+|Module |Description
 
-|@repo/api 
-|Domain-Typen und Enums
+|@repo/api
+|Shared domain types and enums
 
 |@repo/docs
-|Diese Dokumentation
-
-|@repo/e2e
-|End-to-End und Integrations-Tests (Browser-Tests)
+|This documentation site
 
 |@repo/frontend
-|Frontend-Anwendung
+|Reserved for the production frontend
 
 |@repo/msw
-|Mock-Backend mit MSW
+|Starter-safe MSW package
 
 |@repo/mocks
-|Synthetische Testdaten-Generator
+|Starter-safe mock-data package
 
 |@repo/prototype
-|Klickbarer UX-Prototyp für schnelles Feedback
+|Minimal React Router prototype shell
 
 |@repo/ui
-|Design-System und Komponenten-Bibliothek
-
+|Shared UI primitives and design-system components
 |===
 
-Das Mock-API muss mit dem Backend synchron gehalten werden. Somit ist es möglich, die Frontend-Anwendung lokal zu entwickeln und gleichzeitig das Backend zu testen.
-
-Ausserdem ist es dadurch möglich, mit dem Prototypen gegen das echte Backend zu testen.
-
-
-== Technologie-Stack
-
-Das Frontend basiert auf folgenden Haupttechnologien:
-
-* *React* mit TypeScript für die UI-Entwicklung
-* *Tailwind CSS* mit shadcn/ui für das Design-System
-* *Turborepo* für das Monorepo-Management
-* *MSW* (Mock Service Worker) für das Mock-Backend
-* *Antora* für die Dokumentation
-
-Die Technologie für das Frontend ist noch offen. Empfohlen wird 
-React Router v7 als Framework (Isomorph). 
-
-Der Prototyp verwendet React Router SPA, damit er auf einem Shared-Host deployed werden kann.
-
-== Erste Schritte
+Optional examples can be generated into `examples/<name>/`. These examples are independent from the
+base workspace and are not part of the default Turborepo build graph.
 
-Siehe xref:getting-started.adoc[Erste Schritte] für Setup-Anweisungen und einen Überblick über die Entwicklungsumgebung.
+== Technology stack
 
-== Architektur 
+The default stack includes:
 
-Die Anwendung folgt einer prototypen-getriebenen Entwicklung:
+* React with TypeScript
+* React Router for the starter prototype
+* Tailwind CSS and shadcn/ui-style primitives
+* Turborepo for workspace orchestration
+* MSW for local API mocking
+* Antora for docs
 
-1. Schnelle Iteration über Features im Prototyp
-2. Feedback von Benutzern einholen
-3. Validierte Features in die produktive Anwendung übernehmen
+== Getting started
 
-Mehr Details zur Architektur unter xref:architecture.adoc[Architektur]. 
\ No newline at end of file
+See xref:getting-started.adoc[Getting Started] for setup instructions.
diff --git a/template/docs/modules/ROOT/pages/mock-data.adoc b/template/docs/modules/ROOT/pages/mock-data.adoc
index e871f62..2e64d45 100644
--- a/template/docs/modules/ROOT/pages/mock-data.adoc
+++ b/template/docs/modules/ROOT/pages/mock-data.adoc
@@ -3,44 +3,25 @@
 
 == Überblick
 
-Das `@repo/mocks` Package generiert synthetische Testdaten für die Entwicklung. Die Daten sind:
+Das `@repo/mocks` Package ist im Starter absichtlich neutral gehalten.
 
-* Realistisch und konsistent
-* Typsicher durch TypeScript
-* Reproduzierbar durch feste Seeds
+Die Default-Implementierung erzeugt leere Datensätze, damit `npm run build:data` sofort
+funktioniert, auch wenn noch keine Domänenmodelle definiert wurden.
 
-Die Daten werden im Entwicklungs-Modus On-The-Fly beim Reload der Applikation generiert.
+== Starter-Verhalten
 
-== Generator
+* Presets für `small`, `medium` und `full` sind vorhanden
+* Der Generator liefert standardmässig ein leeres JSON-Objekt
+* Die Struktur kann später durch projektspezifische Generatoren ersetzt werden
 
-=== Technologie
+== Nächste Schritte
 
-* https://fakerjs.dev/[Faker.js] für realistische Daten
-* TypeScript für Typsicherheit
-* 3 vorgegebene Konfigurationen für unterschiedliche Datenmengen
-  ** `small`: Für manuelle Prüfung der erstellten Daten.
-  ** `medium`: Für automatisches Testen und Entwicklung.
-  ** `full`: Alle Organisationen, für vollständige Tests.
+1. Eigene Domänentypen in `@repo/api` definieren
+2. Presets in `mocks/src/generators/config.ts` anpassen
+3. Datenlogik in `mocks/src/generators/dataset.ts` implementieren
+4. JSON mit `npm run build:data` erzeugen
 
+== Beispiele
 
-=== Verwendung
-
-Siehe `@repo/mocks/README.md`
-
-Der Ordner enthält Generator-Klassen für die einzelnen Entitäten.
-
-In der Datei `dataset.ts` werden die einzelnen Generatoren zu einem Datensatz zusammengefasst.
-
-== Daten erweitern
-
-1. Domain-Types in `@repo/api` definieren und falls nötig im lokalen Repository anpassen.
-2. Generator in `@repo/mocks/src/generators` erstellen
-3. In `dataset.ts` integrieren
-4. Build mit `npm run build:data`
-
-== Best Practices
-
-* Realistische Wertebereiche verwenden
-* Beziehungen zwischen Entitäten beachten
-* Lokale Besonderheiten berücksichtigen (z.B. Schweizer Adressen)
-* Reproduzierbarkeit durch Seeds sicherstellen 
\ No newline at end of file
+Wenn ein optionales Beispiel mitgeneriert wurde, zeigt dessen `mocks/` Package eine vollständige
+Umsetzung in einem unabhängigen Kontext.
diff --git a/template/docs/modules/ROOT/pages/monorepo.adoc b/template/docs/modules/ROOT/pages/monorepo.adoc
index f31d30c..06d3804 100644
--- a/template/docs/modules/ROOT/pages/monorepo.adoc
+++ b/template/docs/modules/ROOT/pages/monorepo.adoc
@@ -2,56 +2,56 @@
 
 Siehe auch README.md.
 
-Wir verwenden Turborepo mit der https://turbo.build/repo/docs/core-concepts/internal-packages#compiled-packages[Compiled Packages] Strategie.
+Wir verwenden Turborepo mit kompilierten internen Paketen.
 
 Alle Pakete sind ESM-Module und verwenden den `@repo` Scope.
 
-Dieses Monorepo enthält die folgenden Pakete/Apps:
-
 == Apps und Pakete
 
-- `@repo/frontend`: das Frontend für die PLANNING STACK TEMPLATE Anwendung (noch zu erstellen).
-- `@repo/prototype`: ein Prototyp für die PLANNING STACK TEMPLATE Anwendung.
-- `@repo/api`: ein Paket, das die Domain-Typen und -Enums bereitstellt.
-- `@repo/docs`: Dokumentationen für die PLANNING STACK TEMPLATE Anwendung im Antora-Format.
-- `@repo/mocks`: ein Paket, das synthetische Daten für die Anwendungen bereitstellt.
-- `@repo/mock-api`: ein Paket, das eine Mock-API über Service-Worker bereitstellt.
-- `@repo/ui`: eine Basis-React-Komponentenbibliothek, die von den Anwendungen `FAS` und `prototype`
-  gemeinsam genutzt wird
+- `@repo/frontend`: Platzhalter für das produktive Frontend
+- `@repo/prototype`: minimaler Prototyp für frühe UX-Validierung
+- `@repo/api`: Domain-Typen und Enums
+- `@repo/docs`: Antora-Dokumentation
+- `@repo/mocks`: Starter für generierte Mock-Daten
+- `@repo/msw`: Starter für MSW-Handler
+- `@repo/ui`: gemeinsame UI-Komponenten
 - `@repo/eslint-config`: `eslint`-Konfigurationen
-- `@repo/typescript-config`: `tsconfig.json`s, die im gesamten Monorepo verwendet werden
+- `@repo/typescript-config`: gemeinsame `tsconfig.json`
 
 == Build
 
-Die Builds sind alle von https://turbo.build[Turborepo] gesteuert und sollten aus dem
-Root-Verzeichnis heraus aufgerufen werden. werden.
-
-Um alle Apps und Pakete zu bauen, führe den folgenden Befehl aus:
+Die Basis-Workspaces werden über Turborepo gebaut:
 
 ```
 npm run build
 ```
 
-Es ist auch möglich, nur ein bestimmtes Paket oder eine bestimmte App zu bauen:
+Weitere hilfreiche Kommandos:
 
 ```
 npm run build:data
-
 npm run build:msw
-
 npm run build:prototype
 ```
 
-### Entwicklung
+== Entwicklung
 
-Aktuell ist standardmässig der Prototyp aktiviert. Um die Entwicklung zu starten, führe den
-folgenden Befehl aus. Dieser startet einen lokalen Server und watcher für die Abhängigen Pakete.
+Zum Starten der Basis-Entwicklung:
 
 ```
 npm run dev
 ```
 
+== Optionale Beispiele
 
+Beispiele werden unter `examples/<name>/` erzeugt und absichtlich nicht in die Root-Workspaces
+aufgenommen.
+
+Dadurch:
+
+* ignoriert Turborepo sie standardmässig
+* können sie separat installiert werden
+* können sie jederzeit gelöscht werden
 
 == Aufbau
 
@@ -59,6 +59,3 @@ npm run dev
 ----
 include::partial$monorepo.puml[]
 ----
-
-Das Monorepo verwendet die export und import Direktiven von node ESM Modulen.
-Alle exportierten Namespaces müssen in der package.json Datei aufgelistet werden.
\ No newline at end of file
diff --git a/template/docs/modules/ROOT/pages/prototype.adoc b/template/docs/modules/ROOT/pages/prototype.adoc
index a0d1223..1c8100e 100644
--- a/template/docs/modules/ROOT/pages/prototype.adoc
+++ b/template/docs/modules/ROOT/pages/prototype.adoc
@@ -3,103 +3,33 @@
 
 == Zweck
 
-Der PLANNING STACK TEMPLATE Prototyp dient als:
+Der Starter-Prototyp ist absichtlich minimal. Er dient als:
 
-* Testumgebung für neue Features und UX-Konzepte
-* Basis für Benutzerfeedback und Iterationen
-* Proof-of-Concept für technische Lösungen
+* Einstiegspunkt für den ersten validierbaren User Flow
+* Ort für schnelle UX-Iterationen
+* Schale, in die eigene API- und Mock-Logik eingesetzt wird
 
-== Struktur
-
-Die Ordnerstruktur des Prototypen orientiert sich an den Modulen des Produktionssystems.
-Zusätzlich gibt es den Ordner 'components' für Modulübergreifende UI-Komponenten und 'hooks' für wiederverwendbare Logik.
-Der Ordner 'lib' enthält Hilfsfunktionen. Der Ordner 'mocks' die Logik für die Mock-Daten.
-
-Die Routen sind über eine Route-Konfiguration in app/routes.ts definiert.
-Die Route-Komponenten sind in den entsprechenden Modul-Ordnern.
-
-== API
-
-Der Prototyp verwendet das `ky` Paket für HTTP-Anfragen.
-
-
-=== Technischer Aufbau
+== Technischer Aufbau
 
 * React Router SPA mit TypeScript
-* Mock-Backend via MSW
-* Synthetische Testdaten
-* shadcn/ui Komponenten
-
-== Entwicklungsprozess
-
-=== Feature-Entwicklung
-
-1. Feature-Anforderung erfassen
-2. Schnelle Implementierung im Prototyp
-3. Review mit Stakeholdern
-4. Feedback einarbeiten
-5. User-Stories updaten
-6. Feature für Produktion freigeben
-
-=== Guidelines
-
-* Fokus auf Benutzerinteraktion, nicht auf Datenvalidierung
-* TODOs für fehlende Produktionsanforderungen
-* Schnelle Iteration über perfekte Implementation
-* Realistische Testdaten verwenden
-
-== Deployment
-
-Das Deployment erfolgt automatisch über die CI/CD Pipeline:
-
-=== Umgebungen
-
-[cols="1,3"]
-|===
-|Umgebung |Beschreibung
-
-|Continuous Integration
-|* Deployment bei Push auf `main`
-* URL: 
-* Aktuelle Entwicklungsversion
-
-|Acceptance Test
-|* Deployment bei Tag-Commit
-* URL: 
-* Stabile Version für User-Testing
-
-
-|Preview
-|* Preview-Umgebung, z.B. für Merge-Requests
-* URL: 
-* Alternative Version für A/B Tests.
-|===
-
-Die nötigen Zugangsdaten müssen in den Umgebungsvariablen gesetzt werden. Siehe `.env.example`.
-
-Das Deployment auf Preview kann bei einem Merge-Request manuell ausgelöst werden.
-
-=== Zugriff
-
-* Die Hosts sind über einen IP-Filter geschützt. Die Konfiguration ist in der .htaccess Datei im Ordner `prototype/app/public`.
-
-* Der Host für die Dokumentation kann nur vom internen Netzwerk aus erreicht werden.
+* Tailwind CSS
+* Lokales MSW-Bootstrapping
+* Starter-Landing-Page statt Demo-Workflow
 
+== Startpunkt
 
-== Limitationen
+Der Prototyp enthält standardmässig:
 
-* Keine echte Backend-Anbindung
-* Eingeschränkte Validierung
-* Vereinfachte Berechtigungen
-* Keine Performance-Optimierung
+* eine Root-Layout-Datei
+* eine Landing-Route
+* MSW Pass-Through Handler
 
-== Nächste Schritte
+Von dort aus kann die gewünschte Feature-Struktur aufgebaut werden.
 
-* Integration von Benutzer-Feedback
-* Priorisierung der Features für Produktion
-* Identifikation technischer Herausforderungen 
+== Optionale Beispiele
 
-== Bekannte Probleme
+Wenn ein Beispiel generiert wurde, enthält dieses einen vollständigen Referenz-Flow in seinem
+eigenen Verzeichnis unter `examples/<name>/`.
 
-* msw in einer Version höher als 2.6.3 (getestet bis 2.6.6) funktioniert nicht mit dem dev server. Das CSS kann nicht geladen werden.
-Aktuell ist die Version auf 2.6.3 gepinnt. Allenfalls später nochmals testen und ggf. einen Github-Issue erstellen.
\ No newline at end of file
+Diese Beispiele gehören nicht zur Build-Pipeline des Root-Projekts und können unabhängig gestartet
+oder gelöscht werden.
diff --git a/template/mocks/README.md b/template/mocks/README.md
index 593a753..9709e90 100644
--- a/template/mocks/README.md
+++ b/template/mocks/README.md
@@ -1,74 +1,16 @@
 # PLANNING STACK TEMPLATE Mock Data
 
-This module contains a mock data generator for the PLANNING STACK TEMPLATE Web Project. Pseudorandom
-data is generated using the [Faker JS Library](https://fakerjs.dev/).
+This package is a starter-safe placeholder for generated mock data.
 
-NOTE: This repo builds only snapshot releases. Make sure you always install the latest version of
-the package using the 'next' tag.
-
-```bash
-npm install @repo/mocks@next
-```
-
-Also make sure Vite does not cache the module.
-
-```javascript
-// vite.config.ts
-export default defineConfig({
-  plugins: [react()],
-  optimizeDeps: {
-    exclude: ['@repo/mocks'],
-  },
-});
-```
-
-A full dataset export for medium and small size are exported separately and can be imported into
-projects.
-
-    import { medium } from '@repo/mocks/medium';
-
-The Repository also exports msw 2 handlers for the mock data. The handlers can read the user data
-from the request and return the correct data for the user. msw is a peer dependency of this package.
-
-```typescript
-// handlers.ts
-
-import { stammdatenHandlers, auth } from '@repo/mocks/handlers';
-import { medium } from '@repo/mocks/medium';
-
-// Create handlers for the medium dataset and the provided auth function
-export const handlers = [...stammdatenHandlers(medium, auth)];
-```
-
-The dataset is also built during CI and can be downloaded from the
-[CI Pipelines page](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/pipelines).
-
-Download the latest Artifact:
-[JSON](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/jobs/artifacts/main/download?job=publish)
-/
-[JavaScript](https://gitlab.ti8m.ch/planning-stack-template/mocks/-/jobs/artifacts/main/download?job=build).
+By default the base scaffold exports an empty dataset so `npm run build:data` works before you have
+defined any domain entities.
 
 ## Usage
 
-NOTE: To get consistent data, there has to be one randomizer instance that is used exclusively for
-the whole run and passed in as an argument to all generators. Never use a global Faker instance to
-generate data.
-
-The generator creates models that represent the data structure for the domain. Then the API
-responses are inferred from these models.
-
-The `buildDataset` method generates a complete dataset based on the provided configuration. There
-are 3 pre-defined configurations in `datasetConfigs` that can be used:
-
-- `small`: Generates a dataset with 7 organisations with up to 6 members each.
-- `medium`: Generates a dataset with 7 organisations with up to 18 members each.
-- `full`: Generates a dataset with all organisations with the true number of members each. (not
-  implemented yet)
-
-## Repo Structure
+- Replace `src/generators/config.ts` with the presets that make sense for your product.
+- Replace `src/generators/dataset.ts` with your real data generation logic.
+- Run `npm run generate:small` or `npm run generate:medium` to write JSON snapshots under
+  `data-mocks/`.
 
-- cli: Command-Line tool to generate the dataset.
-- src/data: Contains the Typescript exports for the small and medium dataset. The dataset is
-  generated at import time.
-- src/facts: Contains static data from other sources or enums.
-- src/generators: Contains the Typescript code for the generated mock data.
+If you want a full worked example, scaffold one of the optional example templates and inspect its
+`mocks/` package separately.
diff --git a/template/mocks/cli/generate-data.mjs b/template/mocks/cli/generate-data.mjs
index 778a61c..a8707b0 100755
--- a/template/mocks/cli/generate-data.mjs
+++ b/template/mocks/cli/generate-data.mjs
@@ -56,7 +56,7 @@ if (!config) {
 }
 
 if (seed) {
-	config.seed = seed;
+	console.warn('\x1b[33m Seed is ignored by the starter dataset generator. \u001B[0m');
 }
 
 const { data } = buildDataset(config);
diff --git a/template/mocks/src/generators/config.ts b/template/mocks/src/generators/config.ts
index 81c26b8..7637414 100644
--- a/template/mocks/src/generators/config.ts
+++ b/template/mocks/src/generators/config.ts
@@ -1,55 +1,17 @@
-import type { Randomizer } from '@faker-js/faker';
-
-type ConfigBase = {
-	/**
-	 * Optional randomizer to use for generating the dataset.
-	 */
-	randomizer?: Randomizer;
-	companyCount: number;
-	/**
-	 * Number of persons to generate.
-	 */
-	personCount: number;
+export type DatasetConfig = {
+  preset: string;
 };
 
-type ConfigWithSeed = {
-	/**
-	 * The seed for the random number generator.
-	 */
-	seed: number;
-	/**
-	 * The reference date for the dataset.
-	 */
-	refDate: Date;
-} & ConfigBase;
-
-type ConfigWithoutSeed = {
-	randomizer?: Randomizer;
-	seed?: never;
-	refDate?: never;
-} & ConfigBase;
-
-export type DatasetConfig = ConfigWithSeed | ConfigWithoutSeed;
-
 export const datasetConfigs = {
-	small: {
-		seed: 1,
-		refDate: new Date('2024-09-11T00:00:00.000Z'),
-		companyCount: 2,
-		personCount: 3,
-	},
-	medium: {
-		seed: 1,
-		refDate: new Date('2024-09-11T00:00:00.000Z'),
-		companyCount: 2,
-		personCount: 50,
-	},
-	full: {
-		seed: 1,
-		refDate: new Date('2024-09-11T00:00:00.000Z'),
-		companyCount: 300,
-		personCount: 10000,
-	},
+  small: {
+    preset: 'small',
+  },
+  medium: {
+    preset: 'medium',
+  },
+  full: {
+    preset: 'full',
+  },
 } satisfies Record<string, DatasetConfig>;
 
 export type DatasetPreset = keyof typeof datasetConfigs;
diff --git a/template/mocks/src/generators/dataset.test.ts b/template/mocks/src/generators/dataset.test.ts
index 534743d..0363c7c 100644
--- a/template/mocks/src/generators/dataset.test.ts
+++ b/template/mocks/src/generators/dataset.test.ts
@@ -2,23 +2,15 @@ import { expect, test } from 'vitest';
 import { datasetConfigs } from './config.js';
 import { buildDataset } from './dataset.js';
 
-const smallConfig = datasetConfigs.small;
-
-test('small dataset', () => {
-	const { data } = buildDataset(smallConfig);
-	expect(data).toBeDefined();
-	expect(data.companies).toBeDefined();
-	expect(Object.keys(data.companies).length).toBe(smallConfig.companyCount);
-	expect(data.persons).toBeDefined();
-	expect(Object.keys(data.persons).length).toBe(smallConfig.personCount);
-	expect(data.tokens).toBeDefined();
+test('dataset config presets are available', () => {
+  expect(datasetConfigs.small.preset).toBe('small');
+  expect(datasetConfigs.medium.preset).toBe('medium');
+  expect(datasetConfigs.full.preset).toBe('full');
 });
 
-test('small dataset is deterministic', () => {
-	const { data: dataset1 } = buildDataset(smallConfig);
-	buildDataset(smallConfig);
-	const { data: dataset2 } = buildDataset(smallConfig);
-	expect(dataset1).toEqual(dataset2);
-	const { data: dataset3 } = buildDataset({ ...smallConfig, seed: 1234 });
-	expect(dataset1).not.toEqual(dataset3);
+test('starter dataset is empty by default', () => {
+  const dataset = buildDataset(datasetConfigs.small);
+  expect(dataset.config).toEqual(datasetConfigs.small);
+  expect(dataset.data).toEqual({});
+  expect(dataset.indexes).toEqual({});
 });
diff --git a/template/mocks/src/generators/dataset.ts b/template/mocks/src/generators/dataset.ts
index 6da521f..0ee268c 100644
--- a/template/mocks/src/generators/dataset.ts
+++ b/template/mocks/src/generators/dataset.ts
@@ -1,180 +1,26 @@
-import { JWTPayload } from '#/generators/auth.js';
-import { Person } from '#/generators/demo/persons.js';
-import type { ICompany, IPerson, IWorkingAt } from '#/generators/demo/types.js';
-import { generateMersenne53Randomizer } from '@faker-js/faker';
 import type { DatasetConfig } from './config.js';
-import { Company, WorkingAt } from './demo/companies.js';
-import { createFaker } from './utils.js';
-
-function today() {
-	const d = new Date();
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
 
 /**
  * The dataset generated by the buildDataset function. This is exported and used
  * by the mock api to serve data.
  */
-export type Dataset = {
-	// Example entities
-	/**
-	 * All companies in the dataset indexed by their ID.
-	 */
-	companies: Record<string, ICompany>;
-
-	/**
-	 * All persons in the dataset indexed by their ID.
-	 */
-	persons: Record<string, IPerson>;
-
-	/**
-	 * All working at relationships in the dataset indexed by their person ID.
-	 */
-	workingAt: IWorkingAt[];
-
-	/**
-	 * All tokens in the dataset indexed by their login id.
-	 */
-	tokens: Record<string, JWTPayload>;
-};
+export type Dataset = Record<string, never>;
+export type DatasetIndexes = Record<string, never>;
 
-/**
- * Indexes for the dataset. These are used to speed up queries.
- * They can be used without performance penalty by the mock api, but should not be exported to JSON
- * since it is redundant data.
- */
-export type DatasetIndexes = {
-	workingAtIndexedByPersonId: Record<string, IWorkingAt>;
-	workingAtIndexedByCompanyId: Record<string, IWorkingAt[]>;
+type DatasetBuildResult = {
+  config: DatasetConfig;
+  data: Dataset;
+  indexes: DatasetIndexes;
 };
 
 /**
- * This method generates a complete dataset based on the provided configuration.
- * @param config - The configuration for the dataset.
- * @returns The generated dataset.
+ * This starter implementation intentionally returns an empty dataset.
+ * Replace it with your own domain-specific generators as your project takes shape.
  */
-export function buildDataset(config: DatasetConfig) {
-	// Create a randomizer or use the provided one.
-	const randomizer = config.randomizer ?? generateMersenne53Randomizer();
-
-	// Seed the randomizer if a seed is provided to get deterministic results.
-	if (config.seed != null) {
-		randomizer.seed(config.seed + 1);
-	}
-
-	// Create a faker instance with the randomizer and refDate.
-	// The refDate is used to generate data that is relative to a specific date.
-	// If no refDate is provided, the current date is used.
-	const refDate = config.refDate ?? today();
-	const faker = createFaker({ randomizer, refDate });
-
-	// Create a unique enforcer to ensure unique ids.
-	// const uniqueEnforcer = new UniqueEnforcer();
-
-	/*
-		Generate a demo dataset. This code can be deleted
-		and replaced with your own data generation logic.
-	*/
-
-	// Generate companies
-	const companies: Record<string, ICompany> = {};
-	// The first company is our main company. We pass it a name so we can identify it.
-	companies.acme = Company({
-		faker,
-		refDate,
-		id: 'acme',
-		name: 'ACME Inc.',
-	});
-
-	// The remaining companies are generated by the Company generator.
-	// The iterator starts at 1 because we already created the main company.
-	for (let i = 1; i < config.companyCount; i++) {
-		const company = Company({
-			faker,
-			refDate,
-		});
-		companies[company.id] = company;
-	}
-
-	// Generate persons
-	const persons: Record<string, IPerson> = {};
-	// We need an admin user, so we create it first.
-	persons.admin = Person({
-		faker,
-		id: 'admin',
-	});
-
-	// The remaining persons are generated by the Person generator.
-	// The iterator starts at 1 because we already created the admin user.
-	for (let i = 1; i < config.personCount; i++) {
-		const person = Person({
-			faker,
-		});
-		persons[person.id] = person;
-	}
-
-	// Generate working at relationships
-	const workingAt: IWorkingAt[] = [];
-	const { admin, ...otherPersons } = persons;
-	// Our admin user works at the main company.
-	workingAt.push({ personId: admin.id, companyId: companies.acme.id, role: 'admin' });
-	// The remaining persons are assigned to a random company.
-	for (const person of Object.values(otherPersons)) {
-		const company = faker.helpers.objectValue(companies);
-		workingAt.push(WorkingAt({ faker, personId: person.id, companyId: company.id }));
-	}
-	// Make sure we also have at least one manager and one employee.
-	if (workingAt[1] != null) workingAt[1].role = 'manager';
-	if (workingAt[2] != null) workingAt[2].role = 'employee';
-
-	// Index the working at relationships by person id for further processing.
-	// To make the example easier, a person can only work at one company.
-	const workingAtIndexedByPersonId = Object.fromEntries(workingAt.map(e => [e.personId, e]));
-	// A company can have multiple persons working at it.
-	const workingAtIndexedByCompanyId = Object.groupBy(workingAt, e => e.companyId) as Record<
-		string,
-		IWorkingAt[]
-	>;
-
-	// Create Login tokens for the admin user, a manager and an employee.
-	const tokens: Record<string, JWTPayload> = {};
-	tokens.admin = JWTPayload({ person: admin, company: companies.acme, role: 'admin' });
-	const manager = workingAt.find(e => e.role === 'manager');
-	const employee = workingAt.find(e => e.role === 'employee');
-	if (manager != null)
-		tokens.manager = JWTPayload({
-			person: persons[manager.personId]!,
-			company: companies[manager.companyId]!,
-			role: manager.role,
-		});
-	if (employee != null)
-		tokens.employee = JWTPayload({
-			person: persons[employee.personId]!,
-			company: companies[employee.companyId]!,
-			role: employee.role,
-		});
-
-	const data: Dataset = {
-		companies,
-		persons,
-		workingAt,
-		tokens,
-	};
-
-	const indexes: DatasetIndexes = {
-		workingAtIndexedByPersonId,
-		workingAtIndexedByCompanyId,
-	};
-
-	/*
-		END CUSTOM DATA GENERATION
-	*/
-
-	return {
-		randomizer,
-		faker,
-		data,
-		indexes,
-	};
+export function buildDataset(config: DatasetConfig): DatasetBuildResult {
+  return {
+    config,
+    data: {},
+    indexes: {},
+  };
 }
diff --git a/template/mocks/src/index.ts b/template/mocks/src/index.ts
index 11ec417..f01ac41 100644
--- a/template/mocks/src/index.ts
+++ b/template/mocks/src/index.ts
@@ -1,4 +1,3 @@
-export type { JWTPayload } from '#/generators/auth.js';
 export { datasetConfigs } from '#/generators/config.js';
 export type { DatasetConfig, DatasetPreset } from '#/generators/config.js';
 export { buildDataset } from '#/generators/dataset.js';
diff --git a/template/msw/full/index.ts b/template/msw/full/index.ts
index 1d4150c..e368755 100644
--- a/template/msw/full/index.ts
+++ b/template/msw/full/index.ts
@@ -1,22 +1,5 @@
-import { auth } from '#/auth.js';
-import { authHandlers } from '#/handlers/auth.js';
-import { demoHandlers } from '#/handlers/demo.js';
-import type { Dataset } from '@repo/mocks';
-import { buildDataset, datasetConfigs } from '@repo/mocks';
 import type { HttpHandler } from 'msw';
 
-console.time('building dataset');
-const { data, indexes } = buildDataset(datasetConfigs.full);
-console.timeEnd('building dataset');
-
-/**
- * Full import
- */
-
-const handlers: HttpHandler[] = [
-	...authHandlers(data),
-	...demoHandlers({ dataset: data, indexes, auth, addDelay: false }),
-];
+const handlers: HttpHandler[] = [];
 
 export { handlers };
-export type { Dataset };
diff --git a/template/msw/medium/index.ts b/template/msw/medium/index.ts
index f90962a..e368755 100644
--- a/template/msw/medium/index.ts
+++ b/template/msw/medium/index.ts
@@ -1,18 +1,5 @@
-import { auth } from '#/auth.js';
-import { authHandlers } from '#/handlers/auth.js';
-import { demoHandlers } from '#/handlers/demo.js';
-import type { Dataset } from '@repo/mocks';
-import { buildDataset, datasetConfigs } from '@repo/mocks';
 import type { HttpHandler } from 'msw';
 
-console.time('building dataset');
-const { data, indexes } = buildDataset(datasetConfigs.medium);
-console.timeEnd('building dataset');
-
-const handlers: HttpHandler[] = [
-	...authHandlers(data),
-	...demoHandlers({ dataset: data, indexes, auth, addDelay: false }),
-];
+const handlers: HttpHandler[] = [];
 
 export { handlers };
-export type { Dataset };
diff --git a/template/msw/src/handlers/index.ts b/template/msw/src/handlers/index.ts
index e482c73..acad543 100644
--- a/template/msw/src/handlers/index.ts
+++ b/template/msw/src/handlers/index.ts
@@ -1,2 +1,3 @@
-export { authHandlers as getAuthHandlers } from './auth.js';
-export { demoHandlers as getDemoHandlers } from './demo.js';
+import type { HttpHandler } from 'msw';
+
+export const emptyHandlers: HttpHandler[] = [];
diff --git a/template/msw/src/index.ts b/template/msw/src/index.ts
index fe6a037..67e8ba6 100644
--- a/template/msw/src/index.ts
+++ b/template/msw/src/index.ts
@@ -1,2 +1 @@
-export { auth } from '#/auth.js';
-export type { JWTPayload } from './handlers/auth.ts';
+export { emptyHandlers } from './handlers/index.js';
diff --git a/template/prototype/README.md b/template/prototype/README.md
index a3ed6cc..7d8b27f 100644
--- a/template/prototype/README.md
+++ b/template/prototype/README.md
@@ -1,21 +1,18 @@
-# PLANNING STACK TEMPLATE Prototyp
+# PLANNING STACK TEMPLATE Prototype
 
-Dies ist ein klickbarer UX-Prototyp für das PLANNING STACK TEMPLATE-Projekt. Er ist nicht für den
-Produktiveinsatz gedacht. Der Code ist schnell und einfach geschrieben und nicht optimiert.
+This package contains the starter prototype shell for PLANNING STACK TEMPLATE.
 
-Das Ziel dieses Prototyps ist es, schnell über das Design und die Funktionalität der PLANNING STACK
-TEMPLATE-Anwendung iterieren zu können.
+It is intentionally minimal:
 
-Das verwendete UI-Framework ist [shadcn/ui](https://ui.shadcn.com/) mit Tailwind. Das Iconpaket ist
-[Lucide](https://lucide.dev/icons/).
+- one landing route
+- local MSW bootstrapping with pass-through handlers
+- shared UI primitives and Tailwind setup
 
-Die Daten werden mit dem Mock-Daten-Generator erzeugt.
+Use it as the place where your first real flow takes shape.
 
-## URL
+## Development
 
-## Entwicklung
-
-Der Prototyp mit dem Mock-Server kann mit folgendem Befehl gestartet werden:
+Start the prototype from the monorepo root:
 
 ```shellscript
 npm run dev
diff --git a/template/prototype/app/mocks/handlers.ts b/template/prototype/app/mocks/handlers.ts
index cdd923f..abcd351 100644
--- a/template/prototype/app/mocks/handlers.ts
+++ b/template/prototype/app/mocks/handlers.ts
@@ -1,9 +1,9 @@
-// Import medium or full dataset. (build full dateset before import)
-import { handlers as mockHandlers } from '@repo/msw/medium';
 import { http, passthrough } from 'msw';
 
 export const handlers = [
-	...mockHandlers,
-	// Pass-Through Handler für alles andere
 	http.get('*', () => passthrough()),
+	http.post('*', () => passthrough()),
+	http.put('*', () => passthrough()),
+	http.patch('*', () => passthrough()),
+	http.delete('*', () => passthrough()),
 ];
diff --git a/template/prototype/app/root.tsx b/template/prototype/app/root.tsx
index 1d612c2..05ee8a2 100644
--- a/template/prototype/app/root.tsx
+++ b/template/prototype/app/root.tsx
@@ -1,288 +1,68 @@
-import { ApiProvider } from '#/components/context-providers/apiContext';
-import { AuthProvider, usePermissions } from '#/components/context-providers/permissionContext';
-import { Avatar, AvatarFallback, AvatarImage } from '#/components/ui/avatar';
-import { Button } from '#/components/ui/button';
-import { DemoApi } from '#/demo/api';
-import { useBreakpoint } from '#/hooks/useBreakpoint';
-import { cn } from '#/lib/utils';
 import styles from '#/styles/tailwind.css?url';
-import type { MeResponse } from '@repo/api/demo/types';
-import ky from 'ky';
-import {
-	HomeIcon,
-	LayoutDashboard,
-	LogOutIcon,
-	PanelLeftClose,
-	PanelLeftOpen,
-	Shield,
-	User,
-} from 'lucide-react';
-import { useEffect, useState } from 'react';
-import type { ClientActionFunctionArgs } from 'react-router';
-import {
-	Form,
-	Links,
-	Meta,
-	NavLink,
-	Outlet,
-	redirectDocument,
-	Scripts,
-	ScrollRestoration,
-	useLoaderData,
-} from 'react-router';
-
-/**
- * Fetch the user data from the mock backend.
- */
-export async function clientLoader(): Promise<
-	| {
-			me: MeResponse;
-			authenticated: true;
-	  }
-	| { authenticated: false; me?: never; groups?: never; error?: Error }
-> {
-	const api = DemoApi(ky);
-	let me: MeResponse;
-	if (typeof document !== 'undefined' && document.cookie?.includes('authToken')) {
-		try {
-			me = await api.me();
-			return { me, authenticated: true };
-		} catch (error) {
-			console.error('Error fetching initial data', error);
-			return { authenticated: false, error: error as Error };
-		}
-	}
-
-	return { authenticated: false };
-}
-
-/**
- * Log the user in or out.
- * @param request
- */
-export const clientAction = async ({ request }: ClientActionFunctionArgs) => {
-	const formData = await request.formData();
-	const intent = formData.get('intent');
-	if (intent === 'login') {
-		try {
-			await ky.post('/auth/login', {
-				body: formData,
-			});
-		} catch (error) {
-			console.error('Error logging in', error);
-			return null;
-		}
-	} else if (intent === 'logout' && typeof document !== 'undefined') {
-		const response = await ky.post('/auth/logout');
-		document.cookie = '';
-		console.log({ response });
-	}
-	throw redirectDocument('./');
-};
+import type { ReactNode } from 'react';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 
 export function links() {
-	return [{ rel: 'stylesheet', href: styles }];
+  return [{ rel: 'stylesheet', href: styles }];
 }
 
-export function Document({ children }: { children?: React.ReactNode }) {
-	return (
-		<html lang="de">
-			<head>
-				<meta charSet="utf-8" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<meta name="robots" content="noindex nofollow" />
-				<Meta />
-				<Links />
-			</head>
-			<body className="font-sans overflow-hidden max-h-screen">
-				{children}
-
-				<Scripts />
-			</body>
-		</html>
-	);
-}
-
-function Header({ children }: { children?: React.ReactNode }) {
-	return (
-		<header className="col-span-2 grid grid-cols-[1fr_auto] items-center bg-popover px-10 pt-4 pb-3 shadow-sm z-10">
-			<div className="flex items-center">
-				<div className="text-3xl font-bold">PLANNING STACK TEMPLATE Prototype</div>
-			</div>
-			{children}
-		</header>
-	);
+export function Document({ children }: { children?: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="robots" content="noindex nofollow" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="min-h-screen bg-background text-foreground font-sans">
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
 }
 
-function MainNav({ showLabels }: { showLabels: boolean }) {
-	const permissions = usePermissions();
-	return (
-		<nav className="mt-8 flex-grow overflow-y-auto">
-			<NavItem href="/" icon={<HomeIcon />} label="Home" isOpen={showLabels} />
-			<NavItem href="/dashboard" icon={<LayoutDashboard />} label="Dashboard" isOpen={showLabels} />
-			<NavItem href="/employees" icon={<User />} label="Personal" isOpen={showLabels} />
-			{permissions.includes('admin') && (
-				<NavItem href="/admin" icon={<Shield />} label="Admin" isOpen={showLabels} />
-			)}
-		</nav>
-	);
+function Header() {
+  return (
+    <header className="border-b border-border bg-card/80 backdrop-blur">
+      <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+        <div>
+          <p className="text-sm uppercase tracking-[0.3em] text-muted-foreground">Starter</p>
+          <h1 className="text-2xl font-semibold">PLANNING STACK TEMPLATE Prototype</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">Replace this shell with your first workflow.</p>
+      </div>
+    </header>
+  );
 }
 
-const apiContext = {
-	demo: DemoApi(ky),
-};
-
 export default function App() {
-	const breakpoint = useBreakpoint();
-	const loaderData = useLoaderData<typeof clientLoader>();
-	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
-	useEffect(() => {
-		if (!isSidebarOpen && breakpoint === 'lg') {
-			// TODO: Temporär deaktiviert für User-Testing
-			// setIsSidebarOpen(true);
-		} else if (isSidebarOpen && breakpoint === 'sm') {
-			setIsSidebarOpen(false);
-		}
-		// only act on a change of breakpoint.
-	}, [breakpoint]);
-
-	if (!loaderData) return <Document />;
-
-	// Wenn der Benutzer nicht eingeloggt ist, wird er aufgefordert sich einzuloggen.
-	if (loaderData?.authenticated === false) {
-		return (
-			<Document>
-				<Form action="./" method="POST">
-					<input type="hidden" name="intent" value="login" readOnly />
-					<div className="flex  gap-4 mx-auto p-10">
-						<Button type="submit" variant="outline" name="username" value="admin">
-							Login as administrator
-						</Button>
-						<Button type="submit" variant="outline" name="username" value="manager">
-							Login as manager
-						</Button>
-						<Button type="submit" variant="outline" name="username" value="employee">
-							Login as employee
-						</Button>
-					</div>
-					{loaderData.error && <div className="text-red-500">{loaderData.error.message}</div>}
-				</Form>
-			</Document>
-		);
-	}
-
-	const { me } = loaderData;
-	const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
-
-	return (
-		<Document>
-			<AuthProvider>
-				<ApiProvider value={apiContext}>
-					<div className="grid grid-rows-[auto_1fr] grid-cols-[auto_1fr] h-screen bg-background">
-						<Header>
-							<div className="flex items-center justify-end px-4 py-3 gap-2">
-								<Avatar className="h-6 w-6">
-									<AvatarImage src={me.portrait} alt="" />
-									<AvatarFallback>{me.firstName.charAt(0)}</AvatarFallback>
-								</Avatar>
-								<div className="text-sm">
-									{me.firstName} {me.lastName}
-								</div>
-								<Form action="./" method="POST">
-									<input type="hidden" name="intent" value="logout" readOnly />
-									<Button type="submit" variant="ghost" size="icon">
-										<LogOutIcon className="h-5 w-5" />
-									</Button>
-								</Form>
-							</div>
-						</Header>
-
-						<aside
-							data-open={isSidebarOpen}
-							className="bg-popover text-popover-foreground transition-all duration-300 flex flex-col w-64 data-[open=false]:w-20 data-[open=false]:items-center row-start-2 col-start-1 h-full"
-						>
-							<MainNav showLabels={isSidebarOpen} />
-							<div className="text-xs text-muted p-4">
-								Version {import.meta.env.VITE_VERSION}, Build {import.meta.env.VITE_BUILD_NUMBER},{' '}
-								{breakpoint}
-							</div>
-							<div className="p-4 flex justify-center">
-								<Button
-									variant="ghost"
-									size="icon"
-									className="text-muted-foreground hover:text-secondary-foreground"
-									onClick={toggleSidebar}
-									title={isSidebarOpen ? 'Sidebar schliessen' : 'Sidebar öffnen'}
-								>
-									{isSidebarOpen ? (
-										<PanelLeftClose className="h-6 w-6" />
-									) : (
-										<PanelLeftOpen className="h-6 w-6" />
-									)}
-								</Button>
-							</div>
-						</aside>
-						<main className="row-start-2 col-start-2 overflow-x-hidden overflow-y-auto p-6 max-h-full relative scroll-smooth">
-							<Outlet />
-							<ScrollRestoration />
-						</main>
-					</div>
-				</ApiProvider>
-			</AuthProvider>
-		</Document>
-	);
-}
-
-function NavItem({
-	href,
-	icon,
-	label,
-	isOpen,
-}: {
-	href: string;
-	icon: React.ReactNode;
-	label: string;
-	isOpen: boolean;
-}) {
-	return (
-		<NavLink
-			to={href}
-			className={({ isActive }) =>
-				cn('flex flex-none items-center px-4 py-2 hover:bg-accent', {
-					'justify-start': isOpen,
-					'justify-center w-12 px-0': !isOpen,
-					'rounded-sm': !isOpen,
-					'bg-accent': isActive,
-					'font-bold': isActive,
-				})
-			}
-		>
-			<span title={label}>{icon}</span>
-			{
-				<span className={cn('inline-block overflow-hidden', { 'w-0': !isOpen, 'ml-4': isOpen })}>
-					{label}
-				</span>
-			}
-		</NavLink>
-	);
+  return (
+    <Document>
+      <div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/20">
+        <Header />
+        <main className="mx-auto max-w-5xl px-6 py-10">
+          <Outlet />
+          <ScrollRestoration />
+        </main>
+      </div>
+    </Document>
+  );
 }
 
 export function HydrateFallback() {
-	return (
-		<Document>
-			<div className="grid grid-rows-[auto_1fr] grid-cols-[auto_1fr] h-screen bg-background">
-				<Header>
-					<div className="h-[3.75rem]" />
-				</Header>
-				{/* TODO: md Klassen hinzufügen*/}
-				<aside className="bg-popover text-popover-foreground flex flex-col w-20 items-center row-start-2 col-start-1 h-full"></aside>
-				<main className="row-start-2 col-start-2 overflow-x-hidden overflow-y-auto p-6 max-h-full relative scroll-smooth">
-					<div className="font-sans p-4">
-						<h1 className="text-3xl mb-3">Lädt...</h1>
-					</div>
-				</main>
-			</div>
-		</Document>
-	);
+  return (
+    <Document>
+      <div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/20">
+        <Header />
+        <main className="mx-auto max-w-5xl px-6 py-10">
+          <div className="rounded-2xl border border-border bg-card p-8 shadow-sm">
+            <h2 className="text-2xl font-semibold">Loading prototype shell...</h2>
+          </div>
+        </main>
+      </div>
+    </Document>
+  );
 }
diff --git a/template/prototype/app/routes.ts b/template/prototype/app/routes.ts
index 6c8e094..aad9b67 100644
--- a/template/prototype/app/routes.ts
+++ b/template/prototype/app/routes.ts
@@ -1,10 +1,7 @@
 // app/routes.ts
-import { type RouteConfig, index, route } from '@react-router/dev/routes';
+import { type RouteConfig, index } from '@react-router/dev/routes';
 
 const routes = [
-	route('dashboard', './demo/dashboard.tsx'),
-	route('employees', './demo/employees.tsx'),
-	route('admin', './demo/admin.tsx'),
 	index('./routes/_index.tsx'),
 ] satisfies RouteConfig;
 
diff --git a/template/prototype/app/routes/_index.tsx b/template/prototype/app/routes/_index.tsx
index 259a1e7..c15ceb7 100644
--- a/template/prototype/app/routes/_index.tsx
+++ b/template/prototype/app/routes/_index.tsx
@@ -1,16 +1,44 @@
 import type { MetaFunction } from 'react-router';
 
 export const meta: MetaFunction = () => {
-	return [{ title: 'PLANNING STACK TEMPLATE Prototype' }];
+  return [{ title: 'PLANNING STACK TEMPLATE Prototype' }];
 };
 
 export default function Index() {
-	return (
-		<div className="font-sans p-4">
-			<h1 className="text-3xl mb-3">PLANNING STACK TEMPLATE Prototype</h1>
-			<p>Dies ist ein klickbarer Prototyp für die PLANNING STACK TEMPLATE-Anwendung.</p>
-			<p>Es dient zum Austesten von Anwendungsfällen und Prozessen.</p>
-			<p>Alle Daten sind synthetisch und es gibt keinen Zugriff auf ein Backend.</p>
-		</div>
-	);
+  return (
+    <div className="grid gap-6">
+      <section className="rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <h2 className="text-3xl font-semibold tracking-tight">Start with a blank product shell</h2>
+        <p className="mt-3 max-w-2xl text-base text-muted-foreground">
+          This prototype is intentionally empty. Add your first route, connect your own API layer,
+          or use one of the optional examples as reference.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        <article className="rounded-2xl border border-border bg-background p-6">
+          <h3 className="text-lg font-medium">Prototype</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Replace this landing page with the first user flow you want to validate.
+          </p>
+        </article>
+
+        <article className="rounded-2xl border border-border bg-background p-6">
+          <h3 className="text-lg font-medium">Mocks</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            The base project ships with starter-safe mock data and MSW packages that build without
+            demo entities.
+          </p>
+        </article>
+
+        <article className="rounded-2xl border border-border bg-background p-6">
+          <h3 className="text-lg font-medium">Examples</h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            If you generated an example, open the matching folder under <code>examples/</code> and
+            run it independently.
+          </p>
+        </article>
+      </section>
+    </div>
+  );
 }
diff --git a/template/prototype/vite.config.ts b/template/prototype/vite.config.ts
index d89a387..2df0ebb 100644
--- a/template/prototype/vite.config.ts
+++ b/template/prototype/vite.config.ts
@@ -8,15 +8,7 @@ export default defineConfig({
 		preserveSymlinks: false,
 	},
 	optimizeDeps: {
-		exclude:
-			process.env.NODE_ENV === 'development'
-				? [
-						'@repo/msw/medium',
-						'@repo/msw/handlers',
-						'@repo/api/stammdaten/enums',
-						'@repo/ui',
-					]
-				: [],
+		exclude: process.env.NODE_ENV === 'development' ? ['@repo/ui'] : [],
 	},
 	server: {
 		watch: {
diff --git a/tests/generator.test.mjs b/tests/generator.test.mjs
index fb1c8e0..79f6eef 100644
--- a/tests/generator.test.mjs
+++ b/tests/generator.test.mjs
@@ -58,6 +58,49 @@ describe('create-tinker-stack generator', () => {
     5 * 60 * 1000
   );
 
+  test(
+    'scaffolds an independent named example without adding it to the root workspace graph',
+    async () => {
+      const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'tinker-stack-'));
+      const appFolder = 'demo-app';
+      const projectDir = path.join(tempRoot, appFolder);
+      const exampleDir = path.join(projectDir, 'examples', 'react-router');
+
+      try {
+        await runCommand('node', [CLI_ENTRY, '--example', 'react-router', appFolder], {
+          env: {
+            ...process.env,
+            CI: '1',
+            SKIP_SETUP: '1',
+            SKIP_FORMAT: '1'
+          },
+          cwd: tempRoot
+        });
+
+        const packageJson = JSON.parse(await readFile(path.join(projectDir, 'package.json'), 'utf8'));
+        expect(packageJson.name).toBe('demo-title');
+        expect(packageJson.workspaces).not.toContain('examples');
+        expect(packageJson.workspaces).not.toContain('examples/*');
+
+        const examplePackageJson = JSON.parse(
+          await readFile(path.join(exampleDir, 'package.json'), 'utf8')
+        );
+        expect(examplePackageJson.scripts).toHaveProperty('build');
+        expect(examplePackageJson.scripts).toHaveProperty('build:data');
+
+        const exampleReadme = await readFile(path.join(exampleDir, 'README.md'), 'utf8');
+        expect(exampleReadme).toContain('self-contained React Router example');
+        expect(exampleReadme).toContain('delete the entire example directory');
+
+        await runCommand('npm', ['install'], { cwd: projectDir });
+        await runCommand('npm', ['run', 'build'], { cwd: projectDir });
+      } finally {
+        await rm(tempRoot, { recursive: true, force: true });
+      }
+    },
+    5 * 60 * 1000
+  );
+
   test(
     'scaffolds into the current working directory when no target is provided',
     async () => {

From c9287f76180b398079a4f1e704f6260637b8c4d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Fri, 27 Mar 2026 16:49:41 +0100
Subject: [PATCH 3/7] cleanup

---
 CLAUDE.md                                     |  1 +
 template/docs/modules/ROOT/nav.adoc           |  2 +-
 template/docs/modules/ROOT/pages/login.adoc   | 63 ++-----------
 .../prototype/app/components/ui/avatar.tsx    | 45 ---------
 .../prototype/app/components/ui/button.tsx    | 50 ----------
 template/prototype/app/components/ui/card.tsx | 55 -----------
 .../app/components/ui/empty-state.tsx         |  1 -
 .../prototype/app/components/ui/table.tsx     | 94 -------------------
 8 files changed, 12 insertions(+), 299 deletions(-)
 create mode 100644 CLAUDE.md
 delete mode 100644 template/prototype/app/components/ui/avatar.tsx
 delete mode 100644 template/prototype/app/components/ui/button.tsx
 delete mode 100644 template/prototype/app/components/ui/card.tsx
 delete mode 100644 template/prototype/app/components/ui/empty-state.tsx
 delete mode 100644 template/prototype/app/components/ui/table.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..eef4bd2
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
\ No newline at end of file
diff --git a/template/docs/modules/ROOT/nav.adoc b/template/docs/modules/ROOT/nav.adoc
index f8c4bf7..171c4d4 100644
--- a/template/docs/modules/ROOT/nav.adoc
+++ b/template/docs/modules/ROOT/nav.adoc
@@ -5,7 +5,7 @@
 ** xref:architecture.adoc[Architektur]
 ** xref:monorepo.adoc[Monorepo]
 ** xref:prototype.adoc[Prototyp]
-** xref:mocks.adoc[Testdaten]
+** xref:mock-data.adoc[Testdaten]
 ** xref:design-system.adoc[Design System]
 ** xref:login.adoc[Login Flow]
 ** xref:tailwind.adoc[Tailwind] 
\ No newline at end of file
diff --git a/template/docs/modules/ROOT/pages/login.adoc b/template/docs/modules/ROOT/pages/login.adoc
index 627d3a5..4188277 100644
--- a/template/docs/modules/ROOT/pages/login.adoc
+++ b/template/docs/modules/ROOT/pages/login.adoc
@@ -3,60 +3,17 @@
 
 == Überblick
 
-Im Prototyp wird ein vereinfachtes Login-System verwendet:
+Der Prototyp enthält noch kein Login-System.
+Implementiere eine Authentifizierung passend zu deinem Projekt, z.B.:
 
-* Cookie-basierte Authentifizierung
-* Mock Implementation mit MSW
-* Vordefinierte Test-Benutzer
+* Cookie-basierte Authentifizierung mit MSW Handlers
+* JWT oder Session Tokens
+* Integration mit einem IAM-System
 
-== Implementation
+== Nächste Schritte
 
-=== Mock Service Worker
+1. Definiere Test-Benutzer und Rollen in `@repo/mocks`
+2. Erstelle MSW Handler für Login/Logout Endpoints
+3. Implementiere Auth-Prüfung in geschützten Handlers
 
-[plantuml,mock-auth,svg]
-----
-@startuml
-participant "Browser" as Browser
-participant "MSW Handler" as MSW
-database "Mock Data" as Data
-
-Browser -> MSW: POST /auth/login
-note right: Form Data mit Username
-MSW -> Data: Token lookup
-Data --> MSW: JWT Payload
-MSW -> MSW: Permissions aus\nRollen ermitteln
-MSW --> Browser: Set-Cookie: authToken
-@enduml
-----
-
-=== Test-Benutzer
-
-[cols="1,2,1"]
-|===
-|Persona |Organisation |Permissions
-
-|Administrator
-|Primär-Organisation
-|Alle Org-Berechtigungen
-
-|===
-
-== Authentifizierung
-
-Die Auth-Prüfung erfolgt in den MSW Handlers:
-
-[source,typescript]
-----
-// Beispiel eines geschützten msw Endpoints
-http.post('/reports/approve', async ({ cookies }) => {
-  const { sub, orgId, permissions } = auth(cookies);
-  // ... Handler Implementation
-});
-----
-
-== Hinweise
-
-* Diese Implementation ist nur für den Prototyp, sollte aber ähnlich sein zu der späteren Produktiv-Implementation
-* Keine echte Sicherheit
-* Dient nur der Feature-Entwicklung
-* Produktive Implementation erfolgt später mit IAM
\ No newline at end of file
+TIP: Das optionale Example-Projekt (`examples/`) enthält eine vollständige Login-Implementierung mit Mock-Benutzern als Referenz.
diff --git a/template/prototype/app/components/ui/avatar.tsx b/template/prototype/app/components/ui/avatar.tsx
deleted file mode 100644
index 4261172..0000000
--- a/template/prototype/app/components/ui/avatar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
-
-import { cn } from '#/lib/utils';
-
-const Avatar = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-		{...props}
-	/>
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn('aspect-square h-full w-full', className)}
-		{...props}
-	/>
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			'flex h-full w-full items-center justify-center rounded-full bg-muted',
-			className,
-		)}
-		{...props}
-	/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarFallback, AvatarImage };
diff --git a/template/prototype/app/components/ui/button.tsx b/template/prototype/app/components/ui/button.tsx
deleted file mode 100644
index bad4600..0000000
--- a/template/prototype/app/components/ui/button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '#/lib/utils';
-
-const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-				destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-				outline:
-					'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-				secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
-			size: {
-				default: 'h-9 px-4 py-2',
-				sm: 'h-8 rounded-md px-3 text-xs',
-				lg: 'h-10 rounded-md px-8',
-				icon: 'h-9 w-9',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default',
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button';
-		return (
-			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-		);
-	},
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/template/prototype/app/components/ui/card.tsx b/template/prototype/app/components/ui/card.tsx
deleted file mode 100644
index 0d36f76..0000000
--- a/template/prototype/app/components/ui/card.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '#/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
-			{...props}
-		/>
-	),
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-	),
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('font-semibold leading-none tracking-tight', className)}
-			{...props}
-		/>
-	),
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-	),
-);
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-	),
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-	),
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/template/prototype/app/components/ui/empty-state.tsx b/template/prototype/app/components/ui/empty-state.tsx
deleted file mode 100644
index 2df6fea..0000000
--- a/template/prototype/app/components/ui/empty-state.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { EmptyState } from '@repo/ui/empty-state';
diff --git a/template/prototype/app/components/ui/table.tsx b/template/prototype/app/components/ui/table.tsx
deleted file mode 100644
index 0fdee6a..0000000
--- a/template/prototype/app/components/ui/table.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '#/lib/utils';
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-	({ className, ...props }, ref) => (
-		<div className="relative w-full overflow-auto">
-			<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-		</div>
-	),
-);
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-	<tfoot
-		ref={ref}
-		className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-		{...props}
-	/>
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-	({ className, ...props }, ref) => (
-		<tr
-			ref={ref}
-			className={cn(
-				'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
-	HTMLTableCellElement,
-	React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-	<th
-		ref={ref}
-		className={cn(
-			'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-			className,
-		)}
-		{...props}
-	/>
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
-	HTMLTableCellElement,
-	React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-	<td
-		ref={ref}
-		className={cn(
-			'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-			className,
-		)}
-		{...props}
-	/>
-));
-TableCell.displayName = 'TableCell';
-
-const TableCaption = React.forwardRef<
-	HTMLTableCaptionElement,
-	React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-	<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
-));
-TableCaption.displayName = 'TableCaption';
-
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

From e1ea626d7b48445167879f5665c6f7d39e719a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Fri, 27 Mar 2026 16:51:43 +0100
Subject: [PATCH 4/7] update transitive vulnerable dependencies

---
 package-lock.json | 344 +++++++++++++++++++++++++++++++---------------
 1 file changed, 231 insertions(+), 113 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d032fa1..47cd134 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -835,9 +835,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
-      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz",
+      "integrity": "sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==",
       "cpu": [
         "arm"
       ],
@@ -849,9 +849,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
-      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.0.tgz",
+      "integrity": "sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==",
       "cpu": [
         "arm64"
       ],
@@ -863,9 +863,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
-      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.0.tgz",
+      "integrity": "sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==",
       "cpu": [
         "arm64"
       ],
@@ -877,9 +877,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
-      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.0.tgz",
+      "integrity": "sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==",
       "cpu": [
         "x64"
       ],
@@ -891,9 +891,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
-      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.0.tgz",
+      "integrity": "sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==",
       "cpu": [
         "arm64"
       ],
@@ -905,9 +905,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
-      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.0.tgz",
+      "integrity": "sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==",
       "cpu": [
         "x64"
       ],
@@ -919,13 +919,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
-      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.0.tgz",
+      "integrity": "sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -933,13 +936,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
-      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.0.tgz",
+      "integrity": "sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -947,13 +953,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
-      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.0.tgz",
+      "integrity": "sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -961,13 +970,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
-      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.0.tgz",
+      "integrity": "sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -975,13 +987,33 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
-      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.0.tgz",
+      "integrity": "sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.0.tgz",
+      "integrity": "sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==",
       "cpu": [
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -989,13 +1021,33 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
-      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.0.tgz",
+      "integrity": "sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.0.tgz",
+      "integrity": "sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1003,13 +1055,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
-      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.0.tgz",
+      "integrity": "sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==",
       "cpu": [
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1017,13 +1072,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
-      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.0.tgz",
+      "integrity": "sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==",
       "cpu": [
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1031,13 +1089,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
-      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.0.tgz",
+      "integrity": "sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==",
       "cpu": [
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1045,13 +1106,16 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.0.tgz",
+      "integrity": "sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1059,23 +1123,40 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
-      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.0.tgz",
+      "integrity": "sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.0.tgz",
+      "integrity": "sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
-      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.0.tgz",
+      "integrity": "sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==",
       "cpu": [
         "arm64"
       ],
@@ -1087,9 +1168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
-      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.0.tgz",
+      "integrity": "sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==",
       "cpu": [
         "arm64"
       ],
@@ -1101,9 +1182,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
-      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.0.tgz",
+      "integrity": "sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==",
       "cpu": [
         "ia32"
       ],
@@ -1115,9 +1196,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.0.tgz",
+      "integrity": "sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==",
       "cpu": [
         "x64"
       ],
@@ -1129,9 +1210,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
-      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.0.tgz",
+      "integrity": "sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==",
       "cpu": [
         "x64"
       ],
@@ -1384,9 +1465,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2241,9 +2322,9 @@
       }
     },
     "node_modules/fast-xml-parser": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.6.tgz",
-      "integrity": "sha512-QNI3sAvSvaOiaMl8FYU4trnEzCwiRr8XMWgAHzlrWpTSj+QaCSvOf1h82OEP1s4hiAXhnbXSyFWCf4ldZzZRVA==",
+      "version": "5.5.9",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.9.tgz",
+      "integrity": "sha512-jldvxr1MC6rtiZKgrFnDSvT8xuH+eJqxqOBThUVjYrxssYTo1avZLGql5l0a0BAERR01CadYzZ83kVEkbyDg+g==",
       "dev": true,
       "funding": [
         {
@@ -2253,12 +2334,30 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "strnum": "^2.1.2"
+        "fast-xml-builder": "^1.1.4",
+        "path-expression-matcher": "^1.2.0",
+        "strnum": "^2.2.2"
       },
       "bin": {
         "fxparser": "src/cli/cli.js"
       }
     },
+    "node_modules/fast-xml-parser/node_modules/fast-xml-builder": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.4.tgz",
+      "integrity": "sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "path-expression-matcher": "^1.1.3"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2589,9 +2688,9 @@
       "license": "ISC"
     },
     "node_modules/handlebars": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
-      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.9.tgz",
+      "integrity": "sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3189,9 +3288,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -3414,6 +3513,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.2.0.tgz",
+      "integrity": "sha512-DwmPWeFn+tq7TiyJ2CxezCAirXjFxvaiD03npak3cRjlP9+OjTmSy1EpIrEbh+l6JgUundniloMLDQ/6VTdhLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -3468,9 +3583,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3744,9 +3859,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
-      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "version": "4.60.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
+      "integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3760,28 +3875,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.53.3",
-        "@rollup/rollup-android-arm64": "4.53.3",
-        "@rollup/rollup-darwin-arm64": "4.53.3",
-        "@rollup/rollup-darwin-x64": "4.53.3",
-        "@rollup/rollup-freebsd-arm64": "4.53.3",
-        "@rollup/rollup-freebsd-x64": "4.53.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
-        "@rollup/rollup-linux-arm64-musl": "4.53.3",
-        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
-        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-musl": "4.53.3",
-        "@rollup/rollup-openharmony-arm64": "4.53.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
-        "@rollup/rollup-win32-x64-gnu": "4.53.3",
-        "@rollup/rollup-win32-x64-msvc": "4.53.3",
+        "@rollup/rollup-android-arm-eabi": "4.60.0",
+        "@rollup/rollup-android-arm64": "4.60.0",
+        "@rollup/rollup-darwin-arm64": "4.60.0",
+        "@rollup/rollup-darwin-x64": "4.60.0",
+        "@rollup/rollup-freebsd-arm64": "4.60.0",
+        "@rollup/rollup-freebsd-x64": "4.60.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.0",
+        "@rollup/rollup-linux-arm64-musl": "4.60.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.0",
+        "@rollup/rollup-linux-loong64-musl": "4.60.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.0",
+        "@rollup/rollup-linux-x64-gnu": "4.60.0",
+        "@rollup/rollup-linux-x64-musl": "4.60.0",
+        "@rollup/rollup-openbsd-x64": "4.60.0",
+        "@rollup/rollup-openharmony-arm64": "4.60.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.0",
+        "@rollup/rollup-win32-x64-gnu": "4.60.0",
+        "@rollup/rollup-win32-x64-msvc": "4.60.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -4054,9 +4172,9 @@
       }
     },
     "node_modules/strnum": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
-      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.2.tgz",
+      "integrity": "sha512-DnR90I+jtXNSTXWdwrEy9FakW7UX+qUZg28gj5fk2vxxl7uS/3bpI4fjFYVmdK9etptYBPNkpahuQnEwhwECqA==",
       "dev": true,
       "funding": [
         {
@@ -4526,9 +4644,9 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
-      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
       "dev": true,
       "license": "ISC",
       "bin": {

From ce430d1a2e1cc404705785be3623c407b8c3d2ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Fri, 27 Mar 2026 16:55:11 +0100
Subject: [PATCH 5/7] translated doc to en

---
 CONTRIBUTING.md                               |  2 +-
 template/docs/modules/ROOT/nav.adoc           | 12 +--
 .../docs/modules/ROOT/pages/architecture.adoc | 68 ++++++++--------
 .../modules/ROOT/pages/design-system.adoc     | 42 +++++-----
 .../modules/ROOT/pages/documentation.adoc     | 64 +++++++--------
 .../modules/ROOT/pages/getting-started.adoc   | 79 +++++++++----------
 template/docs/modules/ROOT/pages/login.adoc   | 24 +++---
 .../docs/modules/ROOT/pages/mock-data.adoc    | 32 ++++----
 .../docs/modules/ROOT/pages/monorepo.adoc     | 49 ++++++------
 .../docs/modules/ROOT/pages/prototype.adoc    | 40 +++++-----
 .../docs/modules/ROOT/pages/tailwind.adoc     | 12 +--
 .../docs/modules/ROOT/partials/monorepo.puml  | 36 ++++-----
 12 files changed, 226 insertions(+), 234 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b908e72..45c82f3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,5 +6,5 @@
 To verify the generator before publishing:
 
 1. Run `npm pack` in this repository to produce a tarball (for example `create-tinker-stack-0.2.6.tgz`).
-2. In a temporary directory, execute `npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.6.tgz`.
+2. In a temporary directory, execute `npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.8.tgz`.
     - Replace the path with the absolute path to the tarball from step 1 (npm `create` does not currently support `file:` specifiers).
diff --git a/template/docs/modules/ROOT/nav.adoc b/template/docs/modules/ROOT/nav.adoc
index 171c4d4..fcf89b2 100644
--- a/template/docs/modules/ROOT/nav.adoc
+++ b/template/docs/modules/ROOT/nav.adoc
@@ -1,11 +1,11 @@
 :product: PLANNING STACK TEMPLATE
 
-* xref:index.adoc[Übersicht]
-** xref:getting-started.adoc[Erste Schritte]
-** xref:architecture.adoc[Architektur]
+* xref:index.adoc[Overview]
+** xref:getting-started.adoc[Getting Started]
+** xref:architecture.adoc[Architecture]
 ** xref:monorepo.adoc[Monorepo]
-** xref:prototype.adoc[Prototyp]
-** xref:mock-data.adoc[Testdaten]
+** xref:prototype.adoc[Prototype]
+** xref:mock-data.adoc[Mock Data]
 ** xref:design-system.adoc[Design System]
 ** xref:login.adoc[Login Flow]
-** xref:tailwind.adoc[Tailwind] 
\ No newline at end of file
+** xref:tailwind.adoc[Tailwind]
diff --git a/template/docs/modules/ROOT/pages/architecture.adoc b/template/docs/modules/ROOT/pages/architecture.adoc
index 230498d..df7e4cb 100644
--- a/template/docs/modules/ROOT/pages/architecture.adoc
+++ b/template/docs/modules/ROOT/pages/architecture.adoc
@@ -1,65 +1,64 @@
-= Architektur
+= Architecture
 :experimental:
 :plantuml-server-url: http://www.plantuml.com/plantuml
 :source-highlighter: highlight.js
 
-== Überblick
+== Overview
 
-Das PLANNING STACK TEMPLATE Frontend ist als Monorepo aufgebaut. Der Fokus liegt auf:
+The PLANNING STACK TEMPLATE frontend is structured as a monorepo. The focus is on:
 
-* schneller Iteration
-* klar getrennten Paketen
-* Typsicherheit durch TypeScript
-* optionalen, unabhängigen Referenzbeispielen
+* fast iteration
+* clearly separated packages
+* type safety through TypeScript
+* optional, independent reference examples
 
-== Architekturprinzipien
+== Architecture principles
 
-=== Starter zuerst
+=== Starter first
 
-Das Basisprojekt soll sofort installierbar und buildbar sein, ohne eine vorgefertigte Demo zu
-erzwingen.
+The base project should be immediately installable and buildable without forcing a pre-built demo.
 
-=== Prototypen-getriebene Entwicklung
+=== Prototype-driven development
 
-Der empfohlene Ablauf bleibt:
+The recommended workflow remains:
 
-1. Feature zuerst im Prototyp modellieren
-2. Feedback einholen
-3. Validierte Muster in die produktive Anwendung übernehmen
+1. Model the feature in the prototype first
+2. Gather feedback
+3. Carry validated patterns into the production application
 
-=== Unabhängige Beispiele
+=== Independent examples
 
-Optionale Beispiele liegen ausserhalb der Root-Workspaces in `examples/<name>/`.
+Optional examples live outside the root workspaces under `examples/<name>/`.
 
-Das bedeutet:
+This means:
 
-* keine automatische Teilnahme an `npm run build`
-* keine Kopplung an die Root-Turbo-Pipeline
-* sichere Löschbarkeit ohne Folgeschäden im Hauptprojekt
+* no automatic participation in `npm run build`
+* no coupling to the root Turbo pipeline
+* safe to delete without side effects in the main project
 
-== Technische Architektur
+== Technical architecture
 
-=== Frontend Stack
+=== Frontend stack
 
 [cols="1,2,2"]
 |===
-|Technologie |Verwendung |Begründung
+|Technology |Usage |Rationale
 
 |React
-|UI Framework
-|Etabliert, grosses Ökosystem
+|UI framework
+|Established, large ecosystem
 
 |React Router
-|Starter-Prototyp
-|Schnelles Routing und gute DX
+|Starter prototype
+|Fast routing and good DX
 
 |Tailwind
-|CSS Framework
-|Schnelle, konsistente UI-Entwicklung
+|CSS framework
+|Fast, consistent UI development
 
 |TypeScript
-|Programmiersprache
-|Typsicherheit und Refactoring-Sicherheit
+|Programming language
+|Type safety and refactoring confidence
 |===
 
 === Mocking
@@ -78,5 +77,4 @@ App --> Browser: Render
 @enduml
 ----
 
-Die Basis liefert nur eine starter-sichere MSW-Schicht. Projektspezifische Handler und Datensätze
-werden später ergänzt oder aus einem optionalen Beispiel übernommen.
+The base provides only a starter-safe MSW layer. Project-specific handlers and datasets are added later or copied from an optional example.
diff --git a/template/docs/modules/ROOT/pages/design-system.adoc b/template/docs/modules/ROOT/pages/design-system.adoc
index ffa094c..4ea71b8 100644
--- a/template/docs/modules/ROOT/pages/design-system.adoc
+++ b/template/docs/modules/ROOT/pages/design-system.adoc
@@ -1,13 +1,13 @@
 = Design System
 :experimental:
 
-== Überblick
+== Overview
 
 
-== Komponenten
+== Components
 
 
-=== Verwendung
+=== Usage
 
 [source,tsx]
 ----
@@ -25,33 +25,33 @@ export function IconButton({ icon: Icon }) {
 
 == Theming
 
-=== Figma Integration
+=== Figma integration
 
-* Designs aus Figma Projekt
-* Farben und Typography synchron halten
-* Komponenten-Patterns übernehmen
+* Designs from Figma project
+* Keep colors and typography in sync
+* Adopt component patterns
 
-=== Tailwind Konfiguration
+=== Tailwind configuration
 
-* Custom Colors aus CI
-* Spacing und Typography nach Design System
-* Erweiterbare Struktur
+* Custom colors from CI
+* Spacing and typography per design system
+* Extensible structure
 
-Siehe auch xref:tailwind.adoc[Tailwind Dokumentation] für Best Practices.
+See also xref:tailwind.adoc[Tailwind documentation] for best practices.
 
-== Komponenten entwickeln
+== Developing components
 
 === Workflow
 
-1. Figma Design reviewen
-2. shadcn/ui Komponente als Basis nehmen
-3. Mit Tailwind UI Patterns abgleichen
-4. An Design System anpassen
-5. Dokumentation erstellen
+1. Review Figma design
+2. Use a shadcn/ui component as a base
+3. Align with Tailwind UI patterns
+4. Adapt to the design system
+5. Write documentation
 
 === Guidelines
 
 * Accessibility first
-* Responsive Design
-* Konsistente Props API
-* Dokumentation in Storybook
+* Responsive design
+* Consistent props API
+* Documentation in Storybook
diff --git a/template/docs/modules/ROOT/pages/documentation.adoc b/template/docs/modules/ROOT/pages/documentation.adoc
index 4478161..211030c 100644
--- a/template/docs/modules/ROOT/pages/documentation.adoc
+++ b/template/docs/modules/ROOT/pages/documentation.adoc
@@ -1,33 +1,33 @@
-= Dokumentation
+= Documentation
 :experimental:
 :url-antora-docs: https://docs.antora.org/antora/latest/
 :url-kroki-docs: https://docs.kroki.io/kroki/
 
-== Überblick
+== Overview
 
-Die Entwicklerdokumentation wird mit {url-antora-docs}[Antora] erstellt und über GitLab Pages bereitgestellt.
+The developer documentation is built with {url-antora-docs}[Antora] and published via GitLab Pages.
 
-* URL: 
-* Automatisches Deployment bei Push auf `main`
-* Versionierung über Git
+* URL:
+* Automatic deployment on push to `main`
+* Versioning via Git
 
-== Struktur
+== Structure
 
 [source]
 ----
 docs/
-├── antora.yml          # Antora Projekt-Konfiguration
-├── antora-playbook.yml # Site Generator Konfiguration
+├── antora.yml          # Antora project configuration
+├── antora-playbook.yml # Site generator configuration
 └── modules/
     └── ROOT/
         ├── nav.adoc    # Navigation
-        ├── pages/      # Dokumentationsseiten
-        └── partials/   # Wiederverwendbare Inhalte
+        ├── pages/      # Documentation pages
+        └── partials/   # Reusable content
 ----
 
-== Diagramme
+== Diagrams
 
-Die Dokumentation unterstützt verschiedene Diagrammtypen über {url-kroki-docs}[Kroki]:
+The documentation supports various diagram types via {url-kroki-docs}[Kroki]:
 
 === PlantUML
 
@@ -45,49 +45,49 @@ package "Frontend" {
 ----
 ----
 
-=== Weitere Diagrammtypen
+=== Other diagram types
 
 * Mermaid
-* C4 (mit PlantUML)
+* C4 (with PlantUML)
 * GraphViz
 * ...
 
-Siehe {url-kroki-docs}#diagram-types[Kroki Diagram Types] für eine vollständige Liste.
+See {url-kroki-docs}#diagram-types[Kroki Diagram Types] for a complete list.
 
-== Lokale Entwicklung
+== Local development
 
-=== Voraussetzungen
+=== Prerequisites
 
 * Node.js >= 22.0.0
 * npm >= 10.0.0
 
-=== Dokumentation lokal generieren
+=== Generate documentation locally
 
 [source,bash]
 ----
-# Im docs Verzeichnis
+# Inside the docs directory
 npm run docs
 ----
 
-Die generierte Dokumentation ist dann unter `docs/build` verfügbar.
+The generated documentation will be available under `docs/build`.
 
-== Best Practices
+== Best practices
 
-* Neue Features parallel zur Implementierung dokumentieren
-* Diagramme für komplexe Zusammenhänge nutzen
-* Wiederverwendbare Inhalte in `partials` auslagern
-* Interne Links mit `xref:` erstellen
+* Document new features in parallel with implementation
+* Use diagrams for complex relationships
+* Extract reusable content into `partials`
+* Use `xref:` for internal links
 
 == Deployment
 
-Das Deployment erfolgt automatisch über die GitLab CI/CD Pipeline:
+Deployment is handled automatically via the GitLab CI/CD pipeline:
 
-* Trigger: Push auf `main`
-* Output: Statische Seiten
+* Trigger: Push to `main`
+* Output: Static pages
 * Hosting: GitLab Pages
 
-== Nützliche Links
+== Useful links
 
-* {url-antora-docs}[Antora Dokumentation]
+* {url-antora-docs}[Antora documentation]
 * {url-antora-docs}asciidoc/page/[AsciiDoc Syntax Guide]
-* {url-kroki-docs}[Kroki Dokumentation] 
\ No newline at end of file
+* {url-kroki-docs}[Kroki documentation]
diff --git a/template/docs/modules/ROOT/pages/getting-started.adoc b/template/docs/modules/ROOT/pages/getting-started.adoc
index 12b068f..917d18c 100644
--- a/template/docs/modules/ROOT/pages/getting-started.adoc
+++ b/template/docs/modules/ROOT/pages/getting-started.adoc
@@ -1,16 +1,16 @@
-= Erste Schritte
+= Getting Started
 :experimental:
 :icons: font
 
-== Voraussetzungen
+== Prerequisites
 
-Für die Entwicklung werden folgende Tools benötigt:
+The following tools are required for development:
 
 * Node.js >= 22
 * npm >= 10
 * Git
 
-== Repository klonen
+== Clone the repository
 
 [source,bash]
 ----
@@ -20,76 +20,75 @@ cd planning-stack-template
 
 == Installation
 
-Das Projekt verwendet npm Workspaces. Alle Abhängigkeiten können mit einem Befehl installiert werden:
+The project uses npm Workspaces. All dependencies can be installed with a single command:
 
 [source,bash]
 ----
 npm install
 ----
 
-== Entwicklungsserver starten
+== Start the development server
 
-Der Entwicklungsserver kann direkt im Root-Verzeichnis gestartet werden:
+The development server can be started directly from the root directory:
 
 [source,bash]
 ----
 npm run dev
 ----
 
-Dies startet den Prototypen und die Watcher für die abhängigen Pakete.
+This starts the prototype and the watchers for dependent packages.
 
-Die Anwendung ist dann unter http://localhost:5173 erreichbar.
+The application is available at http://localhost:5173.
 
-== Mock-Daten
+== Mock data
 
-Der Starter liefert absichtlich leere Mock-Daten. Sobald eigene Generatoren vorhanden sind, kann das
-JSON wie gewohnt gebaut werden:
+The starter ships with intentionally empty mock data. Once your own generators are in place, the JSON can be built as usual:
 
 [source,bash]
 ----
 npm run build:data
 ----
 
-== Optionale Beispiele
+== Optional examples
 
-Falls das Projekt mit einem Beispiel generiert wurde, liegt dieses unter `examples/<name>/`.
+If the project was generated with an example, it is located under `examples/<name>/`.
 
-Die Beispiele sind unabhängig vom Hauptprojekt:
+Examples are independent from the main project:
 
-* Sie sind nicht Teil der Root-Workspaces
-* Sie werden nicht automatisch von Turborepo gebaut
-* Sie müssen im jeweiligen Beispielordner separat installiert werden
+* They are not part of the root workspaces
+* They are not automatically built by Turborepo
+* They must be installed separately inside their own folder
 
-== Projektstruktur
+== Project structure
 
 [source]
 ----
 .
-├── api/             # Domain Types & Enums
+├── api/             # Domain types & enums
 ├── config/
-│   ├── eslint/      # ESLint Konfigurationen
-│   ├── typescript/  # Typescript Konfigurationen
-├── docs/            # Dokumentation
-├── frontend/        # Platzhalter für das produktive Frontend
-├── mocks/           # Starter für generierte Mock-Daten
-├── msw/             # Starter für MSW-Handler
-├── prototype/       # Klickbarer UX-Prototyp
-└── ui/              # Design-System Komponenten
+│   ├── eslint/      # ESLint configurations
+│   ├── typescript/  # TypeScript configurations
+├── docs/            # Documentation
+├── frontend/        # Placeholder for the production frontend
+├── mocks/           # Starter for generated mock data
+├── msw/             # Starter for MSW handlers
+├── prototype/       # Clickable UX prototype
+└── ui/              # Design system components
 ----
 
-== Typische Entwicklungsabläufe
+== Typical development workflows
 
-=== Erste Produktstrecke im Prototyp entwickeln
+=== Build the first product flow in the prototype
 
-1. Feature-Branch erstellen
-2. Route in `prototype/app/routes.ts` ergänzen
-3. UI im Prototyp aufbauen
-4. Falls nötig Mock-Daten und MSW-Handler ergänzen
-5. Validieren und iterieren
+1. Create a feature branch
+2. Add a route in `prototype/app/routes.ts`
+3. Build the UI in the prototype
+4. Add mock data and MSW handlers as needed
+5. Validate and iterate
 
-=== Optionales Beispiel untersuchen
+=== Explore an optional example
 
-1. In den entsprechenden `examples/<name>/` Ordner wechseln
-2. Dort `npm install` ausführen
-3. Beispiel lokal starten oder bauen
-4. Gewünschte Muster gezielt in das Hauptprojekt übernehmen
+1. Navigate into the `examples/<name>/` folder
+2. Run `npm install` there
+3. Start or build the example locally
+4. Copy the patterns you need into the main project
diff --git a/template/docs/modules/ROOT/pages/login.adoc b/template/docs/modules/ROOT/pages/login.adoc
index 4188277..a639ec3 100644
--- a/template/docs/modules/ROOT/pages/login.adoc
+++ b/template/docs/modules/ROOT/pages/login.adoc
@@ -1,19 +1,19 @@
-= Login Flow (Prototyp)
+= Login Flow (Prototype)
 :experimental:
 
-== Überblick
+== Overview
 
-Der Prototyp enthält noch kein Login-System.
-Implementiere eine Authentifizierung passend zu deinem Projekt, z.B.:
+The prototype does not include a login system yet.
+Implement authentication that fits your project, for example:
 
-* Cookie-basierte Authentifizierung mit MSW Handlers
-* JWT oder Session Tokens
-* Integration mit einem IAM-System
+* Cookie-based authentication with MSW handlers
+* JWT or session tokens
+* Integration with an IAM system
 
-== Nächste Schritte
+== Next steps
 
-1. Definiere Test-Benutzer und Rollen in `@repo/mocks`
-2. Erstelle MSW Handler für Login/Logout Endpoints
-3. Implementiere Auth-Prüfung in geschützten Handlers
+1. Define test users and roles in `@repo/mocks`
+2. Create MSW handlers for login/logout endpoints
+3. Implement auth checks in protected handlers
 
-TIP: Das optionale Example-Projekt (`examples/`) enthält eine vollständige Login-Implementierung mit Mock-Benutzern als Referenz.
+TIP: The optional example project (`examples/`) contains a complete login implementation with mock users as a reference.
diff --git a/template/docs/modules/ROOT/pages/mock-data.adoc b/template/docs/modules/ROOT/pages/mock-data.adoc
index 2e64d45..14c4461 100644
--- a/template/docs/modules/ROOT/pages/mock-data.adoc
+++ b/template/docs/modules/ROOT/pages/mock-data.adoc
@@ -1,27 +1,25 @@
-= Testdaten
+= Mock Data
 :experimental:
 
-== Überblick
+== Overview
 
-Das `@repo/mocks` Package ist im Starter absichtlich neutral gehalten.
+The `@repo/mocks` package is intentionally neutral in the starter.
 
-Die Default-Implementierung erzeugt leere Datensätze, damit `npm run build:data` sofort
-funktioniert, auch wenn noch keine Domänenmodelle definiert wurden.
+The default implementation produces empty datasets so that `npm run build:data` works immediately, even before any domain models have been defined.
 
-== Starter-Verhalten
+== Starter behavior
 
-* Presets für `small`, `medium` und `full` sind vorhanden
-* Der Generator liefert standardmässig ein leeres JSON-Objekt
-* Die Struktur kann später durch projektspezifische Generatoren ersetzt werden
+* Presets for `small`, `medium`, and `full` are present
+* The generator returns an empty JSON object by default
+* The structure can be replaced later with project-specific generators
 
-== Nächste Schritte
+== Next steps
 
-1. Eigene Domänentypen in `@repo/api` definieren
-2. Presets in `mocks/src/generators/config.ts` anpassen
-3. Datenlogik in `mocks/src/generators/dataset.ts` implementieren
-4. JSON mit `npm run build:data` erzeugen
+1. Define your own domain types in `@repo/api`
+2. Adjust presets in `mocks/src/generators/config.ts`
+3. Implement data logic in `mocks/src/generators/dataset.ts`
+4. Generate JSON with `npm run build:data`
 
-== Beispiele
+== Examples
 
-Wenn ein optionales Beispiel mitgeneriert wurde, zeigt dessen `mocks/` Package eine vollständige
-Umsetzung in einem unabhängigen Kontext.
+If an optional example was generated alongside the project, its `mocks/` package shows a complete implementation in an independent context.
diff --git a/template/docs/modules/ROOT/pages/monorepo.adoc b/template/docs/modules/ROOT/pages/monorepo.adoc
index 06d3804..5ecfcb4 100644
--- a/template/docs/modules/ROOT/pages/monorepo.adoc
+++ b/template/docs/modules/ROOT/pages/monorepo.adoc
@@ -1,32 +1,32 @@
 = Monorepo
 
-Siehe auch README.md.
+See also README.md.
 
-Wir verwenden Turborepo mit kompilierten internen Paketen.
+We use Turborepo with compiled internal packages.
 
-Alle Pakete sind ESM-Module und verwenden den `@repo` Scope.
+All packages are ESM modules and use the `@repo` scope.
 
-== Apps und Pakete
+== Apps and packages
 
-- `@repo/frontend`: Platzhalter für das produktive Frontend
-- `@repo/prototype`: minimaler Prototyp für frühe UX-Validierung
-- `@repo/api`: Domain-Typen und Enums
-- `@repo/docs`: Antora-Dokumentation
-- `@repo/mocks`: Starter für generierte Mock-Daten
-- `@repo/msw`: Starter für MSW-Handler
-- `@repo/ui`: gemeinsame UI-Komponenten
-- `@repo/eslint-config`: `eslint`-Konfigurationen
-- `@repo/typescript-config`: gemeinsame `tsconfig.json`
+- `@repo/frontend`: Placeholder for the production frontend
+- `@repo/prototype`: Minimal prototype for early UX validation
+- `@repo/api`: Domain types and enums
+- `@repo/docs`: Antora documentation
+- `@repo/mocks`: Starter for generated mock data
+- `@repo/msw`: Starter for MSW handlers
+- `@repo/ui`: Shared UI components
+- `@repo/eslint-config`: `eslint` configurations
+- `@repo/typescript-config`: Shared `tsconfig.json`
 
 == Build
 
-Die Basis-Workspaces werden über Turborepo gebaut:
+The base workspaces are built via Turborepo:
 
 ```
 npm run build
 ```
 
-Weitere hilfreiche Kommandos:
+Other useful commands:
 
 ```
 npm run build:data
@@ -34,26 +34,25 @@ npm run build:msw
 npm run build:prototype
 ```
 
-== Entwicklung
+== Development
 
-Zum Starten der Basis-Entwicklung:
+To start base development:
 
 ```
 npm run dev
 ```
 
-== Optionale Beispiele
+== Optional examples
 
-Beispiele werden unter `examples/<name>/` erzeugt und absichtlich nicht in die Root-Workspaces
-aufgenommen.
+Examples are generated under `examples/<name>/` and intentionally excluded from the root workspaces.
 
-Dadurch:
+This means:
 
-* ignoriert Turborepo sie standardmässig
-* können sie separat installiert werden
-* können sie jederzeit gelöscht werden
+* Turborepo ignores them by default
+* They can be installed separately
+* They can be deleted at any time
 
-== Aufbau
+== Structure
 
 [plantuml,monorepo,svg,role=component]
 ----
diff --git a/template/docs/modules/ROOT/pages/prototype.adoc b/template/docs/modules/ROOT/pages/prototype.adoc
index 1c8100e..5520722 100644
--- a/template/docs/modules/ROOT/pages/prototype.adoc
+++ b/template/docs/modules/ROOT/pages/prototype.adoc
@@ -1,35 +1,33 @@
-= Prototyp
+= Prototype
 :experimental:
 
-== Zweck
+== Purpose
 
-Der Starter-Prototyp ist absichtlich minimal. Er dient als:
+The starter prototype is intentionally minimal. It serves as:
 
-* Einstiegspunkt für den ersten validierbaren User Flow
-* Ort für schnelle UX-Iterationen
-* Schale, in die eigene API- und Mock-Logik eingesetzt wird
+* An entry point for the first validatable user flow
+* A place for rapid UX iteration
+* A shell into which your own API and mock logic can be plugged
 
-== Technischer Aufbau
+== Technical setup
 
-* React Router SPA mit TypeScript
+* React Router SPA with TypeScript
 * Tailwind CSS
-* Lokales MSW-Bootstrapping
-* Starter-Landing-Page statt Demo-Workflow
+* Local MSW bootstrapping
+* Starter landing page instead of a demo workflow
 
-== Startpunkt
+== Starting point
 
-Der Prototyp enthält standardmässig:
+The prototype ships with:
 
-* eine Root-Layout-Datei
-* eine Landing-Route
-* MSW Pass-Through Handler
+* A root layout file
+* A landing route
+* MSW pass-through handlers
 
-Von dort aus kann die gewünschte Feature-Struktur aufgebaut werden.
+From here the desired feature structure can be built up.
 
-== Optionale Beispiele
+== Optional examples
 
-Wenn ein Beispiel generiert wurde, enthält dieses einen vollständigen Referenz-Flow in seinem
-eigenen Verzeichnis unter `examples/<name>/`.
+If an example was generated, it contains a complete reference flow in its own directory under `examples/<name>/`.
 
-Diese Beispiele gehören nicht zur Build-Pipeline des Root-Projekts und können unabhängig gestartet
-oder gelöscht werden.
+These examples are not part of the root project's build pipeline and can be started or deleted independently.
diff --git a/template/docs/modules/ROOT/pages/tailwind.adoc b/template/docs/modules/ROOT/pages/tailwind.adoc
index 2359bef..97adcae 100644
--- a/template/docs/modules/ROOT/pages/tailwind.adoc
+++ b/template/docs/modules/ROOT/pages/tailwind.adoc
@@ -1,12 +1,12 @@
-= Tailwind Tipps und Tricks
+= Tailwind Tips and Tricks
 
 Tailwind Docs: https://tailwindcss.com/docs/
 
 == State
-Die Seite soll barrierefrei sein, daher bietet es sich an, die States falls möglich
-auf den jeweiligen Aria-States zu basieren.
 
-.Beispiel Button
+The app should be accessible, so where possible it is advisable to base states on the corresponding ARIA attributes.
+
+.Example button
 ```tsx
     <Button
         key={section.id}
@@ -17,6 +17,6 @@ auf den jeweiligen Aria-States zu basieren.
     >
 ```
 
-Hier basiert der Button-State auf dem https://a11y-guidelines.orange.com/en/articles/using-aria-current-attribute/[`aria-current`] Attribut.
+Here the button state is based on the https://a11y-guidelines.orange.com/en/articles/using-aria-current-attribute/[`aria-current`] attribute.
 
-https://x.com/shadcn/status/1842329158879420864[Tailwind Tipps von shadcn]
+https://x.com/shadcn/status/1842329158879420864[Tailwind tips from shadcn]
diff --git a/template/docs/modules/ROOT/partials/monorepo.puml b/template/docs/modules/ROOT/partials/monorepo.puml
index c9b1664..fc2fee8 100644
--- a/template/docs/modules/ROOT/partials/monorepo.puml
+++ b/template/docs/modules/ROOT/partials/monorepo.puml
@@ -18,25 +18,25 @@ package "PLANNING STACK TEMPLATE Frontend Monorepo" {
   [config/typescript]<<package>> as typescriptConfig
 }
 
-prototype --> api : verwendet
-prototype --> mockApi : verwendet
-prototype --> ui : verwendet
+prototype --> api : uses
+prototype --> mockApi : uses
+prototype --> ui : uses
 
-frontend --> api : verwendet
-frontend --> mockApi : verwendet
-frontend --> ui : verwendet
+frontend --> api : uses
+frontend --> mockApi : uses
+frontend --> ui : uses
 
-mockApi --> mockData : verwendet
-mockApi --> api : verwendet
-mockData --> api : verwendet
+mockApi --> mockData : uses
+mockApi --> api : uses
+mockData --> api : uses
 
-note top of prototype : PLANNING STACK TEMPLATE Anwendung Prototyp
-note top of frontend : PLANNING STACK TEMPLATE Anwendung Frontend
-note bottom of api : Domain-Typen und -Enums
-note bottom of mockData : Synthetische Daten
-note left of mockApi : Mock-API über Service-Worker
-note right of ui : React-Komponentenbibliothek
-note top of eslintConfig : ESLint-Konfigurationen
-note top of typescriptConfig : TypeScript-Konfigurationen
+note top of prototype : PLANNING STACK TEMPLATE Application Prototype
+note top of frontend : PLANNING STACK TEMPLATE Application Frontend
+note bottom of api : Domain types and enums
+note bottom of mockData : Synthetic data
+note left of mockApi : Mock API via Service Worker
+note right of ui : React component library
+note top of eslintConfig : ESLint configurations
+note top of typescriptConfig : TypeScript configurations
 
-@enduml
\ No newline at end of file
+@enduml

From 345983f4a243b00f97294b31094be8345cff263d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Fri, 27 Mar 2026 17:20:08 +0100
Subject: [PATCH 6/7] fix issues

---
 .gitignore                                    |  1 +
 CONTRIBUTING.md                               | 32 ++++++++++++++++---
 README.md                                     |  3 +-
 .../react-router/mocks/src/index.ts           |  1 +
 .../react-router/msw/src/handlers/demo.ts     |  4 +--
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index b2df8b8..d2ab412 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@ coverage
 # Build Outputs
 .next/
 out/
+my-project/
 build
 dist
 /.cache
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 45c82f3..8164503 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,10 +1,34 @@
 
 
-
 ## Local testing
 
 To verify the generator before publishing:
 
-1. Run `npm pack` in this repository to produce a tarball (for example `create-tinker-stack-0.2.6.tgz`).
-2. In a temporary directory, execute `npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.8.tgz`.
-    - Replace the path with the absolute path to the tarball from step 1 (npm `create` does not currently support `file:` specifiers).
+1. Run `npm pack` in this repository to produce a tarball (for example `create-tinker-stack-0.2.8.tgz`).
+2. Run the generator from this repository, passing a target directory as a positional argument:
+
+```bash
+npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.8.tgz my-project
+```
+
+This scaffolds a clean starter into `./my-project`.
+
+### With the example bundle
+
+Pass `--with-example` to also generate the `react-router` example, or name a specific example with `--example`:
+
+```bash
+# Default example (react-router)
+npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.8.tgz my-project --with-example
+
+# Named example
+npx --yes create-tinker-stack@file://$(pwd)/create-tinker-stack-0.2.8.tgz my-project --example react-router
+```
+
+The example is placed in `my-project/examples/react-router/` and is independent of the root workspace.
+
+### Notes
+
+- `$(pwd)` must be run from the repository root where the tarball was produced.
+- `npm create` does not currently support `file:` specifiers, so `npx` must be used.
+- Omit the target directory argument to scaffold into the current working directory.
diff --git a/README.md b/README.md
index 3ef9bc6..1af51f5 100644
--- a/README.md
+++ b/README.md
@@ -31,5 +31,4 @@ The generator is designed for multiple named examples. Today the repository incl
 
 - `react-router`
 
-Each example is installed and run separately from its own directory. The root project does not add
-example folders to its npm workspaces, so Turborepo ignores them by default.
+Each example is installed and run separately from its own directory. The root project does not add example folders to its npm workspaces, so Turborepo ignores them by default.
diff --git a/example-templates/react-router/mocks/src/index.ts b/example-templates/react-router/mocks/src/index.ts
index 11ec417..f68ed5e 100644
--- a/example-templates/react-router/mocks/src/index.ts
+++ b/example-templates/react-router/mocks/src/index.ts
@@ -1,4 +1,5 @@
 export type { JWTPayload } from '#/generators/auth.js';
+export type { IWorkingAt } from '#/generators/demo/types.js';
 export { datasetConfigs } from '#/generators/config.js';
 export type { DatasetConfig, DatasetPreset } from '#/generators/config.js';
 export { buildDataset } from '#/generators/dataset.js';
diff --git a/example-templates/react-router/msw/src/handlers/demo.ts b/example-templates/react-router/msw/src/handlers/demo.ts
index 43a3819..48fd0d8 100644
--- a/example-templates/react-router/msw/src/handlers/demo.ts
+++ b/example-templates/react-router/msw/src/handlers/demo.ts
@@ -2,7 +2,7 @@ import { http, HttpResponse, type HttpHandler } from 'msw';
 
 import type { AuthFunction } from '#/auth.js';
 import { serverDelay } from '#/utils.js';
-import type { Dataset, DatasetIndexes } from '@repo/mocks';
+import type { Dataset, DatasetIndexes, IWorkingAt } from '@repo/mocks';
 
 /**
  * The getHandlers function allows to inject the dependencies into the handlers
@@ -32,7 +32,7 @@ export function getHandlers({
 				});
 			}
 
-			const employees = workingAt.map(value => dataset.persons[value.personId]!);
+			const employees = workingAt.map((value: IWorkingAt) => dataset.persons[value.personId]!);
 			await serverDelay(employees.length, addDelay);
 			return HttpResponse.json(employees);
 		}),

From adafe44bcd441c897bd16cc85ccae6553ef3f572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Ba=CC=88chler?= <simon.baechler@ti8m.ch>
Date: Tue, 31 Mar 2026 15:29:19 +0200
Subject: [PATCH 7/7] all examples are copied by default

---
 README.md                | 13 ++++++++++---
 create/index.js          | 26 ++++++++++++++++++++++++--
 tests/generator.test.mjs | 37 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1af51f5..fd8a702 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ By default it generates a clean starter workspace with:
 - a minimal React Router prototype shell
 - shared `api`, `ui`, `msw`, and `mocks` packages
 - Turborepo, TypeScript, ESLint, Prettier, and Antora wiring
+- every example template copied into `examples/<name>/`
 
 The scaffold no longer ships a demo application in the base workspace.
 
@@ -16,14 +17,20 @@ The scaffold no longer ships a demo application in the base workspace.
 npm create tinker-stack@latest
 ```
 
-To include an independent example template:
+To generate the base workspace without any example folders:
+
+```bash
+npm create tinker-stack@latest -- --no-examples
+```
+
+To generate only specific example templates:
 
 ```bash
 npm create tinker-stack@latest -- --example react-router
 ```
 
-The selected examples are copied into `examples/<name>/` inside the generated project. They are
-self-contained and can be deleted without affecting the main workspace.
+By default, all available examples are copied into `examples/<name>/` inside the generated project.
+They are self-contained and can be deleted without affecting the main workspace.
 
 ## Example templates
 
diff --git a/create/index.js b/create/index.js
index e261249..91e2cc8 100755
--- a/create/index.js
+++ b/create/index.js
@@ -17,6 +17,7 @@ function parseCliArgs(argv = process.argv.slice(2)) {
     debug: undefined,
     install: undefined,
     examples: [],
+    noExamples: false,
     withExample: false
   };
   const positionals = [];
@@ -48,6 +49,11 @@ function parseCliArgs(argv = process.argv.slice(2)) {
       continue;
     }
 
+    if (arg === '--no-examples') {
+      options.noExamples = true;
+      continue;
+    }
+
     if (arg === '--cwd') {
       const value = argv[i + 1];
       if (value && !value.startsWith('-')) {
@@ -129,16 +135,19 @@ function normalizeOptions(input = {}) {
       ? path.resolve(resolvedCwd, targetDir)
       : undefined;
 
-  const examples = [
+  const explicitExamples = [
     ...normalizeExampleNames(opts.examples),
     ...normalizeExampleNames(opts.example),
     ...normalizeExampleNames(cli.examples)
   ];
 
   if (opts.withExample === true || cli.withExample) {
-    examples.push(DEFAULT_EXAMPLE);
+    explicitExamples.push(DEFAULT_EXAMPLE);
   }
 
+  const noExamples = Boolean(opts.noExamples ?? cli.noExamples);
+  const hasExplicitExamples = explicitExamples.length > 0;
+  const examples = hasExplicitExamples ? explicitExamples : noExamples ? [] : getDefaultExamples();
   const normalizedExamples = [...new Set(examples)];
 
   return {
@@ -149,10 +158,23 @@ function normalizeOptions(input = {}) {
     cwd: resolvedCwd,
     templateDir, // always use the built-in template
     exampleTemplatesDir,
+    noExamples,
     examples: normalizedExamples
   };
 }
 
+function getDefaultExamples() {
+  try {
+    return fs
+      .readdirSync(exampleTemplatesDir, { withFileTypes: true })
+      .filter(entry => entry.isDirectory())
+      .map(entry => entry.name)
+      .sort();
+  } catch {
+    return [];
+  }
+}
+
 async function main(...args) {
   const opts = normalizeOptions(args[0]);
 
diff --git a/tests/generator.test.mjs b/tests/generator.test.mjs
index 79f6eef..cc1370c 100644
--- a/tests/generator.test.mjs
+++ b/tests/generator.test.mjs
@@ -22,11 +22,12 @@ async function runCommand(cmd, args, options = {}) {
 
 describe('create-tinker-stack generator', () => {
   test(
-    'scaffolds project and passes build checks',
+    'scaffolds project with all examples by default and passes build checks',
     async () => {
       const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'tinker-stack-'));
       const appFolder = 'demo-app';
       const projectDir = path.join(tempRoot, appFolder);
+      const exampleDir = path.join(projectDir, 'examples', 'react-router');
 
       try {
         await runCommand('node', [CLI_ENTRY, appFolder], {
@@ -46,6 +47,10 @@ describe('create-tinker-stack generator', () => {
 
         const readme = await readFile(path.join(projectDir, 'README.md'), 'utf8');
         expect(readme).toContain('Demo Title');
+        const examplePackageJson = JSON.parse(
+          await readFile(path.join(exampleDir, 'package.json'), 'utf8')
+        );
+        expect(examplePackageJson.scripts).toHaveProperty('build');
 
         await runCommand('npm', ['install'], { cwd: projectDir });
         await runCommand('npm', ['run', 'typecheck'], { cwd: projectDir });
@@ -101,6 +106,36 @@ describe('create-tinker-stack generator', () => {
     5 * 60 * 1000
   );
 
+  test(
+    'skips copying example templates when --no-examples is passed',
+    async () => {
+      const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'tinker-stack-'));
+      const appFolder = 'demo-app';
+      const projectDir = path.join(tempRoot, appFolder);
+
+      try {
+        await runCommand('node', [CLI_ENTRY, '--no-examples', appFolder], {
+          env: {
+            ...process.env,
+            CI: '1',
+            SKIP_SETUP: '1',
+            SKIP_FORMAT: '1'
+          },
+          cwd: tempRoot
+        });
+
+        const packageJson = JSON.parse(await readFile(path.join(projectDir, 'package.json'), 'utf8'));
+        expect(packageJson.name).toBe('demo-title');
+        await expect(readFile(path.join(projectDir, 'examples', 'react-router', 'package.json'), 'utf8'))
+          .rejects
+          .toMatchObject({ code: 'ENOENT' });
+      } finally {
+        await rm(tempRoot, { recursive: true, force: true });
+      }
+    },
+    5 * 60 * 1000
+  );
+
   test(
     'scaffolds into the current working directory when no target is provided',
     async () => {