plugins/tanstack-start-expert/skills/solid-tanstack-start/SKILL.md
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).
npx skillsauth add fusengine/agents solid-tanstack-startInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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).testing
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
development
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
development
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
development
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.