skills.rest
dthuy62
dthuy62COMMUNITY
Explore all skills by this author →
GitHub

ck:tanstack

Build TanStack Start, Form, and AI implementations with routing, validation, and streaming.

Updated May 10, 2026
Search Tags:#react#server functions#tanstack#ssr#form validation#file-based routing#streaming ai
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-tanstack-dthuy62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:tanstack
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/tanstack
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-tanstack-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build TanStack Start applications, design type-safe forms, and add streaming AI features without juggling disconnected references or guessing the correct patterns.

Core Features & Use Cases

  • TanStack Start project scaffolding, file-based routing, middleware, server functions, API routes, and opt-in SSR.
  • TanStack Form setup with schema validation, nested fields, async checks, submission state, and server-side validation.
  • TanStack AI chat and streaming workflows with provider adapters and structured outputs.
  • Use it when creating a new TanStack app, wiring authenticated routes, validating complex forms, or building an AI assistant inside a React app.

Quick Start

Ask for a TanStack solution that matches your goal, such as a Start app with routing and server functions, a validated form flow, or a streaming AI chat endpoint.

Frequently Asked Questions about ck:tanstack

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

FAQPage Schema
How do I set up TanStack Start with file-based routing and server functions?▼

TanStack Start setup uses file-based routing for project structure, defining server functions and middleware to handle full-stack React logic. This provides a foundation for opt-in SSR and API routes.

How do I add schema validation to TanStack Form for nested fields?▼

TanStack Form integrates schema validation adapters to validate nested fields and perform async checks. This ensures type-safe form submissions with both client-side and server-side validation rules.

Can I build a streaming AI chat endpoint in React using TanStack?▼

TanStack AI supports streaming chat workflows with provider adapters for OpenAI, Anthropic, Google Gemini, and Ollama. This enables structured outputs and real-time AI assistant features inside React apps.

Does TanStack Start support opt-in SSR and authenticated route middleware?▼

TanStack Start supports opt-in SSR and uses middleware to wire authenticated routes securely. This approach manages server functions and API routes for full-stack React applications.

What is the best way to structure a full-stack React app with TanStack Start?▼

Structuring a TanStack Start app involves file-based routing patterns, server functions, and API routes. This setup organizes full-stack React logic and handles opt-in SSR for dynamic content delivery.

Why do I need server-side validation in TanStack Form submissions?▼

TanStack Form uses server-side validation to secure submission state and verify nested fields against schema rules. This prevents invalid data from processing and ensures async checks pass securely.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
MinhHoangDonoMinhHoangDono

ck:tanstack

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

Community
Intermediate
hashintelhashintel
35

tanstack-start

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

Official
Intermediate
jezwebjezweb
961

TanStack Start

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

Community
Intermediate