MCPInstall

solid-start

by tanstack

Solid bindings for TanStack Start: useServerFn hook, tanstackStart Vite plugin, StartClient, StartServer, Solid-specific setup, re-exports from @tanstack/start-client-core. Full project setup with Solid.

Installs
56
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/tanstack/router --skill solid-start
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads solid-start automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Solid Start (@tanstack/solid-start)

This skill builds on start-core. Read @tanstack/start-client-core#start-core first for foundational concepts.

This skill covers the Solid-specific bindings, setup, and patterns for TanStack Start.

CRITICAL: All code is ISOMORPHIC by default. Loaders run on BOTH server and client. Use createServerFn for server-only logic.

CRITICAL: Do not confuse @tanstack/solid-start with SolidStart (@solidjs/start). They are completely different frameworks with different APIs.

CRITICAL: Types are FULLY INFERRED. Never cast, never annotate inferred values.

Package API Surface

@tanstack/solid-start re-exports everything from @tanstack/start-client-core plus:

  • useServerFn — Solid hook for calling server functions from components

All core APIs (createServerFn, createMiddleware, createStart, createIsomorphicFn, createServerOnlyFn, createClientOnlyFn) are available from @tanstack/solid-start.

Server utilities (getRequest, getRequestHeader, setResponseHeader, setCookie, getCookie) are imported from @tanstack/solid-start/server.

Full Project Setup

1. Install Dependencies

npm i @tanstack/solid-start @tanstack/solid-router solid-js
npm i -D vite vite-plugin-solid typescript

2. package.json

{
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "start": "node .output/server/index.mjs"
  }
}

3. tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

4. vite.config.ts

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
import solidPlugin from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    tanstackStart(), // MUST come before solid plugin
    solidPlugin({ ssr: true }),
  ],
})

5. Router Factory (src/router.tsx)

import { createRouter } from '@tanstack/solid-router'
import { routeTree } from './routeTree.gen'

export function getRouter() {
  const router = createRouter({
    routeTree,
    scrollRestoration: true,
  })
  return router
}

6. Root Route (src/routes/__root.tsx)

import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/solid-router'
import { HydrationScript } from 'solid-js/web'
import { Suspense } from 'solid-js'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My TanStack Start App' },
    ],
  }),
  // shellComponent renders the HTML document shell (always SSR'd)
  shellComponent: RootDocument,
})

function RootDocument(props: { children: any }) {
  return (
    <html>
      <head>
        <HydrationScript />
      </head>
      <body>
        <HeadContent />
        <Suspense>{props.children}</Suspense>
        <Scripts />
      </body>
    </html>
  )
}

7. Index Route (src/routes/index.tsx)

import { createFileRoute } from '@tanstack/solid-router'
import { createServerFn } from '@tanstack/solid-start'

const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
  return 'Hello from TanStack Start!'
})

export const Route = createFileRoute('/')({
  loader: () => getGreeting(),
  component: HomePage,
})

function HomePage() {
  const greeting = Route.useLoaderData()
  return <h1>{greeting()}</h1>
}

useServerFn Hook

Use useServerFn to call server functions from Solid components with automatic redirect handling:

import { createServerFn, useServerFn } from '@tanstack/solid-start'
import { createSignal } from 'solid-js'

const updatePost = createServerFn({ method: 'POST' })
  .validator((data: { id: string; title: string }) => data)
  .handler(async ({ data }) => {
    await db.posts.update(data.id, { title: data.title })
    return { success: true }
  })

function EditPostForm(props: { postId: string }) {
  const updatePostFn = useServerFn(updatePost)
  const [title, setTitle] = createSignal('')

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault()
        await updatePostFn({ data: { id: props.postId, title: title() } })
      }}
    >
      <input value={title()} onInput={(e) => setTitle(e.target.value)} />
      <button type="submit">Save</button>
    </form>
  )
}

