Agent skill · vercel-labs
tanstack-start
Build JSON-defined TanStack Start applications with @json-render/tanstack-start. Use for Start route specs, splat routing, SSR loaders, head metadata, layouts, and client navigation. Do not use for generic TanStack Router apps that do not use json-render.
What it needs
About 3k tokens when loaded.
What this skill does
@json-render/tanstack-start Use this integration when a TanStack Start app needs complete pages or routes described by json-render specs. Install Application Spec Include the server-safe built-in definitions in the generation catalog. The renderer supplies their component implementations. Then use StartAppSpec and TanStack Router route patterns: Routes use /posts/$slug for named parameters and /docs/$ for a splat. Splat loader parameters are slash-delimited strings under splat. Escape route-key slashes as ~1 when generating RFC 6902 patches. Every layout needs a Slot element. Declare Slot and Link through startComponentDefinitions; do not require consumers to register React implementations for them. Server Helpers State merge precedence is application state, layout state, page state, then loader data. getHead merges app and route metadata into TanStack meta and links descriptors. getStaticPaths includes static routes plus dynamic routes with staticParams. Convert its strings to { path } objects for TanStack Start's top-level pages plugin option. Loader params are URL-decoded, while values from staticParams are URL-encoded in generated paths. Route matching treats trailing slashes as optional and accepts encoded or decoded pathname representations so loader data and metadata resolve the same static route. Route Wiring TanStack Router loaders run on both the server and client. If a spec factory or named loader uses credentials, database clients, or server-only imports, wrap getPageData and getHead in a TanStack Start createServerFn; do not import that server code directly into an isomorphic route loader. Root Provider Wrap the root route's Outlet with StartAppProvider. Render HeadContent so metadata from getHead reaches the document. Use StartLoading, StartErrorBoundary, and StartNotFound for TanStack Router's pendingComponent, errorComponent, and notFoundComponent options. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel-labs/tanstack-start