mcpField
T
tanstack-start-best-practices

tanstack-start-best-practices

github.com/pedronauck開発64892 回インストール5 日前に更新
リポジトリ

tanstack-start-best-practices について

TanStack StartでフルスタックReactアプリを開発するためのスキルです。サーバー関数、セキュリティ、ミドルウェア、認証、SSR、エラー処理、デプロイの実装ルールと例をまとめています。

主な機能

  1. 01サーバー関数のパターンと入力検証
  2. 02セキュリティと入力処理の指針
  3. 03ミドルウェアと認証のパターン
  4. 04SSRとハイドレーションの指針
  5. 05エラー処理とデプロイルール

活用シーン

  1. 01サーバー側のデータ更新の実装
  2. 02認証とルート保護の追加
  3. 03SSRとデプロイの設定

インストール

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

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

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

同梱ファイル

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

rules/
api-routes.md
auth-route-protection.md
auth-session-management.md
deploy-adapters.md
env-functions.md
err-server-errors.md
file-separation.md
mw-request-middleware.md
sf-create-server-fn.md
sf-input-validation.md
ssr-hydration-safety.md
ssr-prerender.md
ssr-streaming.md

詳細

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

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

適用する場面

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

優先度別ルールカテゴリ

優先度カテゴリルール影響
CRITICALサーバー関数5 ルール中核となるデータ変更パターン
CRITICALセキュリティ4 ルール脆弱性を防止
HIGHミドルウェア4 ルールリクエスト／レスポンスの処理
HIGH認証4 ルールユーザーセッションを保護
MEDIUMAPI ルート1 ルール外部エンドポイントのパターン
MEDIUMSSR6 ルールサーバーレンダリングのパターン
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 対応