[framework] TanStack surface
Names the TanStack area to work on, such as Start, Form, AI, Router-adjacent routes, or a framework comparison.
/ak:tanstack start posts route with loader Ctrl K
Quick Ref / Command
Engineer Kit
/ak:tanstack
Start, Form, and AI
Builds TanStack Start full-stack React apps, file-based routes, server functions, middleware, type-safe forms, and TanStack AI streaming/chat features.
01
Confirm TanStack surface
02
Create Start app
03
Model routes
04
Add server functions
Rule 01
Use Start for file routing plus server functions
Rule 02
Keep routeTree.gen.ts generated and never hand-edit it
Rule 03
Forms are headless and validation-centered
Rule 04
TanStack AI is alpha and should be described as such
Execution Map
Core lanes from input to output, aligned with the command's real execution path.
01
Start
Input, scope, route
- 1 Confirm TanStack surface Check whether the request is Start routing/server functions, Form validation, TanStack AI chat, or a comparison.
- 2 Create Start app Use npm create @tanstack/start@latest and the required root route, router config, generated route tree, and app config layout.
02
Work
Agent / skill execution
- 3 Model routes Add file routes, loaders, params, and components that read Route.useLoaderData for end-to-end inference.
- 4 Add server functions Use createServerFn with method, validator, and handler, keeping validation close to data access.
03
Verify
Gate, review, validation
- 5 Install middleware Use createMiddleware for auth/session context and pass user data through server context safely.
- 6 Build forms Use TanStack Form with Zod or Valibot, field validators, async debounce, SSR validation, and subscribed submit state.
04
Close
Report, handoff, artifact
- 7 Add AI streaming Use TanStack AI hooks and server routes to stream chat via provider adapters and structured output when needed.
- 8 Compare honestly When comparing frameworks, call out TanStack's client-first inference, Nitro deployment, and planned-not-current RSC status.
Syntax, arguments, subcommands
How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.
Syntax
/ak:tanstack [framework] [feature]Arguments
[feature] Feature brief
Describes the project, route, server function, middleware, form validation, or AI chat/streaming feature to design or implement.
/ak:tanstack form signup validation with zodSample Prompt
Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.
Start route and loader Recommended
/ak:tanstack start posts route with loader- Use when:
- A TanStack Start page needs typed params and server-loaded data.
- Expected:
- Produces file-route, loader, component, and server-function patterns with typed params and data boundaries.
Type-safe form
/ak:tanstack form signup validation with zod- Use when:
- A form needs field-level validation and reliable submit state.
- Expected:
- Uses TanStack Form with validators, async debouncing where needed, and form.Subscribe for targeted reactive UI updates.
Streaming chat
/ak:tanstack ai streaming chat endpoint- Use when:
- Adding AI chat to a TanStack Start application.
- Expected:
- Shows client useChat wiring and a server route streaming through the appropriate provider adapter.
Handled Scope
- TanStack Start
- file routes
- server functions
- middleware
- TanStack Form
- AI streaming