skills.rest
MinhQuyen274
MinhQuyen274COMMUNITY
Explore all skills by this author →
GitHub

ck:tanstack

Build full-stack React apps with TanStack Start routes, server functions, forms, and AI streaming.

Updated Aug 27, 2026
Search Tags:#server functions#tanstack start#routing#ai chat#type-safe forms#streaming ai
One-click install
npx skills add https://github.com/MinhQuyen274/smartify --skill ck-tanstack-minhquyen274
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:tanstack
Source: https://github.com/MinhQuyen274/smartify/tree/main/Frontend_PROJECT_Figma/.opencode/skills/tanstack
Command: npx skills add https://github.com/MinhQuyen274/smartify --skill ck-tanstack-minhquyen274

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack-based full-stack React teams need a single, consistent way to scaffold routes, server functions, type-safe forms, and streaming AI chat so development stays type-safe and scalable.

Core Features & Use Cases

  • TanStack Start full-stack scaffolding: file-based routing, loaders, server functions, and middleware for authenticated server-side behavior.
  • TanStack Form type-safe forms: headless form fields with sync/async validation patterns (e.g., Zod/Valibot) and SSR-friendly validation flows.
  • TanStack AI streaming/chat: connect client chat hooks to server API routes that stream responses and support structured output with schemas.
  • Use Case: Ship a posts app with protected server functions, validated contact forms, and an AI-powered chat endpoint that streams answers while enforcing output structure.

Quick Start

Use the skill when you are building a TanStack Start project and you need file-based routes, server functions, TanStack Form validation, and a streaming TanStack 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 create streaming AI chat endpoints in a TanStack Start application?▼

Create streaming AI chat endpoints in TanStack Start by exposing API routes that stream responses and integrating TanStack AI useChat with chat-toStreamResponse and supported provider adapters.

How do I build type-safe forms with async validation in TanStack Start?▼

Build type-safe forms in TanStack Start using TanStack Form's useForm and form.Field headless components, applying sync/async validation adapters like Zod or Valibot for SSR-friendly validation flows.

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

Set up file-based routing with server functions in TanStack Start using createFileRoute for loaders and createServerFn to apply middleware patterns for authenticated server-side behavior.

Can I enforce structured output schemas when streaming AI chat responses with TanStack AI?▼

Yes, TanStack AI supports streaming chat responses while enforcing structured output with schemas, allowing server API routes to stream answers directly to client chat hooks.

What is the best way to scaffold a full-stack React app with protected server functions and validated forms?▼

Scaffold full-stack React apps using TanStack Start for protected server functions and middleware, combined with TanStack Form for headless type-safe validated forms and TanStack AI for streaming chat.

Related Skills

Explore More Software Engineering Skills→
ovachieverovachiever
52

tanstack-start

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

Community
Advanced
MinhHoangDonoMinhHoangDono

ck:tanstack

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

Community
Intermediate
buchananwillbuchananwill
2

scaffold-dashboard-patterns

Codify dashboard SPA patterns for Mantine, TanStack Router, and TanStack Query.

Community
Advanced
dsactivi-2dsactivi-2

brave-search

Search the web and extract readable content as Markdown using the Brave Search API.

Community
Basic