Agent skill

Tanstack Start

by secondsky in secondsky/claude-skills

TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.

MITAuto-check: notesDevelopment

Install Tanstack Start

skills CLI
$ npx skills add secondsky/claude-skills --skill tanstack-start -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install secondsky/claude-skills tanstack-start --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/tanstack-start/skills/tanstack-start .claude/skills/tanstack-start && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tanstack-start
GitHub stars
227
Token cost
~1.6k tokens
SKILL.md length
576 words
Files
10 (incl. scripts, references)
Skills in repo
169
Repo updated
First seen
Licence
MIT

At a glance

TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.

  • Next.js migration
  • SKILL.md covers Use this skill when, What’s inside, Quick Start (React) and Routing + Data Best Practices, plus 5 more sections
  • Runs Shell scripts from its folder; calls npm and curl
  • Encountering hydration

What it does

Tanstack Start is an agent skill from secondsky/claude-skills. TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including scripts and reference files (for example `references/cloudflare-hosting-and-env.md`, `references/devtools-and-llm-support.md` and `references/execution-and-auth.md`).

It sits in Development. It works with TanStack, React, Cloudflare Workers and Next.js. The repository describes itself as: Production-ready skills for Claude Code CLI - Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.

When your agent uses it

  • Next.js migration
  • Encountering hydration
  • Data pattern errors

Example prompts

  • “/tanstack-start”

Requirements

  • A Bash shell
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Edit

What it can do on your machine

Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Edit

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tanstack Start loads about 1.6k tokens when it runs, and up to ~6.1k if it reads all its reference files. Until then it costs about 49 tokens; SKILL.md has 576 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Edit

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 576 words, ~1,642 tokens.

Download SKILL.mdSave it as .claude/skills/tanstack-start/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.
name
tanstack-start
description
TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Use for Next.js migration, edge rendering, or encountering hydration, auth, data pattern errors.
allowed-tools
Bash, Read, Write, Edit
license
MIT
metadata.version
1.0.0-rc.1
metadata.author
Claude Skills Maintainers
metadata.last-verified
2025-12-09
metadata.production-tested
false
metadata.status
rc
metadata.keywords
tanstack start, tanstack react start, full-stack react, selective ssr, spa mode, static prerender, server functions, server routes, cloudflare workers, edge…

TanStack Start (React) — RC-Ready Playbook

Full-stack React on TanStack Router with per-route SSR/CSR, file-based routing, server functions, and first-class Cloudflare Workers support.

Use this skill when

  • Building a greenfield React app that needs route-level SSR/CSR/SSG switches.
  • Migrating from Next.js/React Router while keeping file-based routing + API routes.
  • Shipping to edge runtimes (Workers) with typed server functions and bindings.
  • You want predictable routing with type-safe params/search + built-in preloading.

What’s inside

  • References: quickstart/layout, rendering modes, server functions, Cloudflare hosting, execution/auth, plus new routing/data/navigation/devtools guides.
  • Script: scripts/bootstrap-cloudflare-start.sh <app> scaffolds Start + Workers + binding types.
  • Troubleshooting: hydration, API routing, bindings, navigation/preloading failures.

Quick Start (React)

bash
npm create @tanstack/start@latest my-app
cd my-app
npm run dev

Manual installs (all bundle targets are supported): add @tanstack/react-router + @tanstack/react-start with your bundler plugin (vite, webpack, or esbuild) per the official install guides.

