Generates complete CRUD apps with TanStack DB, React Hook Form, and DataTable - orchestrates sub-skills (project)
From schema0-devnpx claudepluginhub schema0/ai-agent-plugins --plugin schema0-devThis skill is limited to using the following tools:
Prerequisite: This skill requires a schema0 template project. Before using, ensure
CLAUDE.mdexists in the project root and read it for project rules and conventions.
Web only. This skill generates files into
apps/web/. Do NOT use ifapps/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.
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 |
| 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 |
Register router in packages/api/src/routers/index.ts
Add route to sidebar in apps/web/src/components/app-sidebar.tsx
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
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.
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
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.
packages/test/src/{entity}.test.tsxany type in generated code — use proper types, generics, or unknown with type narrowing// @ts-ignore, // @ts-expect-error, // @ts-nocheck, or // eslint-disable — fix the type error instead| Source | Handling | Example |
|---|---|---|
| Form (React Hook Form) | Inline via FormMessage | "name is required" under field |
| ORPC/Collection | Toast notification via sonner | "API: Validation failed" |