init-project

name	init-project
description	Initialize this React enterprise template after cloning. Walks the user through three questions (backend? colors? other adjustments?), strips or wires up backend code accordingly, and verifies the result with build + tests. Use when the user says "init project", "init the project", "set up this template", "initialize the template", or runs this skill right after cloning the repo.
version	1.0.0

init-project

A guided initialization for the template-web-app-react-enterprise monorepo. The template ships with a full backend layer (API client, mock server, auth, login/sign-up/forgot-password, dashboard). Many downstream projects want only a slice of that. This skill walks the user through three questions, mutates the repo accordingly, and verifies the result still builds and tests cleanly.

Important for Claude: This skill describes what you (Claude) should do when the user invokes it. Use the AskUserQuestion tool for every question. After every destructive batch, run the verification commands and fix dangling references before moving to the next question. Do not skip the final verification.

---

Question 1 — Does the project need a backend?

Use AskUserQuestion with two options:

• No backend — purely a frontend project, no API calls
• Has backend — the project will talk to a real backend

Branch A: NO BACKEND

Delete the listed files/folders and edit the listed config files. After all edits, run the cleanup steps at the end of this branch.

1. Delete entire packages and tools

• packages/api/
• packages/mocks/
• tools/mock/

2. Delete apps/web/src files that depend on @package/api / @package/mocks

Auth + session:

• apps/web/src/core/auth/ (whole directory: AuthState.ts, UseAuth.ts, AuthInitializer.tsx, AuthStatus.ts, AuthAtoms.ts, plus any index.ts)
• apps/web/src/core/session/UseAppSessionContent.ts
• apps/web/src/components/modules/settings-modal/SettingsModalModule.tsx — delete; if SettingsModal is referenced elsewhere, replace usages with a static stub or remove the call sites

Routes (auth + dashboard pages depend on the API):

• apps/web/src/routes/_authenticated/ (entire folder, includes the _authenticated/route.tsx guard, dashboard/, and index/)
• apps/web/src/routes/_public/login/
• apps/web/src/routes/_public/sign-up/
• apps/web/src/routes/_public/forgot-password/

Components/views/forms tied to those routes:

• apps/web/src/components/views/login/ (LoginView + story)
• apps/web/src/components/forms/login/ (LoginForm + story)
• apps/web/src/components/views/sign-up/
• apps/web/src/components/forms/sign-up/
• apps/web/src/components/views/forgot-password/
• apps/web/src/components/forms/forgot-password/
• apps/web/src/components/views/dashboard/ (DashboardView + story)

Storybook data:

• apps/web/src/storybook/data/DashboardData.ts

After deleting, grep for any remaining @package/api or @package/mocks imports and remove or replace them. Expected hits before this step (12 files) — afterward should be zero.

3. Restructure routes so the app has a public landing page

The home/landing page currently lives at apps/web/src/routes/_authenticated/index/route.tsx. Move its component into a new public landing route (e.g. apps/web/src/routes/_public/home/route.tsx or directly under routes/index/route.tsx), strip any auth-context usage, and make it the default route.

After deletions, remove the _authenticated/route.tsx guard entirely. routeTree.gen.ts is auto-generated by @tanstack/router-plugin/vite during pnpm build — do not hand-edit it; the build will regenerate it.

4. Edit configuration files

• apps/web/vite.config.ts — remove the proxy({...}) block (currently around lines 38–43) and the import proxy from "vite-plugin-http2-proxy" line at the top. The serve case should no longer reference proxy.
• apps/web/package.json — remove the vite-plugin-http2-proxy dependency.
• apps/web/.env — remove VITE_CONNECT_HOST, VITE_CONNECT_PORT. If the file becomes empty, delete it.
• apps/web/.env.mocks — delete the file.
• Root package.json — remove the dev:mocks and dev:mocks:cli scripts.
• turbo.json — remove the dev:mocks and dev:mocks:cli task entries.
• pnpm-workspace.yaml — remove the packages/api, packages/mocks, and tools/mock entries.
• CLAUDE.md — strip the sections describing the backend, mocks, auth flow, ApiWorker, and dev:mocks* scripts. Keep the rest.

5. Delete backend-touching tests

• apps/e2e/src/specs/auth.spec.ts
• Audit apps/e2e/src/specs/ for any other spec referencing @package/mocks, login, sign-up, forgot-password, or _authenticated routes — delete those too.

6. Cleanup and verify (Branch A only)

Run, in order, and fix any failures before continuing:

1. pnpm install — refreshes the lockfile after dependency removals
2. pnpm build:exports — regenerates barrel index.ts files in remaining packages
3. pnpm build — verifies the app builds and regenerates routeTree.gen.ts
4. pnpm test
5. pnpm test:e2e

Common failure: a leftover import of @package/api somewhere. Grep, delete, re-run.

---

Branch B: HAS BACKEND

Ask the user (use AskUserQuestion with free-form/Other for custom values, or two short prompts):

