Build TanStack Start, Form, or AI features with ak:tanstack

Use ak:tanstack to implement a bounded feature with TanStack Start, TanStack Form, or TanStack AI. The Skill covers file-based routes, loaders, server functions, middleware, form state and validation, streaming chat, structured output, and provider adapters.

Choose the TanStack surface first

Use ak:tanstack when

• You are creating or changing a TanStack Start route, loader, API route, server function, middleware, SSR boundary, or deployment configuration.
• You need a typed TanStack Form with sync, async, nested, array, or server-side validation.
• You are explicitly evaluating or prototyping TanStack AI streaming, tools, or structured output and accept its alpha status.
• You need guidance that follows the project’s installed TanStack APIs rather than a generic React pattern.

Choose another workflow when

• The primary task is TanStack Query, Table, or Virtual. This Skill names those as outside its main scope; use the project’s current library guidance.
• You need general React implementation. Use ak:frontend-development.
• You are still choosing between frameworks. Use ak:web-frameworks or ak:brainstorm before scaffolding.
• You need a production-stability guarantee for an alpha AI dependency. Keep it experimental or choose a mature approved surface.

Prepare versions, generated files, and services

Before you start:

• Complete Onboarding, and confirm Engineer Kit is installed for the current runtime and scope.
• Read the installed TanStack Start, Router, Form, validation adapter, AI, React, Vite, and server-runtime versions from the project.
• Identify route-generation rules and preserve routeTree.gen.ts as generated output; do not hand-edit it.
• Define the route/form/chat contract, authentication, validation, loading, error, cancellation, retry, accessibility, and data-retention behavior.
• For AI work, use test credentials and synthetic prompts. Keep provider API keys, user content, tool secrets, and model output containing sensitive data out of logs, client bundles, prompts, fixtures, and Git.
• State whether scaffolding, package installation, code generation, database or external API calls, model spend, builds, or deployment are allowed.

The bundled references are concise API snapshots. Verify current package APIs, server-runtime behavior, deploy presets, and provider support before mutation.

See Runtime adapters for component-level differences.

Run the Skill

The declared argument shape is [framework] [feature]. Start the request with start, form, or ai so the dependency and runtime boundary stays clear.

/ak:tanstack "start Add an authenticated /settings route to the existing app. Reuse its router and session middleware, validate server-function input, preserve route generation, add pending/error states and focused tests, and do not install packages, call production services, or deploy."

/ak:tanstack "start Add an authenticated /settings route to the existing app. Reuse its router and session middleware, validate server-function input, preserve route generation, add pending/error states and focused tests, and do not install packages, call production services, or deploy."

$ak:tanstack "start Add an authenticated /settings route to the existing app. Reuse its router and session middleware, validate server-function input, preserve route generation, add pending/error states and focused tests, and do not install packages, call production services, or deploy."

Observe the implementation stages

1. The run verifies the active surface and versions. It reads package and project evidence instead of assuming the bundled examples match.
2. The run maps existing contracts. Routes, generated trees, server/client ownership, validation, authentication, form state, or stream protocol are made explicit.
3. The run defines user-visible states. Pending, success, empty, invalid, server-error, disconnected, canceled, and retry behavior are included as applicable.
4. The run implements the smallest compatible slice. It reuses current router, form, schema, server, and component patterns and leaves generated files to the project generator.
5. The run verifies locally and at approved boundaries. Typecheck, unit, route, form, stream, or browser evidence is collected without silently contacting production providers.
6. The run reports effects and limits. Changed files, generated output, dependencies, network/model calls, credentials required, test results, and unperformed build/deployment steps remain visible.

Keep generation, providers, and deployment under approval

• Project scaffolding and package installation can create many files, run lifecycle scripts, modify lockfiles, and start local processes.
• Route generators own routeTree.gen.ts; review generated diffs but do not patch the file by hand.
• Client validation improves UX but does not replace authenticated server-side validation and authorization.
• Async field validation should be debounced, cancel stale requests, avoid user enumeration, and expose a recoverable error state.
• TanStack AI is marked alpha in the source. Pin versions, isolate it from core paths, constrain tools, validate structured output, enforce budgets and timeouts, and keep provider keys server-side.
• Build presets describe targets; they do not authorize Cloudflare, Vercel, Netlify, AWS, or other deployment. Commit and deployment remain separate.

Verify the result

A complete result should provide:

• The chosen surface, installed-version evidence, user-visible contract, and server/client/generated-file boundary.
• Exact changed files, dependencies, configuration, generated artifacts, environment-variable names, provider/model selection, and network calls.
• Focused typecheck and route, loader, middleware, form, validation, streaming, tool, cancellation, error, and accessibility test results as applicable.
• Evidence that authentication and server validation protect mutations and that sensitive values stay outside the client and logs.
• Confirmation that no production provider call or deployment occurred unless explicitly authorized, plus remaining rollout risks.

Troubleshoot or continue

Continue with ak:frontend-development for general React UI, ak:web-frameworks for framework selection, or the Engineer Kit overview for coordinated delivery.

Know the current limits

• The Skill’s Start, Form, and AI references are snapshots, not live package or deployment compatibility guarantees.
• TanStack AI is explicitly alpha and not production-ready in the bundled source. Provider names, adapters, models, protocols, and behavior can change.
• The Skill contains guidance, not a bundled project scaffold, generator, test suite, model evaluator, cost monitor, secrets store, or deployment adapter.
• Start SSR defaults, server APIs, route conventions, and deploy presets must be confirmed against the installed version.
• Stable and beta contain identical Skill content and resources for this release pair. Beta Codex Hook diagnostics do not change this workflow.