solid-tanstack-start

Applies SOLID principles and clean architecture rules to TanStack Start projects.

1|Updated Jul 29, 2026
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill solid-tanstack-start-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solid-tanstack-start
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/tanstack-start-expert/skills/solid-tanstack-start
Command: npx skills add https://github.com/fusengine/kimi-code --skill solid-tanstack-start-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? TanStack Start codebases mix isomorphic routes, server functions, and UI in ways that quickly become tangled: oversized route files, types declared inline, database access leaking into loaders, and accidental edits to the generated route tree. This Skill enforces a consistent modular architecture so Start projects stay maintainable as they grow. ## Core Features & Use Cases - Architecture enforcement: Applies per-type line budgets (route components < 50, server functions < 40, hooks < 30), mandates types in src/interfaces/, JSDoc on every export, and forbids barrel exports and feature-to-feature imports. - Server/client boundary rules: Ensures DB access, secrets, and filesystem work live behind createServerFn or createServerOnlyFn, never in a bare isomorphic loader. - Ready-to-use templates and references: Ships templates for routes, server functions, interfaces, and hooks, plus deep-dive references on SRP, ISP, DIP, and directory layout. - Use Case: When a route file grows past 90 lines mixing types, a DB query, and UI, use this Skill to split it into interfaces/, server/, functions/, and components/ following the modular structure. ## Quick Start Review my TanStack Start project structure and refactor any oversized routes or server functions to follow SOLID principles.

Frequently Asked Questions about solid-tanstack-start

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I organize a TanStack Start project with clean architecture?▼

Place all business logic in src/modules/ with feature folders containing interfaces/, functions/, server/, services/, hooks/, and validators/ subdirectories. Routes in src/routes/ act only as orchestrators that call server functions in loaders and render module components.

How to split an oversized TanStack Start route file?▼

Move types to src/interfaces/, DB queries to a .server.ts file, createServerFn wrappers to .functions.ts, and UI to a component under 50 lines. The route file keeps only the loader call and component wiring, staying under 50 lines total.

Can I put database access in a TanStack Start loader?▼

No. Loaders are isomorphic and run on both server and client, so DB access, secrets, and filesystem work must sit inside a createServerFn or createServerOnlyFn handler. The loader then calls that server function instead.

Why should I never edit routeTree.gen.ts in TanStack Start?▼

The routeTree.gen.ts file is regenerated by the tanstackStart() Vite plugin on every dev and build run, so manual edits are overwritten and break route type inference. Add or rename files in src/routes/ and let the plugin regenerate it.

When should I not use this TanStack Start architecture skill?▼

Do not use it for initial framework setup, for the server/client execution-boundary deep dive, or for a generic React SPA without a Start route tree. Those cases belong to dedicated setup, execution-model, or React-specific skills.