• Backend host (default: http://localhost)
• Backend port (default: 5000)

Then:

1. Edit apps/web/.env:

   • VITE_CONNECT_HOST=<user value>
   • VITE_CONNECT_PORT=<user value>

2. Read packages/api/src/Worker/ApiWorkerAllowedUrls.ts and show the user its current contents:

   export const ALLOWED_URLS = [
     "/api/application/info",
     "/api/dashboard",
     "/api/personal/profile",
     "/api/users/forgot-password",
     "/api/users/self-register",
   ];
   

   Explain: every endpoint the backend exposes that the frontend will call must be added to this list, otherwise the API web worker will block the request. Tell the user where to add new endpoint service classes (mirror existing ones in packages/api/src/: Login, Logout, RefreshToken, ForgotPassword, SelfRegister, ApplicationInfo, PersonalProfile, Dashboard).

3. Do not delete anything in this branch.

---

Question 2 — Adjust the project colors?

Use AskUserQuestion (Yes / No).

If No, skip to Question 3.

If Yes, ask two follow-up questions (free-form via the "Other" option, or sequentially):

• New default color (oklch or hex)
• New accent color (oklch or hex)

If the user gives hex, convert to oklch — the token files use oklch consistently. Then edit:

• design/tokens/src/light.json:
  • color.theme.light.default.DEFAULT.$value
  • color.theme.light.accent.DEFAULT.$value
• design/tokens/src/dark.json:
  • color.theme.dark.default.DEFAULT.$value
  • color.theme.dark.accent.DEFAULT.$value

Leave the matching foreground values alone unless contrast is obviously broken — if you change them, mention it in the final summary so the user can review.

Rebuild tokens so the CSS variables propagate:

pnpm --filter @design/tokens build:libs
pnpm build:libs

---

Question 3 — Anything else? (curated checklist)

Use AskUserQuestion with multiSelect: true and these options:

• App name — update name in root package.json, and replace the displayed app name (search apps/web/src/ for appName usage and the React Intl messages that hard-code it)
• README — replace template README with a project-specific stub
• Favicon / app title — apps/web/index.html <title> element and the favicon files in apps/web/public/
• Repository metadata — package.json description, repository, author

For each option the user selects, ask the minimum follow-up needed (e.g. "What's the new app name?") and apply the change.

Mention but do not modify: the git remote (git remote set-url origin …) — leave that to the user.

---

Final verification

Regardless of branch, run in order and do not produce the summary until all pass:

1. pnpm install
2. pnpm build
3. pnpm test
4. pnpm test:e2e

Fix any failure before moving on.

---

Final summary + greeting

Print to the user:

• Choices made — bulleted list:
  • Backend mode (none / configured at host:port)
  • Colors changed? (with old → new values if yes)
  • Items adjusted from the curated checklist
• High-level files touched — packages deleted, configs edited, tests removed (don't enumerate every file; group by area)
• Greeting — a friendly "Your project is ready!" plus next steps:
  • pnpm dev to start the dev server
  • pnpm storybook to browse the component library
  • pnpm test and pnpm test:e2e to run the test suites

---

Critical file reference (so you don't have to rediscover them)

Concern	Path
API client package	packages/api/
API worker allowlist	packages/api/src/Worker/ApiWorkerAllowedUrls.ts
Mock server tool	tools/mock/
Mock client package	packages/mocks/
Auth context	apps/web/src/core/auth/
Session hook	apps/web/src/core/session/UseAppSessionContent.ts
Authenticated routes	apps/web/src/routes/_authenticated/
Public auth pages	apps/web/src/routes/_public/{login,sign-up,forgot-password}/
Vite proxy block	apps/web/vite.config.ts (lines ~38–43, plus the vite-plugin-http2-proxy import)
Backend env vars	apps/web/.env, apps/web/.env.mocks
Mock turbo tasks	turbo.json (dev:mocks, dev:mocks:cli entries)
Workspace manifest	pnpm-workspace.yaml
Color tokens (light)	design/tokens/src/light.json (color.theme.light.default.DEFAULT.$value, …accent.DEFAULT.$value)
Color tokens (dark)	design/tokens/src/dark.json (color.theme.dark.default.DEFAULT.$value, …accent.DEFAULT.$value)
Token build command	pnpm --filter @design/tokens build:libs
E2E auth spec	apps/e2e/src/specs/auth.spec.ts

Files in apps/web/src that import @package/api (audit list — delete in Branch A)

1. apps/web/src/core/auth/AuthState.ts
2. apps/web/src/core/auth/UseAuth.ts
3. apps/web/src/core/session/UseAppSessionContent.ts
4. apps/web/src/components/modules/settings-modal/SettingsModalModule.tsx
5. apps/web/src/routes/_public/login/-UseLoginPage.ts
6. apps/web/src/routes/_public/login/route.tsx
7. apps/web/src/routes/_public/sign-up/-UseSignUpPage.ts
8. apps/web/src/routes/_public/sign-up/route.tsx
9. apps/web/src/routes/_public/forgot-password/-UseForgotPasswordPage.ts
10. apps/web/src/routes/_public/forgot-password/route.tsx
11. apps/web/src/routes/_authenticated/dashboard/-DashboardLoader.ts
12. apps/web/src/routes/_authenticated/dashboard/-UseDashboardPage.ts
13. apps/web/src/routes/_public/about/-AboutLoader.ts
14. apps/web/src/components/views/dashboard/DashboardView.tsx
15. apps/web/src/storybook/data/DashboardData.ts

(Numbers may drift as the template evolves — always re-grep before deleting.)