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-startTanStack Start setup and project anatomy — tanstackStart() Vite (and Rsbuild) plugin, getRouter() factory, root route document shell (HeadContent, Outlet, Scripts), routeTree.gen.ts, tsconfig, src/ layout. Use when: scaffolding a Start project from scratch, wiring the build tool, understanding where files go, debugging setup (blank page, hydration, no client JS). Do NOT use for: server-only vs isomorphic boundaries (use start-execution-model), SOLID/code organization (use solid-tanstack-start), plain React SPA without Start.
Provides best practices for TanStack Start full-stack React apps, covering server functions, middleware, SSR, authentication, and deployment.
Enforces SOLID principles in React 19 projects with strict file size limits, JSDoc, and separated interfaces. Use for maintaining high code quality and modular architecture.