ck:tanstack

Automate setup, form management, and AI integration for TanStack React applications.

1|Updated Jun 16, 2026
One-click install
npx skills add https://github.com/TNHoang2708/Gym_Ver2 --skill ck-tanstack-tnhoang2708
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:tanstack
Source: https://github.com/TNHoang2708/Gym_Ver2/tree/main/.claude/skills/tanstack
Command: npx skills add https://github.com/TNHoang2708/Gym_Ver2 --skill ck-tanstack-tnhoang2708

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-start, @tanstack/zod-form-adapter, @tanstack/react-ai, @tanstack/ai-openai, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of managing full-stack React applications using the TanStack suite of tools, including Start, Form, and AI, simplifying common tasks like project setup, form handling, and AI integration.

Core Features & Use Cases

  • Project Setup: Automates the creation and development process for TanStack projects.
  • Form Management: Facilitates building headless forms with type-safe validation.
  • AI Integration: Adds AI chat and streaming capabilities to TanStack apps.
  • Use Case: Use this Skill to build a full-stack React application with routing, server functions, and AI chat features using TanStack tools.

Quick Start

Create a new TanStack project and set up an AI chat feature with the following command: npm create @tanstack/start@latest && npm run dev

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 AI chat and streaming capabilities in a full-stack React application using TanStack?

Set up AI chat in your full-stack React app by configuring TanStack AI integration. This Skill automates adding AI chat features and streaming capabilities using the TanStack suite, supporting both server-side operations and client-side components seamlessly.

How do I build headless forms with type-safe validation for my TanStack React project?

Build headless forms with type-safe validation by leveraging the TanStack Form and Zod adapter. This Skill facilitates robust form management, ensuring your React application handles form state and validation efficiently without restrictive UI components.

What is the best way to automate full-stack React development with the TanStack suite?

Automate full-stack React development by using this Skill to streamline setup, form management, and AI integration. It solves the problem of managing TanStack projects, allowing you to focus on efficient project creation and server-side routing.

Does TanStack Start support server functions and routing for full-stack React applications?

TanStack Start supports server functions and routing for full-stack React applications. This Skill focuses on efficient project creation and robust form handling while integrating server-side operations and client-side components within your app.

Can I integrate OpenAI streaming capabilities directly into my TanStack React app?

You can integrate OpenAI streaming capabilities directly using the TanStack AI and OpenAI adapters. This Skill adds AI chat and streaming capabilities to your TanStack apps, ensuring seamless AI integration with client-side components.