TanStackエコシステムでアプリケーションを構築するための包括的なベストプラクティス。 これらのスキルは、TanStack クエリ、TansStack ルータ、および TanStack Start のための構造化されたガイドラインで AI コーディング エージェントを提供します。

スキルは、エージェントスキルのフォーマットに従う。

利用可能なスキル

tanstack-query # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #

TanStack Query (React Query) でデータ取得、キャッシュ、ミューテーション、サーバーの状態管理のベストプラクティス。

使用時:

• useQuery または [useMutation] でサーバーデータを取得またはキャッシュする
• 新しいプロジェクトに React Query を設定する
• パフォーマンスの問題のためのデータ取得パターンのレビュー

32以上のルールは8つのカテゴリに:

• クエリキー(CRITICAL) — 適切なキー構造と組織
• キャッシュ(CRITICAL) — staleTime、gcTime、無効なパターン
• Mutations(HIGH) — 最適なアップデート、エラー処理
• エラー処理(HIGH) — エラー境界、リトライロジック
• 準備(MEDIUM) — 意図ベースとルートの優先順位
• Infinite Queries(MEDIUM) — パージネーションパターン
• SSRインテグレーション(MEDIUM) — 水分補給と脱水
• パフォーマンス(LOW) — 変換、メモの選択

tanstack-router ## tanstack-router

TanStack Agent Skills

Comprehensive best practices for building applications with the TanStack ecosystem. These skills provide AI coding agents with structured guidelines for TanStack Query, TanStack Router, and TanStack Start.

Skills follow the Agent Skills format.

Available Skills

tanstack-query

Best practices for data fetching, caching, mutations, and server state management with TanStack Query (React Query).

Use when:

• Fetching or caching server data with useQuery or useMutation
• Setting up React Query for a new project
• Reviewing data fetching patterns for performance issues

32+ rules across 8 categories:

• Query Keys (CRITICAL) — Proper key structure and organization
• Caching (CRITICAL) — staleTime, gcTime, and invalidation patterns
• Mutations (HIGH) — Optimistic updates, error handling
• Error Handling (HIGH) — Error boundaries, retry logic
• Prefetching (MEDIUM) — Intent-based and route prefetching
• Infinite Queries (MEDIUM) — Pagination patterns
• SSR Integration (MEDIUM) — Hydration and dehydration
• Performance (LOW) — Select transforms, memoization

tanstack-router

Best practices for type-safe routing, data loading, search params, and navigation with TanStack Router.

Use when:

• Setting up routing for a React app
• Working with search params, loaders, or code splitting
• Configuring type-safe navigation

36 rules across 10 categories:

• Type Safety (CRITICAL) — Router registration, type narrowing, context typing
• Route Organization (CRITICAL) — File-based routing, route trees, pathless layouts
• Router Config (HIGH) — Global router defaults
• Data Loading (HIGH) — Loaders, Query integration, deferred data
• Search Params (HIGH) — Validation, type inheritance, middleware, defaults
• Error Handling (HIGH) — Not-found routes, error boundaries
• Navigation (MEDIUM) — Link component, active states, programmatic navigation
• Code Splitting (MEDIUM) — Lazy routes, auto splitting, critical path
• Preloading (MEDIUM) — Intent-based, stale time, manual preloading
• Route Context (LOW) — Dependency injection, beforeLoad

tanstack-start

Best practices for full-stack React applications with TanStack Start, including server functions, middleware, SSR, and authentication.

Use when:

• Building full-stack apps with server functions
• Implementing authentication or middleware
• Configuring SSR, streaming, or deployment

32 rules across 10 categories:

• Server Functions (CRITICAL) — createServerFn patterns
• Security (CRITICAL) — Input validation, CSRF protection
• Middleware (HIGH) — Request/function middleware
• Authentication (HIGH) — Sessions, route protection
• API Routes (MEDIUM) — External endpoint patterns
• SSR (MEDIUM) — Hydration safety, streaming, selective SSR
• Error Handling (MEDIUM) — Server errors, redirects, not-found