SkillAgentSearch skills...

tanstack-start-cursorrules-prompt-file

Cursor rules for TanStack Start full-stack React framework including server functions, API routes, streaming with defer(), SSR, and multi-platform deployment.

GenerateConvertImprove

Install / Use

npx skills add PatrickJS/awesome-cursorrules

Installs into whichever agent you are using.

About this skill
📦

Other

Other agent config

Quality Score

94/100

Category

Operations

Supported Platforms

Cursor

Our assessment of tanstack-start-cursorrules-prompt-file

tanstack-start-cursorrules-prompt-file scores 94/100 on our quality scale, 5th of 128 Operations skills we index (top 4%).

Its Other is 7.1 KB long, well organised into 15 sections with 9 code examples: a thorough specification that gives an agent plenty to work with.

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

Substance
29/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-23. 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-cursorrules-prompt-file compared with similar skills

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

SkillScoreStarsUpdatedFormat
tanstack-start-cursorrules-prompt-file (this skill)by PatrickJS9440.8k4mo agoOther
Agent-Reachby Panniantong10085.2k9d agoCLAUDE.md
headroomby headroomlabs-ai10073.7ktodayCLAUDE.md
rufloby ruvnet10073.2ktodayCLAUDE.md
Scraplingby D4Vinci10083.3ktodayMCP Server

Frequently asked questions

How do I install tanstack-start-cursorrules-prompt-file?
Run npx skills add PatrickJS/awesome-cursorrules. The install tabs above show the steps for each supported agent.
Which AI agents does tanstack-start-cursorrules-prompt-file 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-cursorrules-prompt-file 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-cursorrules-prompt-file 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: "Cursor rules for TanStack Start full-stack React framework including server functions, API routes, streaming with defer(), SSR, and multi-platform deployment." globs: */ alwaysApply: false

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

TanStack Start Guidelines

What is TanStack Start

TanStack Start is a full-stack React framework built on top of TanStack Router and Vinxi (Vite + Nitro). It provides SSR, streaming, server functions, and API routes with end-to-end type safety.

Core Principles

  • TanStack Start is file-based routing via TanStack Router — all routing conventions apply
  • Server Functions (createServerFn) are the primary way to run server-side logic
  • Full-stack type safety: server function inputs/outputs are typed end-to-end
  • Streaming and Suspense are first-class — use them for progressive rendering
  • Start is NOT an API-first framework — server functions replace REST endpoints for most use cases

Project Structure

src/
  routes/
    __root.tsx          ← Root layout with HTML shell
    index.tsx           ← Home route
    posts/
      index.tsx
      $postId.tsx
  server/
    functions/          ← Server functions (recommended organization)
      posts.ts
      auth.ts
  lib/
    db.ts               ← Database client
    auth.ts             ← Auth utilities
app.config.ts           ← TanStack Start / Vinxi config

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 Setup

// src/routes/__root.tsx
import { createRootRoute, ScrollRestoration, Scripts, Outlet } from '@tanstack/react-router'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <html lang="en">
      <head />
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === 'development' && (
          <>
            <TanStackRouterDevtools />
            <ReactQueryDevtools />
          </>
        )}
      </body>
    </html>
  )
}

Server Functions

  • Use createServerFn to define functions that always run on the server
  • Validate inputs with Zod using .validator()
  • Use .handler() for the implementation
  • Server functions are called like regular async functions from components or loaders
// src/server/functions/posts.ts
import { createServerFn } from '@tanstack/start'
import { z } from 'zod'

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, context }) => {
    // context has access to request headers, cookies, etc.
    return db.post.create({ data })
  })

Using Server Functions in Routes

// src/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router'
import { getPost } from '../../server/functions/posts'

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

function PostDetail() {
  const post = Route.useLoaderData()
  return <article><h1>{post.title}</h1></article>
}

Mutations with Server Functions

  • Call server functions directly in event handlers or via TanStack Query mutations
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { createPost } from '../../server/functions/posts'

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

  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      const fd = new FormData(e.currentTarget)
      mutation.mutate({ title: fd.get('title') as string, body: fd.get('body') as string })
    }}>
      <input name="title" />
      <textarea name="body" />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? 'Creating...' : 'Create'}
      </button>
    </form>
  )
}

API Routes

  • Use createAPIFileRoute for raw HTTP endpoints (webhooks, third-party integrations)
  • Place in src/routes/api/ directory
// src/routes/api/webhook.ts
import { createAPIFileRoute } from '@tanstack/start/api'

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

Streaming & Suspense

  • Use defer() to stream non-critical data after the initial render
  • Wrap deferred data consumers in <Suspense>
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 (deferred)
    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}>
          {(resolved) => <CommentsList comments={resolved} />}
        </Await>
      </Suspense>
    </div>
  )
}

Authentication

  • Read cookies/headers in server functions using TanStack Start's server context
  • Use beforeLoad in routes for auth guards
import { getWebRequest } from '@tanstack/start/server'

export const getSession = createServerFn().handler(async () => {
  const request = getWebRequest()
  const sessionToken = getCookie(request, 'session')
  return validateSession(sessionToken)
})

Deployment Targets

  • node-server — default Node.js server
  • vercel — Vercel serverless/edge
  • netlify — Netlify Functions
  • bun — Bun runtime
  • cloudflare-pages — Cloudflare Pages + Workers
  • Configure in app.config.ts under server.preset

Environment Variables

  • Access server-only vars directly from process.env inside server functions
  • Use Vite's import.meta.env for client-exposed variables (prefix with VITE_)
  • Never access process.env in client components

TanStack Query Integration

  • Provide QueryClient via router context for loader-level prefetching
  • Use ensureQueryData in loaders to populate cache before render
  • This eliminates loading states for route-level data fetching

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.3k

🕷️ 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-cursorrules-prompt-file

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