skills.rest
jangtrinh
jangtrinhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:tanstack

Build full-stack TanStack Start apps with routing, forms, validation, and AI streaming.

Updated Apr 9, 2026
Search Tags:#server functions#tanstack#validation#structured output#tanstack-form#react-start#ai streaming
One-click install
npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-tanstack-jangtrinh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:tanstack
Source: https://github.com/jangtrinh/demo-Lam/tree/main/.claude/skills/tanstack
Command: npx skills add https://github.com/jangtrinh/demo-Lam --skill ck-tanstack-jangtrinh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack project work can become fragmented across routing, server functions, forms, validation, and AI integration, slowing teams down and causing inconsistent patterns.

Core Features & Use Cases

  • TanStack Start setup guidance: scaffolding, routing conventions, loaders, middleware, and server function patterns for consistent full-stack development.
  • TanStack Form patterns: headless, type-safe form state with client-side/blur async validation and server-side validation merging.
  • TanStack AI integration: AI streaming/chat via server SSE endpoints, structured outputs with schemas, and isomorphic tool definitions for reusable behaviors.

Quick Start

Ask the AI to scaffold a TanStack Start project with a route that includes a server function, a TanStack Form with Zod validation, and an AI chat endpoint using TanStack AI streaming.

Frequently Asked Questions about ck:tanstack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add server function validation to a TanStack Start form?▼

TanStack Start form validation uses a Zod validator adapter with @tanstack/react-form to enforce type-safe schemas. You implement synchronous client-side checks and merge them with asynchronous server-side validation results.

What is the best way to stream AI chat responses in a React Start app?▼

Streaming AI chat responses in React Start uses @tanstack/react-ai hooks paired with a server SSE endpoint. This TanStack AI server stream response delivers real-time structured output directly to your UI.

How do I set up authenticated loaders and middleware in TanStack Start?▼

TanStack Start setup applies file-based routing conventions to build authenticated loaders and middleware. This establishes consistent full-stack server function patterns for protected application routes.

Can I use TanStack Form with async blur validation and server checks?▼

TanStack Form supports headless type-safe state management with client-side blur async validation. It seamlessly merges these asynchronous checks with server-side validation logic.

Does TanStack AI integration support structured output schemas for React UIs?▼

TanStack AI integration supports structured outputs with schemas via server streaming endpoints. It uses isomorphic tool definitions to provide reusable behaviors for your React UI components.

Related Skills

Explore More Software Engineering Skills→
hashintelhashintel
35

tanstack-start

Scaffold TanStack Start routing, API routes, and AI integrations for React apps.

Official
Intermediate
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
haidonglethqbhaidonglethqb

ck:tanstack

Integrate TanStack Start, Form, and AI into full-stack React apps.

Community
Advanced
ovachieverovachiever
52

tanstack-start

Build full-stack React apps on Cloudflare Workers with TanStack Start.

Community
Advanced