init-tanstack-elysia
npx skills add https://github.com/ameyanagi/tanstack-start-elysia --skill init-tanstack-elysia
Agent 安装分布
Skill 文档
Initialize TanStack Start + ElysiaJS Monorepo
Create a production-ready Bun workspace monorepo with a TanStack Start frontend and ElysiaJS backend.
For detailed configuration file contents, see references/stack-details.md.
Prerequisites
Verify these tools are installed before proceeding:
bun --version # >= 1.2
just --version # >= 1.0
jj --version # >= 0.25
docker --version # >= 24.0 (optional, for production builds)
If any required tool is missing (bun, just, jj), stop and inform the user. Docker is optional â warn if missing but continue.
Step 1: Initialize Version Control
jj git init --colocate
Create .jj/.gitignore with content /* so git ignores jj metadata.
Step 2: Scaffold the Frontend
Run the shadcn create command to scaffold a TanStack Start project:
bunx --bun shadcn@latest create \
--preset "https://ui.shadcn.com/init?base=base&style=mira&baseColor=neutral&theme=indigo&iconLibrary=lucide&font=geist&menuAccent=subtle&menuColor=default&radius=medium&template=start&rtl=false" \
--template start \
frontend
After scaffolding completes:
-
Remove the nested git repository created by shadcn (the project uses the root-level jj/git repo):
rm -rf frontend/.git -
Remove ESLint configuration if present (the project uses Biome instead):
- Delete
eslint.config.jsor.eslintrc.*if they exist - Remove
eslint,@eslint/*, andprettierpackages frompackage.jsondevDependencies - Remove any eslint/prettier scripts from
package.json
- Delete
-
Install Biome and additional dependencies:
cd frontend && bun add -d @biomejs/biome vitest jsdom cd frontend && bun add @elysiajs/eden @tanstack/react-query better-auth -
Create
frontend/biome.jsonwith the configuration from stack-details.md section “Biome Configuration (Frontend)”. -
Auto-fix the scaffolded code to conform to Biome rules (formatting, imports):
cd frontend && bunx biome check --write --unsafe . -
Update the
namefield infrontend/package.jsonto"@repo/frontend". -
Create
frontend/src/lib/auth-client.tswith the Better Auth client from stack-details.md section “Better Auth Client”. -
Create
frontend/src/lib/api.tswith the Eden Treaty client from stack-details.md section “Eden Treaty Client”. -
Create
frontend/vitest.config.tsandfrontend/src/__tests__/smoke.test.tsfrom stack-details.md section “Frontend Test Configuration”. -
Update
frontend/tsconfig.json:- Add
"@repo/backend/*": ["../backend/*"]tocompilerOptions.paths(needed for Eden Treaty type imports) - Remove
eslint.config.jsandprettier.config.jsfrom theincludearray if present
- Add
-
Merge these scripts into
frontend/package.json(preserve existing scripts from scaffolding):{ "scripts": { "check": "biome check .", "check:fix": "biome check --write .", "typecheck": "tsc --noEmit", "test": "vitest run" } }
Step 3: Create Root Workspace
-
Create
package.jsonin the project root from stack-details.md section “Root Package JSON”. -
Run
bun installfrom the project root to link workspaces:bun install
Step 4: Scaffold the Backend
-
Create
backend/package.jsonfrom stack-details.md section “Backend Package JSON”. -
Install backend dependencies:
cd backend && bun install -
Create the backend application structure:
backend/ âââ src/ â âââ app.ts # Elysia app (without listen) â âââ index.ts # Entry point (app.listen) â âââ auth.ts # Better Auth config â âââ db/ â â âââ index.ts # Drizzle client â â âââ schema.ts # App-specific schema â âââ routes/ â âââ health.ts # Health check endpoint âââ scripts/ â âââ generate-openapi.ts â âââ validate-openapi.ts âââ tests/ âââ health.test.ts -
Write
backend/src/db/index.tswith the Drizzle client from stack-details.md section “Drizzle Client”. -
Write
backend/src/auth.tswith the Better Auth config from stack-details.md section “Better Auth Server Config”. -
Write
backend/src/routes/health.tswith the health endpoint from stack-details.md section “Health Route”. -
Write
backend/src/app.tswith the Elysia app from stack-details.md section “Elysia App”. -
Write
backend/src/index.tswith the entry point from stack-details.md section “Backend Entry Point”. -
Write
backend/drizzle.config.tsfrom stack-details.md section “Drizzle Config”. -
Create
backend/biome.jsonfrom stack-details.md section “Biome Configuration (Backend)”. -
Create
backend/tsconfig.jsonfrom stack-details.md section “Backend TSConfig”. -
Write
backend/scripts/generate-openapi.tsfrom stack-details.md section “OpenAPI Generation Script”. -
Write
backend/scripts/validate-openapi.tsfrom stack-details.md section “OpenAPI Validation Script”. -
Create
backend/.gitignorefrom stack-details.md section “Backend Gitignore”. -
Write
backend/tests/health.test.tsfrom stack-details.md section “Backend Tests”. -
Auto-fix the backend code to conform to Biome rules (formatting, imports):
cd backend && bunx biome check --write --unsafe .
Step 5: Generate Better Auth Schema & Initial Migration
-
Generate the Better Auth database schema:
cd backend && bunx @better-auth/cli generate --config ./src/auth.ts --output ./src/db/auth-schema.ts -
Import the generated auth schema in
backend/src/db/schema.ts. See stack-details.md section “App Schema” for the pattern. -
Start the dev PostgreSQL database:
docker compose -f docker-compose.dev.yml up -d -
Wait for PostgreSQL to be ready, then push the schema to the database:
cd backend && bunx drizzle-kit push
Step 6: Generate Initial OpenAPI Schema
cd backend && bun run scripts/generate-openapi.ts
Step 7: Create the Root Justfile
Create justfile in the project root with the content from stack-details.md section “Justfile”.
Key recipes:
set dotenv-loadto read.envdevspawns dev database, frontend, and backend in paralleldev-frontend/dev-backend/dev-dbfor individual servicescheckruns all linters, formatters, type checkers, and OpenAPI validationfixauto-fixes lint and format issuesgen-apigenerates OpenAPI schemadb-push/db-migrate/db-studiofor database management
Step 8: Create Docker Configuration
- Create
docker-compose.dev.ymlfrom stack-details.md section “Docker Compose Dev”. - Create
frontend/Dockerfilefrom stack-details.md section “Frontend Dockerfile”. - Create
backend/Dockerfilefrom stack-details.md section “Backend Dockerfile”. - Create
docker-compose.ymlin the project root from stack-details.md section “Docker Compose Production”. - Create
frontend/.dockerignoreandbackend/.dockerignorefrom stack-details.md section “Dockerignore Files”.
Step 9: Create Root Configuration Files
- Create
.env.examplefrom stack-details.md section “Environment Template”. - Copy
.env.exampleto.env:cp .env.example .env - Create
.gitignorefrom stack-details.md section “Gitignore”. - Create
.editorconfigfrom stack-details.md section “EditorConfig”. - Create
.vscode/extensions.jsonfrom stack-details.md section “VS Code Extensions”. - Create
.vscode/settings.jsonfrom stack-details.md section “VS Code Settings”. - Create
.github/workflows/ci.ymlfrom stack-details.md section “GitHub Actions CI”. - Create
README.mdfrom stack-details.md section “Project README”.
Step 10: Run Install and Verify
-
Install all workspace dependencies:
bun install -
Run checks:
just check -
Run tests:
just test -
Run dev servers:
just devVerify:
- Frontend at http://localhost:3000
- Backend at http://localhost:3001
- API docs at http://localhost:3001/docs
-
Stop the dev servers after verification.
Final Project Structure
project/
âââ package.json # Root Bun workspace
âââ bun.lock
âââ justfile
âââ frontend/
â âââ package.json # @repo/frontend
â âââ app/ # TanStack Start app directory
â â âââ routes/
â âââ src/
â â âââ lib/
â â â âââ auth-client.ts # Better Auth client SDK
â â â âââ api.ts # Eden Treaty client
â â â âââ utils.ts
â â âââ components/
â â â âââ ui/ # shadcn components
â â âââ __tests__/
â âââ biome.json
â âââ vitest.config.ts
â âââ tsconfig.json
â âââ Dockerfile
â âââ .dockerignore
âââ backend/
â âââ package.json # @repo/backend
â âââ src/
â â âââ app.ts # Elysia app definition
â â âââ index.ts # Entry point (listen)
â â âââ auth.ts # Better Auth config
â â âââ db/
â â â âââ index.ts # Drizzle client
â â â âââ schema.ts # App schema
â â â âââ auth-schema.ts # Generated by Better Auth CLI
â â âââ routes/
â â âââ health.ts
â âââ scripts/
â â âââ generate-openapi.ts
â â âââ validate-openapi.ts
â âââ tests/
â â âââ health.test.ts
â âââ drizzle/ # Migrations
â âââ drizzle.config.ts
â âââ biome.json
â âââ tsconfig.json
â âââ openapi.json # Generated OpenAPI spec
â âââ Dockerfile
â âââ .dockerignore
âââ docker-compose.yml # Production
âââ docker-compose.dev.yml # Dev (PostgreSQL)
âââ .vscode/
â âââ extensions.json
â âââ settings.json
âââ .github/
â âââ workflows/
â âââ ci.yml
âââ .editorconfig
âââ .env.example
âââ .env
âââ .gitignore
âââ README.md
Report the final status to the user, including any warnings or errors encountered during setup.