| 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 (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 apps/web/src files
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.tsapps/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 imports from removed packages and remove or replace them.
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.
2. Edit configuration files
apps/web/vite.config.ts — remove the proxy({...}) block 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, dev:mocks script, and @package/api dependency. Change test:e2e:env scripts to drop --mode mocks.apps/web/.env — remove VITE_CONNECT_HOST, VITE_CONNECT_PORT. Delete apps/web/.env.mocks.- 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 any entries for deleted packages.CLAUDE.md — strip the sections describing the backend, mocks, auth flow, and dev:mocks* scripts. Keep the rest.
3. Delete backend-touching tests
- Audit
apps/e2e/src/specs/ for any spec referencing removed packages, login, sign-up, forgot-password, or _authenticated routes — delete those.
4. Cleanup and verify (Branch A only)
Run, in order, and fix any failures before continuing:
pnpm install — refreshes the lockfile after dependency removalspnpm build:exports — regenerates barrel index.ts files in remaining packagespnpm build — verifies the app builds and regenerates routeTree.gen.tspnpm testpnpm 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:
-
Edit apps/web/.env:
VITE_CONNECT_HOST=<user value>VITE_CONNECT_PORT=<user value>
-
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.$valuecolor.theme.light.accent.DEFAULT.$value
design/tokens/src/dark.json:
color.theme.dark.default.DEFAULT.$valuecolor.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:
pnpm installpnpm buildpnpm testpnpm 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 serverpnpm storybook to browse the component librarypnpm test and pnpm test:e2e to run the test suites
Critical file reference (so you don't have to rediscover them)
| Concern | Path |
|---|
| 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 (vite-plugin-http2-proxy import + proxy({...}) in serve case) |
| Backend env vars | apps/web/.env (VITE_CONNECT_HOST, VITE_CONNECT_PORT), apps/web/.env.mocks |
| 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 |
