skills.rest
nam3886
nam3886COMMUNITY
Explore all skills by this author →
GitHub

ck:tanstack

Build full-stack TanStack Start apps with type-safe forms and streaming AI chat.

Updated Aug 23, 2026
Search Tags:#react#tanstack#forms#server-functions#tanstack-start#tanstack-form#tanstack-ai
One-click install
npx skills add https://github.com/nam3886/golang-echo-boilerplate --skill ck-tanstack-nam3886
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:tanstack
Source: https://github.com/nam3886/golang-echo-boilerplate/tree/main/.claude/skills/tanstack
Command: npx skills add https://github.com/nam3886/golang-echo-boilerplate --skill ck-tanstack-nam3886

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many developers need to rapidly scaffold and implement full-stack React applications that combine file-based routing, server functions, type-safe forms, and streaming AI chat without guessing framework conventions or integration patterns. This Skill consolidates TanStack Start project structure, server function patterns, form validation adapters, and AI streaming guidance into actionable instructions and examples. It reduces integration friction and prevents common mistakes when wiring middleware, validators, and AI adapters across client and server boundaries.

Core Features & Use Cases

  • Provides clear guidance on TanStack Start project layout, file-based routes, and route loader conventions for predictable routing behavior.
  • Shows how to create server functions with validators and middleware for authenticated, typed server APIs.
  • Explains TanStack Form usage patterns, schema adapters (Zod, Valibot), validation events, nested fields, and server-side validation merging.
  • Details TanStack AI setup for streaming chat, structured output schemas, isomorphic tools, and provider adapters (OpenAI, Anthropic, Google, Ollama).
  • Useful for scaffolding new projects, converting form flows to type-safe patterns, and adding production-ready AI chat endpoints.

Quick Start

Create a new TanStack Start project, add a file route with a Zod-validated server function, connect a TanStack Form for type-safe input, and expose an AI chat endpoint using a TanStack AI provider adapter.

Frequently Asked Questions about ck:tanstack

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

FAQPage Schema
How do I create server functions with validation in TanStack Start?▼

TanStack Start uses server functions combined with Zod or Valibot validators to ensure type-safe server APIs. You attach middleware to handle authentication and propagate context securely across client and server boundaries.

What is the best way to add streaming AI chat to a React app?▼

Adding streaming AI chat involves using TanStack AI with provider adapters for OpenAI, Anthropic, or Google. This setup supports streaming chat endpoints, structured output schemas, and isomorphic tools within your React application.

How do I build type-safe forms with TanStack Form and React?▼

Building type-safe forms in React with TanStack Form involves using schema adapters like Zod or Valibot. You configure validation events, manage nested fields, and merge server-side validation results to maintain strict end-to-end data integrity.

Does TanStack Start support file-based routing and route loaders?▼

TanStack Start supports file-based routing and route loader conventions to provide predictable routing behavior. This allows you to define routes and data loading logic directly within your project's file structure for clear organization.

Can I use multiple AI providers like OpenAI and Anthropic in the same full-stack React app?▼

You can use multiple AI providers in a full-stack React app by leveraging TanStack AI provider adapters. The framework supports streaming chat endpoints compatible with OpenAI, Anthropic, Google, and Ollama adapters simultaneously.

How do I scaffold a full-stack TanStack Start application?▼

To scaffold a full-stack TanStack Start application, set up the project layout, add file-based routes with Zod-validated server functions, connect TanStack Form for type-safe input, and expose AI chat endpoints via provider adapters.

Related Skills

Explore More Software Engineering Skills→
Thanh-aperoThanh-apero
1

tanstack

Scaffold full-stack React apps with TanStack Start, Form, and AI.

Community
Advanced
EdgeHuntEdgeHunt

ck:tanstack

Scaffold TanStack Start projects with routing, server functions, forms, and streaming AI.

Official
Advanced
joncranglejoncrangle
8

tanstack-solid

Enforce type-safe routing and reactive data flows in SolidJS applications.

Community
Advanced
p-o-ke-naep-o-ke-nae

nextjs-app-router-patterns

Design Next.js App Router architecture with server components and data fetching patterns.

Community
Advanced