Solid tanstack start
Skill fusengine/agents/plugins/tanstack-start-expert/skills/solid-tanstack-start
Use when organizing TanStack Start code, splitting oversized routes/server functions, or reviewing architecture. Do NOT use for setup or plain React SPA.From its SKILL.md
npx -y skills add fusengine/agents --skill solid-tanstack-startAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
5.4 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it
Establishes the isomorphic/server-only boundary as an architectural concern: DB access, secrets, and filesystem work must sit behind createServerFn or createServerOnlyFn, never inside a bare loader.
Absolute rules include never hand-editing the generated src/routeTree.gen.ts, no module importing another feature module except cores/, no barrel exports, and no any types. Includes code templates for routes, server functions, interfaces, and hooks, and DRY guidance to grep for existing logic in src/modules/cores/ or src/lib/ before writing new code.
Do NOT use this skill for initial framework setup (use start-core), for the server/client execution-boundary deep dive itself (use start-execution-model), or for a generic React SPA that has no Start route tree (use solid-react). </objective>
SOLID TanStack Start
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.
Codebase Analysis (MANDATORY)
Before ANY implementation:
- Explore the
src/routes/tree and existingmodules/to learn conventions. - Read related route files and their
createServerFnwrappers. - Identify naming, path aliases (
~/,@/), and data-flow patterns.
DRY - Reuse or Create Shared (MANDATORY)
Before writing ANY new code:
- Grep for similar function names, loaders, or server functions.
- Check shared locations:
src/modules/cores/,src/lib/. - If similar code exists → extend/reuse instead of duplicating.
- Logic used by 2+ features → put it in
src/modules/cores/directly. - Run
npx jscpd ./src --threshold 3after creating new files.
Absolute Rules (MANDATORY)
1. Files < 100 lines
Split at 90. Per-type limits in references/single-responsibility.md
(route components < 50, server functions < 40, hooks < 30).
2. NEVER edit src/routeTree.gen.ts
It 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.
3. Interfaces Separated
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.
4. JSDoc Mandatory on every export
/**
* 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))
5. Server-only logic lives behind createServerFn
Loaders 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.
SOLID Principles (Detailed Guides)
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 ininterfaces/, inject implementations.
See references/solid-principles.md for the overview and
references/architecture-patterns.md for the full directory layout.
Code Templates
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 |
Forbidden
- Editing
src/routeTree.gen.ts(generated). - Types declared inside route/component files.
- DB / secrets / filesystem in a bare loader (→
createServerFn). - Module importing another feature module (except
cores/). - Files > 100 lines, missing JSDoc on exports,
anytype. - Barrel exports (
index.tsre-exports). - Coding without checking current docs (Context7 + Exa) first.
What ships with it: 10 files
24.7 KB alongside SKILL.md
references/
- architecture-patterns.md4.3 KB
- dependency-inversion.md3.0 KB
- interface-segregation.md2.7 KB
- single-responsibility.md3.5 KB
- solid-principles.md2.8 KB
- templates/hook.md1.8 KB
- templates/interface.md1.7 KB
- templates/route.md2.7 KB
- templates/server-fn.md2.2 KB
- .gitkeep0 B