Prerequisite: This skill requires a schema0 template project. Before using, ensure CLAUDE.md exists in the project root and read it for project rules and conventions.

Create CRUD App Template

Web only. This skill generates files into apps/web/. Do NOT use if apps/web/ does not exist.

Orchestrates sub-skills to generate a complete CRUD feature. All schemas are defined in packages/db/src/schema/ using drizzle-zod and imported into routers, collections, and forms. See packages/db/CLAUDE.md for the schema architecture.

Execution Order

flowchart TD
    A[create-crud-app-template] --> B[schema-gen]
    B --> C[api-router]
    B --> D[query-collections]
    B --> E[table-customization]
    C --> F[handle-views]
    D --> F
    E --> F
    F --> G[Write Integrated Test]
    G --> H[Run Tests]

Skill	Purpose
schema-gen	Table + all drizzle-zod schemas
api-router	ORPC router (imports schemas from db)
query-collections	Collection, Dialog, Form (imports schemas from db)
table-customization	DataTable column definitions
handle-views	List Route and Detail Route

Files Generated (10 per entity)

Layer	File
Schema	packages/db/src/schema/{entity}.ts
Router	packages/api/src/routers/{entity}.ts
Collection	apps/web/src/query-collections/custom/{entity}.ts
Dialog	apps/web/src/components/ui/data-table/custom/{entity}/{Entity}Dialog.tsx
Form	apps/web/src/components/ui/data-table/custom/{entity}/{Entity}Form.tsx
Columns	apps/web/src/components/ui/data-table/custom/{entity}/{Entity}Column.tsx
Index	apps/web/src/components/ui/data-table/custom/{entity}/index.ts
List Route	apps/web/src/routes/_auth.{entity}.tsx
Detail Route	apps/web/src/routes/_auth.{entity}_.$id.tsx
Test	packages/test/src/{entity}.test.tsx

Post-Creation Steps

1. Register router in packages/api/src/routers/index.ts

2. Add route to sidebar in apps/web/src/components/app-sidebar.tsx

3. Typecheck only your files (NEVER project-wide):

   bunx oxlint --type-check --type-aware --quiet packages/db/src/schema/{entity}.ts packages/api/src/routers/{entity}.ts apps/web/src/routes/_auth.{entity}.tsx apps/web/src/routes/_auth.{entity}_.\$id.tsx apps/web/src/components/ui/data-table/custom/{entity}/*.tsx apps/web/src/query-collections/custom/{entity}.ts
   

4. Read the test guide BEFORE writing any test code: You MUST use the Read tool to read packages/test/CLAUDE.md in full before creating packages/test/src/{entity}.test.tsx. Do NOT write the test from memory or general knowledge — the test infrastructure has project-specific requirements (mock ordering, spy targets, HappyDOM constraints) that cannot be guessed.

5. Typecheck your files, then run tests:

   bunx oxlint --type-check --type-aware --quiet packages/db/src/schema/{entity}.ts packages/api/src/routers/{entity}.ts apps/web/src/routes/_auth.{entity}.tsx apps/web/src/routes/_auth.{entity}_.\$id.tsx apps/web/src/components/ui/data-table/custom/{entity}/*.tsx apps/web/src/query-collections/custom/{entity}.ts
   cd packages/test && bun test src/{entity}.test.tsx
   

Completion Verification

Before declaring complete, run:

grep -c "test(\"create\|test(\"update\|test(\"delete" packages/test/src/{entity}.test.tsx

Output MUST be 3. If less than 3, go back and add the missing tests.

• Test file exists at packages/test/src/{entity}.test.tsx
• All 3 CRUD tests exist (create, update, delete)
• All 3 tests pass

⚠️ Type Safety — Zero Tolerance

• NEVER use any type in generated code — use proper types, generics, or unknown with type narrowing
• NEVER suppress typecheck errors with // @ts-ignore, // @ts-expect-error, // @ts-nocheck, or // eslint-disable — fix the type error instead

Error Handling

Source	Handling	Example
Form (React Hook Form)	Inline via FormMessage	"name is required" under field
ORPC/Collection	Toast notification via sonner	"API: Validation failed"