tanstack-start

TanStack Start full-stack React framework using server functions, API routes, SSR, streaming with defer(), and multi-platform deployment via Vinxi/Nitro

Generate Convert Improve

Install / Use

npx skills add PatrickJS/awesome-cursorrules

Installs into whichever agent you are using.

About this skill

📦

Other

Other agent config

Quality Score

91/100

Our assessment of tanstack-start

tanstack-start scores 91/100 on our quality scale, 11th of 128 Operations skills we index (top 9%).

Its Other is 3.6 KB long, well organised into 10 sections with 7 code examples: a solid amount of guidance for an agent.

With 40,832 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance

26/30

Structure

20/20

Description

15/15

Adoption

20/20

Freshness

11/15

Maintenance, license and trust

The repository was last updated about 4 months ago. That is recent enough to be usable, but agent tooling moves fast, so check the instructions against your agent's current version.
Our last check on 2026-09-24 found the source still online.
It is released under the CC0-1.0 license, a permissive license that allows use, modification and commercial use with attribution.
Its trust signals score 98/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

Safety scan

No issues found

Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. An AI review of the same text found nothing harmful.

AI review by kimi-k2.7-code on 2026-09-24. Automated pattern scan on 2026-09-24. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.

tanstack-start compared with similar skills

All 4 of these similar skills score higher than tanstack-start; compare them before choosing.

Skill	Score	Stars	Updated	Format
tanstack-start (this skill)by PatrickJS	91	40.8k	4mo ago	Other
Agent-Reachby Panniantong	100	85.2k	9d ago	CLAUDE.md
headroomby headroomlabs-ai	100	73.7k	today	CLAUDE.md
rufloby ruvnet	100	73.2k	today	CLAUDE.md
Scraplingby D4Vinci	100	83.4k	today	MCP Server

Frequently asked questions

How do I install tanstack-start?: Run npx skills add PatrickJS/awesome-cursorrules. The install tabs above show the steps for each supported agent.
Which AI agents does tanstack-start work with?: It is written for Cursor, as a Other file. Other agents that read the same format can often use it too.
Is tanstack-start safe to use?: Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. An AI review of the same text found nothing harmful. It is CC0-1.0-licensed and scores 98/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is tanstack-start still maintained?: The repository was last updated about 4 months ago. That is recent enough to be usable, but agent tooling moves fast, so check the instructions against your agent's current version.

Skill content

View source on GitHub

description: "TanStack Start full-stack React framework using server functions, API routes, SSR, streaming with defer(), and multi-platform deployment via Vinxi/Nitro" globs: ["src/routes/**/*", "src/server/**/*", "app.config.ts"] alwaysApply: false

You are an expert in TanStack Start, TanStack Router, React, TypeScript, and full-stack type-safe web applications.

Core Principles

TanStack Start = TanStack Router + Vinxi (Vite + Nitro) for full-stack React
createServerFn is the primary way to run server-side logic with end-to-end type safety
All TanStack Router conventions apply — file-based routing, loaders, search params, etc.
Server functions replace REST endpoints for most use cases
Streaming + Suspense are first-class — use defer() for non-critical data

app.config.ts

import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: { plugins: [tsConfigPaths()] },
  server: {
    preset: 'node-server', // or: 'vercel', 'netlify', 'bun', 'cloudflare-pages'
  },
})

Root Route HTML Shell

// src/routes/__root.tsx
export const Route = createRootRoute({
  component: () => (
    <html lang="en">
      <head />
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  ),
})

Server Functions

// src/server/functions/posts.ts
export const getPost = createServerFn()
  .validator(z.object({ id: z.string() }))
  .handler(async ({ data }) => {
    const post = await db.post.findUnique({ where: { id: data.id } })
    if (!post) throw new Error('Post not found')
    return post
  })

export const createPost = createServerFn()
  .validator(z.object({ title: z.string().min(1), body: z.string() }))
  .handler(async ({ data }) => db.post.create({ data }))

Using Server Functions in Routes

export const Route = createFileRoute('/posts/$postId')({
  loader: ({ params }) => getPost({ data: { id: params.postId } }),
  component: PostDetail,
})

Mutations with Server Functions

const mutation = useMutation({
  mutationFn: (input: { title: string; body: string }) => createPost({ data: input }),
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['posts'] }),
})

API Routes (for webhooks / raw HTTP)

// src/routes/api/webhook.ts
export const Route = createAPIFileRoute('/api/webhook')({
  POST: async ({ request }) => {
    const body = await request.json()
    return Response.json({ received: true })
  },
})

Streaming with defer()

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    const post = await getPost({ data: { id: params.postId } })  // awaited = critical
    const comments = getComments({ data: { postId: params.postId } })  // not awaited
    return { post, comments: defer(comments) }
  },
  component: PostDetail,
})

function PostDetail() {
  const { post, comments } = Route.useLoaderData()
  return (
    <div>
      <h1>{post.title}</h1>
      <Suspense fallback={<CommentsSkeleton />}>
        <Await promise={comments}>{(c) => <CommentsList comments={c} />}</Await>
      </Suspense>
    </div>
  )
}

Environment Variables

Access server-only vars via process.env inside server functions only
Use import.meta.env.VITE_* for client-exposed variables
Never access process.env in client components

Deployment Targets

Configure server.preset in app.config.ts:

node-server — default Node.js
vercel — Vercel serverless/edge
netlify — Netlify Functions
bun — Bun runtime
cloudflare-pages — Cloudflare Pages + Workers

Related Skills

Agent-Reach

85.2k

Give your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.

headroom

73.7k

Compress tool outputs, logs, files, and RAG chunks before they reach the LLM. 20% fewer tokens for coding agents, 60-95% fewer tokens for JSON, same answers. Library, proxy, MCP server.

ruflo

73.2k

🌊 The original agent harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, federation, vector RAG integration, and native Claude Code / Codex / Hermes and many more Integrated

Scrapling

83.4k

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl! Don't be shy, join here: https://discord.gg/EMgGbDceNQ and follow here for daily tips and tricks: https://x.com/Scrapling_dev

PatrickJS

View profile

View on GitHub

GitHub Stars40.8k

CategoryOperations

Updated3mo ago

Forks3.5k

PatrickJS/tanstack-start

Languages

JavaScript

Trust signals

98/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

1 info