mcpField
T
tanstack-start-best-practices

tanstack-start-best-practices

github.com/deckardger開発2299.8k 回インストール7 週間前に更新
リポジトリ

tanstack-start-best-practices について

フルスタック React アプリの開発者向けに、TanStack Start の実践パターンをまとめたガイドです。サーバー関数、ミドルウェア、SSR、認証、デプロイを優先度別のルールと良否の例で解説します。

主な機能

  1. 01サーバー関数と入力検証
  2. 02セキュリティ、ミドルウェア、認証
  3. 03API ルートと SSR
  4. 04エラー処理と環境設定
  5. 05コード構成とデプロイ

活用シーン

  1. 01サーバー側のデータ変更処理の実装
  2. 02ルート保護とセッション管理
  3. 03SSR、ハイドレーション、静的プリレンダリングの設定
  4. 04フルスタックコードの整理とデプロイ準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-start-best-practices

インストール後、Claude Code で/tanstack-start-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

rules/
api-routes.md
auth-cookie-security.md
auth-route-protection.md
auth-server-functions.md
auth-session-management.md
deploy-adapters.md
deploy-env-config.md
env-functions.md
err-not-found.md
err-redirects.md
err-server-errors.md
file-functions-file.md
file-separation.md
file-shared-validation.md
mw-composability.md
mw-context-flow.md
mw-function-middleware.md
mw-request-middleware.md
sec-auth-middleware.md
sec-csrf-protection.md
sec-sensitive-data.md
sec-validate-inputs.md
sf-create-server-fn.md
sf-error-handling.md
sf-input-validation.md
sf-method-selection.md
sf-response-headers.md
ssr-data-loading.md
ssr-hydration-safety.md
ssr-prerender.md

詳細

TanStack Start のベストプラクティス

フルスタック React アプリケーションで TanStack Start のパターンを実装するための包括的なガイドラインです。サーバー関数、ミドルウェア、SSR、認証、デプロイを対象としています。

適用する場面

  • データ変更のためのサーバー関数を作成するとき
  • 認証やログ記録のためのミドルウェアを設定するとき
  • SSR とハイドレーションを設定するとき
  • 認証フローを実装するとき
  • クライアントとサーバーの境界をまたいでエラーを処理するとき
  • フルスタックのコードを整理するとき
  • さまざまなプラットフォームにデプロイするとき

優先度別のルールカテゴリ

優先度カテゴリルール影響
CRITICALサーバー関数5 ルールデータ変更の中核となるパターン
CRITICALセキュリティ4 ルール脆弱性を防止
HIGHミドルウェア4 ルールリクエスト／レスポンスの処理
HIGH認証4 ルールユーザーセッションを保護
MEDIUMAPI ルート1 ルール外部エンドポイントのパターン
MEDIUMSSR5 ルールサーバーレンダリングのパターン
MEDIUMエラー処理3 ルール適切なエラー処理
MEDIUM環境1 ルール設定の管理
LOWファイル構成3 ルール保守しやすいコード構成
LOWデプロイ2 ルール本番環境への対応

クイックリファレンス

サーバー関数（接頭辞：sf-）
  • sf-create-server-fn — サーバー側のロジックには createServerFn を使用します
  • sf-input-validation — サーバー関数の入力は必ず検証します
  • sf-method-selection — 適切な HTTP メソッドを選択します
  • sf-error-handling — サーバー関数のエラーを処理します
  • sf-response-headers — 必要に応じてレスポンスヘッダーをカスタマイズします
セキュリティ（接頭辞：sec-）
  • sec-validate-inputs — すべてのユーザー入力をスキーマで検証します
  • sec-auth-middleware — 認証ミドルウェアでルートを保護します
  • sec-sensitive-data — シークレットはサーバー側だけに保持します
  • sec-csrf-protection — データ変更に対する CSRF 保護を実装します
ミドルウェア（接頭辞：mw-）
  • mw-request-middleware — 横断的な関心事にはリクエストミドルウェアを使用します
  • mw-function-middleware — サーバー関数には関数ミドルウェアを使用します
  • mw-context-flow — ミドルウェアを通じてコンテキストを適切に渡します
  • mw-composability — ミドルウェアを効果的に組み合わせます
認証（接頭辞：auth-）
  • auth-session-management — セキュアなセッション処理を実装します
  • auth-route-protection — beforeLoad でルートを保護します
  • auth-server-functions — サーバー関数内で認証を検証します
  • auth-cookie-security — セキュアな Cookie 設定を構成します
API ルート（接頭辞：api-）
  • api-routes — 外部の利用者向けに API ルートを作成します
SSR（接頭辞：ssr-）
  • ssr-data-loading — SSR に適した方法でデータを読み込みます
  • ssr-hydration-safety — ハイドレーションの不一致を防ぎます
  • ssr-streaming — TTFB を短縮するためにストリーミング SSR を実装します
  • ssr-selective — 効果がある場合は選択的 SSR を適用します
  • ssr-prerender — 静的プリレンダリングと ISR を設定します
環境（接頭辞：env-）
  • env-functions — 設定には環境関数を使用します
エラー処理（接頭辞：err-）
  • err-server-errors — サーバー関数のエラーを処理します
  • err-redirects — リダイレクトを適切に使用します
  • err-not-found — 見つからない場合のシナリオを処理します
ファイル構成（接頭辞：file-）
  • file-separation — サーバーコードとクライアントコードを分離します
  • file-functions-file — .functions.ts パターンを使用します
  • file-shared-validation — 検証スキーマを共有します
デプロイ（接頭辞：deploy-）
  • deploy-env-config — 環境変数を設定します
  • deploy-adapters — 適切なデプロイアダプターを選択します

使用方法

rules/ ディレクトリ内の各ルールファイルには、次の内容が含まれています。

  1. 説明 — このパターンが重要な理由
  2. 悪い例 — 避けるべきアンチパターン
  3. 良い例 — 推奨される実装
  4. コンテキスト — このルールを適用する場合、または適用しない場合

詳細なリファレンス

詳しいガイダンスとコード例については、rules/ ディレクトリ内の各ルールファイルを参照してください。

コメント

Markdown 対応