Core layout reminder
  • app/routes/** file-based routes → router tree, automatic code-splitting + data preloading.
  • app/entry.client.tsx hydrates <StartClient />; app/entry.server.tsx wraps createServerEntry.
  • app/config.ts or app/start.ts sets defaultSsr, spaMode, middleware, and context.

Routing + Data Best Practices

  • Type-safe params & search: createFileRoute() infers path params; add validateSearch (zod) to parse and coerce search params.
  • Route matching order is deterministic (index → static → dynamic → splat); rely on this when adding catch-alls.
  • Loaders run once per location change; return plain data, throw redirect()/notFound() for control flow.
  • Data mutations: colocate action/server functions; keep loaders read-only and invalidate via router.invalidate() after mutation.
  • TanStack Query bridge: create a QueryClient in router context and ensureQueryData inside loaders to dedupe fetches.
  • Deferred/external data: stream partial data or read from external loaders; prefer suspense-friendly responses.
  • Head management: set head per route for <title>/meta; derive from loader data to keep SEO consistent.
  • Not-found/auth: throw notFound() or redirect() in loaders/middleware; use error boundaries for UX.

Example route (typed search + data-only SSR):

ts
// app/routes/posts.$postId.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'
import { z } from 'zod'

export const Route = createFileRoute('/posts/$postId')({
  validateSearch: z.object({ preview: z.boolean().optional() }),
  ssr: 'data-only',
  loader: async ({ params, search, context }) => {
    const post = await context.queryClient.ensureQueryData(['post', params.postId], () =>
      fetch(`/api/posts/${params.postId}?preview=${!!search.preview}`).then(r => r.json())
    )
    if (!post.published && !search.preview) throw redirect({ to: '/drafts' })
    return { post }
  },
})

Navigation, Preloading, and UX

  • Link prefetch defaults: <Link preload="intent"> (hover/focus) preloads route data/code; use preload="render" for above-the-fold routes.
  • Programmatic preloading: router.preloadRoute({ to, search }) to warm caches before navigation (e.g., on visibility).
  • Route masking: keep canonical URLs while showing user-friendly masks (e.g., /products?slug=abc masked as /p/abc).
  • Navigation blocking: protect unsaved forms with router.navigate({ to, replace, from }) blockers or useBlocker.
  • Scroll restoration: enable scrollRestoration to restore positions on back/forward; customize per route when using long lists.
  • Search param serialization: customize parse/stringify to keep numbers/dates stable and avoid stringified booleans.

Show full SKILL.md (214 more words)Show less

Rendering & Performance

  • Per-route SSR: set ssr: true | false | 'data-only' on routes; defaultSsr config sets the baseline.
  • Code-splitting: file-based routes auto-split; add lazy/load for manual chunks on code-based routes.
  • Preloading strategy: pair preload="intent" links with defaultPreloadStaleTime to avoid over-fetching.
  • Render optimizations: keep loaders pure, memoize heavy components, and use pendingComponent for CSR routes to avoid layout shift.

Devtools, Linting, and LLM Support

  • Add <RouterDevtools /> during development to inspect matches, loader states, and preloading.
  • Enable the ESLint plugin @tanstack/eslint-plugin-router with the recommended config to enforce inference-sensitive property order (e.g., beforeLoad before loader).
  • LLM-aware routing: the Router exposes structured route metadata to LLM agents; keep descriptions concise in Route meta for better AI navigation.

Deployment Notes (Cloudflare-friendly)

  • Keep cloudflare({ viteEnvironment: { name: 'ssr' } }) first in Vite plugins so bindings reach server entry.
  • Regenerate bindings after changes: npm run cf-typegen.
  • For static-heavy sites, enable prerender to ship HTML to Workers Assets/Pages; exclude param routes or add explicit pages.

Ship Checklist

  • Routes load without hydration warnings (prefer ssr: 'data-only' for non-deterministic UI).
  • Search params validated with validateSearch and custom serializer where needed.
  • Link preloading configured for high-traffic routes; blockers added for unsaved forms.
  • ESLint plugin enabled (create-route-property-order rule) and npm run check passes.
  • Devtools verified locally; router.matches state looks correct.
  • Cloudflare bindings typed (cf-typegen) and streaming tested via curl -N.

© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 9 other files (scripts, references) in plugins/tanstack-start/skills/tanstack-start of secondsky/claude-skills.

  • SKILL.md
  • references/cloudflare-hosting-and-env.md
  • references/devtools-and-llm-support.md
  • references/execution-and-auth.md
  • references/navigation-and-preloading.md
  • references/quickstart-and-layout.md
  • references/rendering-modes.md
  • references/routing-and-data-loading.md
  • references/server-functions-and-middleware.md
  • scripts/bootstrap-cloudflare-start.sh

Open the folder on GitHubat commit 8837836

Compare with similar skills

Tanstack Start next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tanstack Start compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tanstack Start this skillsecondsky/claude-skills227—~1.6kAutomated safety check: NotesMIT
Moai Ref React Patternsmodu-ai/moai-adk1.2k—~1.8kAutomated safety check: PassApache-2.0
Component Patternsrevfactory/harness-1001.3k—~1.5kAutomated safety check: PassApache-2.0
Nextjs On Cloudflarecloudflare/skills3k2 repos~678Automated safety check: PassApache-2.0
Prepare Cloudflare Production DeploymentLubomirGeorgiev/cloudflare-workers-nextjs-saas-template786—~5.9kAutomated safety check: NotesMIT
Spiceflowremorses/spiceflow167—~1.9kAutomated safety check: PassMIT

Similar skills

  • Moai Ref React Patterns

    modu-ai/moai-adk

    React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.

    1.2k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Component Patterns

    revfactory/harness-100

    React/Next.js component design pattern library. An agent skill from revfactory/harness-100.

    1.3k GitHub stars~1.5k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed
  • Nextjs On Cloudflare

    cloudflare/skills

    Official

    Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.

    3k GitHub starsUsed in 2 repos~678 tokens
    DevOps & CloudAuto-check passed
  • Prepare Cloudflare Production Deployment

    LubomirGeorgiev/cloudflare-workers-nextjs-saas-template

    Source-of-truth runbook for preparing this Vinext Cloudflare Workers SaaS template for production deployment.

    786 GitHub stars~5.9k tokensUpdated today
    DevOps & CloudAuto-check: notes
  • Spiceflow

    remorses/spiceflow

    Spiceflow is a super simple, fast, and type-safe API and React Server Components framework for TypeScript.

    167 GitHub stars~1.9k tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Agents SDK

    hodgef/apiker

    Build AI agents on Cloudflare Workers using the Agents SDK. An agent skill from hodgef/apiker.

    127 GitHub starsUsed in 3 repos~3k tokens
    Backend & APIsAuto-check passed

More from secondsky/claude-skills

All 169 skills in this repo
  • Tanstack AI

    secondsky/claude-skills

    TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama.

    227 GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check: notes
  • Auto Animate

    secondsky/claude-skills

    AutoAnimate (@formkit/auto-animate) zero-config animations for React.

    227 GitHub stars~2.9k tokensUpdated 9 days ago
    Auto-check passed
  • Base UI React

    secondsky/claude-skills

    MUI Base UI unstyled React components with Floating UI. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.9k tokensUpdated 9 days ago
    Auto-check passed
  • Cloudflare Images

    secondsky/claude-skills

    This skill should be used when the user asks to "upload images to Cloudflare", "implement direct creator upload", "configure image transformations", "optimize WebP/AVIF", "create image variants"…

    227 GitHub stars~3.6k tokensUpdated 9 days ago
    Auto-check: notes
  • Cloudflare Nextjs

    secondsky/claude-skills

    Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare).

    227 GitHub stars~5.3k tokensUpdated 9 days ago
    Auto-check: notes
  • Cloudflare Sandbox

    secondsky/claude-skills

    Cloudflare Sandboxes SDK for secure code execution in Linux containers at edge.

    227 GitHub stars~4.5k tokensUpdated 9 days ago
    Auto-check passed

Categories

Questions about Tanstack Start

What does Tanstack Start do?

TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers. Tanstack Start is an agent skill from secondsky/claude-skills. TanStack Start (RC) full-stack React with server functions, SSR, Cloudflare Workers.

When should I use Tanstack Start?

Tanstack Start fits situations like: Next.js migration; encountering hydration; data pattern errors.

How do I install Tanstack Start in Claude Code?

Run `npx skills add secondsky/claude-skills --skill tanstack-start -a claude-code`. Or copy the skill folder (plugins/tanstack-start/skills/tanstack-start in secondsky/claude-skills) into .claude/skills/tanstack-start in your project. Claude Code loads it when a task matches its description.

How do I install Tanstack Start in Codex?

Run `npx skills add secondsky/claude-skills --skill tanstack-start -a codex`. Or copy the skill folder (plugins/tanstack-start/skills/tanstack-start in secondsky/claude-skills) into .agents/skills/tanstack-start in your project. Codex loads it when a task matches its description.

Can I use Tanstack Start in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add secondsky/claude-skills --skill tanstack-start -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tanstack-start, .gemini/skills/tanstack-start, .github/skills/tanstack-start and .opencode/skills/tanstack-start in your project.

What does Tanstack Start need to run?

Going by SKILL.md and its folder, Tanstack Start needs a shell for the scripts in its folder and the command-line tools its instructions call (npm and curl). Our summary lists: A Bash shell. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit.

Does Tanstack Start access the network?

SKILL.md contains no URLs. Its commands use npm and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Tanstack Start safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Tanstack Start use?

Tanstack Start is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tanstack Start use?

About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.5k tokens, read only when the agent opens those files.

What are the alternatives to Tanstack Start?

Skills that share tags, products or a category with Tanstack Start: Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars), Component Patterns (revfactory/harness-100, 1.3k stars), Nextjs On Cloudflare (cloudflare/skills, 3k stars) and Prepare Cloudflare Production Deployment (LubomirGeorgiev/cloudflare-workers-nextjs-saas-template, 786 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tanstack Start?

secondsky (a GitHub user) maintains it in secondsky/claude-skills, which has 227 GitHub stars. The repository holds 169 skills in this directory. The repository was last updated on September 28, 2026.

Source: secondsky/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.