Unlike the React version, useServerFn does NOT wrap the returned function in any memoization (no useCallback equivalent needed — Solid's setup runs once).

Solid-Specific Components

All routing components from @tanstack/solid-router work in Start:

  • <Outlet> — renders matched child route
  • <Link> — type-safe navigation
  • <Navigate> — declarative redirect
  • <HeadContent> — renders head tags via @solidjs/meta (must be in <body> — uses portals to inject into <head>)
  • <Scripts> — renders body scripts (must be in <body>)
  • <Await> — renders deferred data with <Suspense>
  • <ClientOnly> — renders children only after hydration
  • <CatchBoundary> — error boundary wrapping Solid.ErrorBoundary

Hooks Reference

All hooks from @tanstack/solid-router work in Start. Most return Accessor<T> — call the accessor to read:

  • useRouter() — router instance (NOT an Accessor)
  • useRouterState() — Accessor<T>, subscribe to router state
  • useNavigate() — navigation function (NOT an Accessor)
  • useSearch({ from }) — Accessor<T>, validated search params
  • useParams({ from }) — Accessor<T>, path params
  • useLoaderData({ from }) — Accessor<T>, loader data
  • useMatch({ from }) — Accessor<T>, full route match
  • useRouteContext({ from }) — Accessor<T>, route context
  • Route.useLoaderData() — Accessor<T>, typed loader data (preferred in route files)
  • Route.useSearch() — Accessor<T>, typed search params (preferred in route files)

Common Mistakes

1. CRITICAL: Importing from wrong package

// WRONG — this is the SPA router, NOT Start
import { createServerFn } from '@tanstack/solid-router'

// CORRECT — server functions come from solid-start
import { createServerFn } from '@tanstack/solid-start'

// CORRECT — routing APIs come from solid-router (re-exported by Start too)
import { createFileRoute, Link } from '@tanstack/solid-router'

2. CRITICAL: Forgetting to call Accessor

Most hooks return Accessor<T>. Must call to read the value.

// WRONG
const data = Route.useLoaderData()
return <h1>{data.message}</h1>

// CORRECT
const data = Route.useLoaderData()
return <h1>{data().message}</h1>

3. HIGH: Missing Scripts component

Without <Scripts /> in the root route's <body>, client JavaScript doesn't load and the app won't hydrate.

4. HIGH: Solid plugin before Start plugin in Vite config

// WRONG
plugins: [solidPlugin(), tanstackStart()]

// CORRECT
plugins: [tanstackStart(), solidPlugin()]

Cross-References

  • @tanstack/start-client-core#start-core — core Start concepts
  • @tanstack/router-core#router-core — routing fundamentals
  • @tanstack/solid-router#solid-router — Solid Router hooks and components

FAQ

What does the solid-start skill do?

Solid bindings for TanStack Start: useServerFn hook, tanstackStart Vite plugin, StartClient, StartServer, Solid-specific setup, re-exports from @tanstack/start-client-core. Full project setup with Solid.

How do I install solid-start?

Run npx skills add https://github.com/tanstack/router --skill solid-start in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/solid-start/ (personal) or .claude/skills/solid-start/ (project).

Which AI agents can use solid-start?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is solid-start safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains solid-start?

It is published by tanstack in tanstack/router. It has 56 recorded installs.

More from tanstack/router

View all →

router-core

tanstack/router

Framework-agnostic core concepts for TanStack Router: route trees, createRouter, createRoute, createRootRoute, createRootRouteWithContext, addChildren, Register type declaration, route matching, route sorting, file naming conventions. Entry point for all router skills.

602 installs

react-router

tanstack/router

React bindings for TanStack Router: RouterProvider, useRouter, useRouterState, useMatch, useMatches, useLocation, useSearch, useParams, useNavigate, useLoaderData, useLoaderDeps, useRouteContext, useBlocker, useCanGoBack, Link, Navigate, Outlet, CatchBoundary, ErrorComponent. React-specific patterns for hooks, providers, SSR hydration, and createLink with forwardRef.

Frontend & Design559 installs

react-start

tanstack/router

Open the skill to read its SKILL.md instructions.

Frontend & Design460 installs

start-core

tanstack/router

Open the skill to read its SKILL.md instructions.

453 installs

router-query

tanstack/router

Open the skill to read its SKILL.md instructions.

372 installs

start-server-core

tanstack/router

Open the skill to read its SKILL.md instructions.

Backend & APIs360 installs

Popular other skills

View category →

hyperframes-cli

heygen-com/hyperframes

The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.

1.3M installs

triage

mattpocock/skills

Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.

1M installs

ask-matt

mattpocock/skills

Ask which skill or flow fits your situation. A router over the skills in this repo.

778.4K installs

to-questionnaire

mattpocock/skills

Turn a decision you can't fully answer into a questionnaire for someone else to fill in.

508.9K installs

wait-what

mattpocock/skills

Stop. That last message did not land: re-pitch it.

459.7K installs

loop-me

mattpocock/skills

Grill me about specs for the workflows I want to build, within this workspace.

447.9K installs