From fuse-tanstack-start
SOLID principles for TanStack Start projects. Files < 100 lines, interfaces in src/interfaces/, JSDoc on all exports, modular structure around the Start route tree. Use when: organizing a Start codebase, splitting oversized routes/server functions, reviewing architecture, deciding where isomorphic vs server-only code lives. Do NOT use for: framework setup (use start-core), execution boundaries deep-dive (use start-execution-model), generic React SPA without a Start route tree (use solid-react).
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tanstack-start:solid-tanstack-startThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
SOLID and clean architecture for **TanStack Start v1.166.2** projects (Vite plugin
SOLID and clean architecture for TanStack Start v1.166.2 projects (Vite plugin
tanstackStart(), file-based routes in src/routes/, server functions via
createServerFn). Start code is isomorphic by default — architecture must make
the server/client boundary explicit.
Before ANY implementation:
src/routes/ tree and existing modules/ to learn conventions.createServerFn wrappers.~/, @/), and data-flow patterns.Before writing ANY new code:
src/modules/cores/, src/lib/.src/modules/cores/ directly.npx jscpd ./src --threshold 3 after creating new files.Split at 90. Per-type limits in references/single-responsibility.md
(route components < 50, server functions < 40, hooks < 30).
src/routeTree.gen.tsIt is generated by the tanstackStart() plugin on every dev/build run. Editing
it by hand is always wrong — the change is overwritten and route types break.
Add/rename files in src/routes/ instead and let the plugin regenerate it.
src/modules/[feature]/src/interfaces/
├── user.interface.ts
└── api.interface.ts
NEVER declare types inside a route or component file. See
references/interface-segregation.md.
/**
* Fetch a user by ID (server-only).
*
* @param data - Lookup payload with the user id
* @returns The user row, or throws notFound()
*/
export const getUser = createServerFn({ method: 'GET' })
.validator((data: { id: string }) => data)
.handler(async ({ data }) => findUserById(data.id))
createServerFnLoaders are isomorphic. DB access, secrets, and filesystem MUST sit inside a
createServerFn().handler() (or a createServerOnlyFn), never a bare loader.
See start-execution-model for the full boundary model.
references/single-responsibility.md — Load when a route/server function
grows past its limit; line budgets + split strategy for Start files.references/interface-segregation.md — Load when designing route loader
data, server-function payloads, or router context; keep them focused.references/dependency-inversion.md — Load when a server function calls a
service; depend on abstractions in interfaces/, inject implementations.See references/solid-principles.md for the overview and
references/architecture-patterns.md for the full directory layout.
Ready-to-copy code in references/templates/:
| Template | Usage | Max Lines |
|---|---|---|
route.md | createFileRoute component + loader | 50 |
server-fn.md | createServerFn with Zod validator | 40 |
interface.md | TypeScript interfaces in src/interfaces/ | - |
hook.md | Client hook wrapping a server function | 30 |
src/routeTree.gen.ts (generated).createServerFn).cores/).any type.index.ts re-exports).npx claudepluginhub fusengine/agents --plugin fuse-tanstack-startGuides completion of development work by verifying tests, detecting environment, and presenting structured options for merge, PR, or cleanup.
Guides creation and editing of skills using test-driven development with pressure scenarios and subagents to verify agent compliance.
Dispatches multiple subagents concurrently for independent tasks without shared state. Use when facing 2+ unrelated failures or subsystems that can be investigated in parallel.