plugins/tanstack-start-expert/skills/start-server-functions/SKILL.md
Use when creating type-safe RPC server logic in TanStack Start with createServerFn — GET/POST methods, .validator() (Zod or function), .handler(), useServerFn hook, FormData input, Response output, strict serialization, throw redirect()/notFound(), server context utilities, and CSRF protection. Do NOT use for: raw external HTTP endpoints (use start-server-routes), reusable middleware chains (use start-middleware), or Next.js/Remix "use server" patterns.
npx skillsauth add fusengine/agents start-server-functionsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Server functions are same-origin, type-safe RPC endpoints created with
createServerFn. They run only on the server but are callable from loaders,
components, hooks, and other server functions. This skill targets
@tanstack/react-start v1.166.2.
Before implementing, verify current APIs against Context7
(/websites/tanstack_start_framework_react) + Exa, then explore the target
codebase. After changes, run fuse-ai-pilot:sniper.
beforeLoad
redirect protects the route UI, NOT the RPC — an attacker can hit the
endpoint directly. Put auth inside the .handler() or in middleware for
every function touching private data."use server", getServerSideProps,
Remix loader/action, or react-router-dom. Use createServerFn
exclusively (from @tanstack/react-start).useServerFn is MANDATORY when the function does throw redirect() or
throw notFound() — the hook wires the throw into the router. Optional for
plain-data functions (a direct call or useMutation/useQuery is fine).FormData allowed as POST input, Response
allowed as output). strict: false disables only the TS check, not runtime.| When to Use | Do NOT Use | |-------------|------------| | Internal type-safe RPC from your own app | Public/cross-origin API (use start-server-routes) | | Data fetching in loaders | Raw HTTP method routing on a URL path | | Mutations from event handlers | Composable auth/logging chains (use start-middleware) |
src/utils/
├── users.functions.ts # createServerFn wrappers — safe to import anywhere
├── users.server.ts # Server-only helpers (DB queries, secrets)
└── schemas.ts # Shared Zod schemas — client-safe
The build replaces server function bodies with RPC stubs in the client bundle,
so static imports of .functions.ts from client components are safe.
→ See crud-server-functions.md
| Topic | Reference | Load when | |-------|-----------|-----------| | Creating functions | creating.md | Defining createServerFn, validators, serialization | | Calling functions | calling.md | Invoking from loaders/components, useServerFn, redirect/notFound | | Security | security.md | Enforcing auth, CSRF, caching auth'd responses |
| Template | When to Use | |----------|-------------| | crud-server-functions.md | Building a full CRUD module | | form-with-validation.md | Handling FormData submissions with Zod |
import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'
export const createUser = createServerFn({ method: 'POST' })
.validator(z.object({ name: z.string().min(1) }))
.handler(async ({ data }) => db.users.create(data))
await createUser({ data: { name: 'John' } })
import { useServerFn } from '@tanstack/react-start'
import { redirect } from '@tanstack/react-router'
const signup = createServerFn({ method: 'POST' })
.handler(async () => { throw redirect({ to: '/dashboard' }) })
// In a component:
const signupFn = useServerFn(signup)
→ See calling.md for the full redirect/notFound rules
.server.ts, wrappers into .functions.tsuseServerFn when in doubt (no-op for plain-data functions)"use server", getServerSideProps, or Remix actionimport() server functions (breaks bundler shaking)testing
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
development
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
development
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
development
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.