Agent-Skills.md

Agent Skills: SKILL.md

Build and enhance React applications using the TanStack ecosystem. Use this skill when working with TanStack libraries such as Router, Query, Form, or Table—whether starting a new project or integrating into existing code.

UncategorizedID: interactive-inc/open-prompt/stack-tanstack-app

Repository

interactive-inc/open-prompt
interactive-inc
11

Install this agent skill to your local

pnpm dlx add-skill https://github.com/interactive-inc/skills/tree/HEAD/skills/stack-tanstack-app

Skill Files

Browse the full folder contents for stack-tanstack-app.

Download Skill

Loading file tree…

skills/stack-tanstack-app/SKILL.md

Skill Metadata

Name
stack-tanstack-app
Description
Build and enhance React applications using the TanStack ecosystem. Use this skill when working with TanStack libraries such as Router, Query, Form, or Table—whether starting a new project or integrating into existing code.

SKILL.md

Tech Stack

  • TanStack Start（React）
  • TanStack React Query
  • Hono（API バックエンド）
  • Drizzle ORM

Key Patterns

  • hc クライアントで型安全な API 呼び出し
  • refetch で更新（invalidateQueries は使わない）
  • Suspense + use() でデータフェッチ
  • Skeleton でローディング表示
  • query を子コンポーネントに渡す

Hono API

API の基盤となる factory パターンとルート定義。

→ references/hono-api.md

hc クライアント

Hono の型安全な RPC クライアント。フロントエンドから API を呼び出す。

→ references/hc-client.md

認証

JWT + Cookie ベースの認証。authMiddleware でルートを保護。

→ references/auth.md

セッション管理

React Context + React Query でセッション状態を管理。useSession フックで取得。

→ references/session-context.md

データフェッチ

Suspense + use() パターン。親で useQuery、子で use() でデータ取得。

→ references/suspense-use.md

Cloudflare

Cloudflare Workers + D1 を使う場合の設定。HonoEnv、databaseMiddleware、drizzle.config.ts。

→ references/cloudflare.md

TanStack Start 固有

BASIC 認証

サーバーミドルウェアで BASIC 認証を実装する場合。

→ references/tanstack-start/basic-auth.md