[framework] Bề mặt TanStack
Nêu mảng TanStack cần xử lý, như Start, Form, AI, route gắn với Router hoặc so sánh framework.
/ak:tanstack start posts route with loader Ctrl K
Tóm tắt nhanh / Lệnh
Bộ Engineer
/ak:tanstack
Start, Form và AI
Xây app React full-stack bằng TanStack Start, route theo file, server function, middleware, form type-safe và tính năng chat/streaming với TanStack AI.
01
Xác nhận bề mặt TanStack
02
Tạo app Start
03
Thiết kế route
04
Thêm server function
Nguyên tắc 01
Dùng Start cho file routing và server function
Nguyên tắc 02
routeTree.gen.ts là file sinh tự động, không sửa tay
Nguyên tắc 03
Form là headless và xoay quanh validation
Nguyên tắc 04
TanStack AI đang alpha nên phải nói đúng như vậy
Bản đồ thực thi
Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.
01
Khởi động
Đầu vào, phạm vi, route
- 1 Xác nhận bề mặt TanStack Xác định yêu cầu thuộc Start routing/server function, Form validation, TanStack AI chat hay so sánh framework.
- 2 Tạo app Start Dùng npm create @tanstack/start@latest và cấu trúc bắt buộc gồm root route, router config, route tree sinh tự động và app config.
02
Xử lý
Agent / skill thực thi
- 3 Thiết kế route Thêm file route, loader, params và component đọc Route.useLoaderData để giữ inference xuyên suốt.
- 4 Thêm server function Dùng createServerFn với method, validator và handler, đặt validation sát nơi truy cập dữ liệu.
03
Kiểm chứng
Gate, review, xác thực
- 5 Cài middleware Dùng createMiddleware cho auth/session context và truyền dữ liệu người dùng qua server context một cách an toàn.
- 6 Xây form Dùng TanStack Form với Zod hoặc Valibot, validator theo field, debounce async, validation SSR và submit state qua subscribe.
04
Đóng
Báo cáo, bàn giao, artifact
- 7 Thêm AI streaming Dùng hook TanStack AI và route server để stream chat qua adapter nhà cung cấp và structured output khi cần.
- 8 So sánh trung thực Khi so sánh framework, nêu rõ inference client-first, deploy qua Nitro và trạng thái RSC là dự kiến chứ chưa hiện hữu.
Cú pháp, đối số, subcommand
Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.
Cú pháp
/ak:tanstack [framework] [feature]Đối số
[feature] Brief tính năng
Mô tả dự án, route, server function, middleware, validation form hoặc tính năng chat/streaming AI cần thiết kế hay triển khai.
/ak:tanstack form signup validation with zodPrompt mẫu
Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.
Route và loader Start Khuyến nghị
/ak:tanstack start posts route with loader- Dùng khi:
- Một trang TanStack Start cần params typed và dữ liệu load từ server.
- Kết quả:
- Đưa mẫu file-route, loader, component và server-function kèm params typed và ranh giới dữ liệu.
Form type-safe
/ak:tanstack form signup validation with zod- Dùng khi:
- Một form cần validation theo field và trạng thái submit đáng tin cậy.
- Kết quả:
- Dùng TanStack Form với validator, debounce async khi cần và form.Subscribe cho cập nhật UI phản ứng có mục tiêu.
Chat streaming
/ak:tanstack ai streaming chat endpoint- Dùng khi:
- Thêm chat AI vào app TanStack Start.
- Kết quả:
- Nêu wiring useChat phía client và route server stream qua provider adapter phù hợp.
Phạm vi xử lý
- TanStack Start
- file route
- server function
- middleware
- TanStack Form
- AI streaming