Xây dựng feature TanStack Start, Form hoặc AI với ak:tanstack

Dùng ak:tanstack để triển khai feature có giới hạn bằng TanStack Start, TanStack Form hoặc TanStack AI. Skill bao quát file-based route, loader, server function, middleware, form state và validation, streaming chat, structured output cùng provider adapter.

Chọn bề mặt TanStack trước

Dùng ak:tanstack khi

• Bạn tạo hoặc đổi TanStack Start route, loader, API route, server function, middleware, SSR boundary hay deployment configuration.
• Bạn cần TanStack Form typed với validation sync, async, nested, array hoặc ở server.
• Bạn chủ động đánh giá hoặc prototype TanStack AI streaming, tool hay structured output và chấp nhận trạng thái alpha.
• Bạn cần guidance bám API TanStack đã cài của project thay vì React pattern tổng quát.

Chọn workflow khác khi

• Task chính là TanStack Query, Table hoặc Virtual. Skill này nêu chúng nằm ngoài scope chính; dùng guidance library hiện tại của project.
• Bạn cần implementation React tổng quát. Dùng ak:frontend-development.
• Bạn vẫn chọn framework. Dùng ak:web-frameworks hoặc ak:brainstorm trước scaffolding.
• Bạn cần production-stability guarantee cho AI dependency alpha. Giữ nó ở experimental scope hoặc chọn bề mặt mature đã được duyệt.

Chuẩn bị version, generated file và service

Trước khi bắt đầu:

• Hoàn thành Làm quen và xác nhận Engineer Kit đã được cài cho runtime cùng scope hiện tại.
• Đọc version TanStack Start, Router, Form, validation adapter, AI, React, Vite cùng server runtime đã cài từ project.
• Xác định route-generation rule và giữ routeTree.gen.ts là generated output; không sửa tay.
• Xác định route/form/chat contract, authentication, validation, loading, error, cancellation, retry, accessibility cùng data-retention behavior.
• Với AI, dùng test credential và prompt giả lập. Giữ provider API key, user content, tool secret cùng model output chứa dữ liệu nhạy cảm ngoài log, client bundle, prompt, fixture và Git.
• Nêu rõ có cho phép scaffolding, cài package, code generation, database hay external API call, model spend, build hoặc deployment không.

Reference đi kèm là API snapshot ngắn. Xác minh package API, server-runtime behavior, deploy preset cùng provider support hiện tại trước mutation.

Xem Runtime adapter để hiểu khác biệt theo từng component.

Chạy Skill

Argument shape được khai báo là [framework] [feature]. Bắt đầu yêu cầu bằng start, form hoặc ai để giữ rõ dependency cùng runtime boundary.

/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."

Quan sát các giai đoạn implementation

1. Lần chạy xác minh bề mặt và version đang hoạt động. Skill đọc package cùng project evidence thay vì giả định ví dụ đi kèm khớp.
2. Lần chạy lập bản đồ contract hiện có. Route, generated tree, server/client ownership, validation, authentication, form state hoặc stream protocol được nêu rõ.
3. Lần chạy xác định user-visible state. Pending, success, empty, invalid, server error, disconnected, canceled cùng retry behavior được bao gồm khi áp dụng.
4. Lần chạy triển khai slice tương thích nhỏ nhất. Skill dùng lại router, form, schema, server cùng component pattern hiện có và để project generator quản lý generated file.
5. Lần chạy xác minh local và tại boundary đã duyệt. Typecheck, unit, route, form, stream hoặc browser evidence được thu thập mà không âm thầm gọi production provider.
6. Lần chạy báo cáo effect và limit. Tệp đổi, generated output, dependency, network/model call, credential cần có, test result cùng bước build/deployment chưa làm luôn hiển thị.

Giữ generation, provider và deployment dưới quyền duyệt

• Project scaffolding và cài package có thể tạo nhiều tệp, chạy lifecycle script, sửa lockfile cùng khởi động local process.
• Route generator sở hữu routeTree.gen.ts; review generated diff nhưng không patch tệp bằng tay.
• Client validation cải thiện UX nhưng không thay server-side validation và authorization đã xác thực.
• Async field validation nên debounce, cancel request cũ, tránh user enumeration và cung cấp error state có thể phục hồi.
• TanStack AI được đánh dấu alpha trong source. Pin version, cô lập khỏi core path, giới hạn tool, validate structured output, áp budget/timeout và giữ provider key ở server.
• Build preset mô tả target; chúng không cấp quyền Cloudflare, Vercel, Netlify, AWS hay deployment khác. Commit cùng deployment vẫn tách riêng.

Xác minh kết quả

Kết quả hoàn tất nên cung cấp:

• Bề mặt đã chọn, bằng chứng version đã cài, user-visible contract cùng ranh giới server/client/generated file.
• Chính xác tệp đổi, dependency, configuration, generated artifact, tên environment variable, provider/model selection cùng network call.
• Kết quả typecheck cùng test route, loader, middleware, form, validation, streaming, tool, cancellation, error và accessibility tập trung khi áp dụng.
• Bằng chứng authentication cùng server validation bảo vệ mutation và value nhạy cảm nằm ngoài client cùng log.
• Xác nhận không gọi production provider hay deploy trừ khi được cấp quyền rõ ràng, cùng rủi ro rollout còn lại.

Xử lý sự cố hoặc tiếp tục

Tiếp tục với ak:frontend-development cho React UI tổng quát, ak:web-frameworks cho framework selection hoặc Tổng quan Engineer Kit cho delivery được điều phối.

Biết các giới hạn hiện tại

• Reference Start, Form và AI của Skill là snapshot, không phải guarantee trực tiếp về package hay deployment compatibility.
• TanStack AI được ghi rõ là alpha và chưa production-ready trong source đi kèm. Provider name, adapter, model, protocol cùng behavior có thể đổi.
• Skill chứa guidance, không có project scaffold, generator, test suite, model evaluator, cost monitor, secrets store hay deployment adapter đi kèm.
• Start SSR default, server API, route convention cùng deploy preset phải được xác nhận với version đã cài.
• Stable và beta chứa nội dung Skill cùng resource giống nhau trong cặp release này. Diagnostic Codex Hook của beta không thay đổi workflow này.