tanstack-router について
TanStack Routerを使う開発者向けのドキュメントスキルです。フレームワークに応じて、型安全なルーティング、URL状態、データ読み込み、認証、SSR、ビルドツールのガイドへ案内します。
主な機能
- 01ルーター設定と型安全性
- 02URLパラメーターとナビゲーション
- 03データ読み込みと認証
- 04SSRとビルドツール
活用シーン
- 01型付きルートとナビゲーションの設計
- 02パスと検索パラメーターの管理
- 03ルートのデータ読み込みとガードの追加
- 04SSRやコード分割のガイド確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ lukasa1993/ tanstack-skills-extracted --skill tanstack-routerインストール後、Claude Code で/tanstack-routerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
.tanstack-product-skill.jsonLICENSEagents/openai.yamllicenses/a405ee70c632bb938acb7ac5f210e814409b3760ea9d2329d8ed8ffcfd11a0e7.txtreferences/additional-guidance.mddata-auth-errors.mdfoundations.mdframework-solid.mdframework-vue.mdreferences/assets/tanstack-router-core-search-params/references/validation-patterns.mdreferences/guides/tanstack-react-router-1780aa7e.mdtanstack-react-router-compositions-router-query-29f6886c.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--cleanup.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--code-splitting.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--common-mistakes.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--loaders.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--navigation.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--outlet.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--overview.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--path-params.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--pre-migration.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--quick-reference-api-mapping.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--route-definitions.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--search-params.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb--uselocation-common-pitfall.mdtanstack-react-router-lifecycle-migrate-from-react-router-0cb1bddb.mdtanstack-router-core-3c7fd849.mdtanstack-router-core-auth-and-guards-fbf39499--common-mistakes.mdtanstack-router-core-auth-and-guards-fbf39499--core-patterns.mdtanstack-router-core-auth-and-guards-fbf39499--cross-references.md詳細
TanStack Router
ナビゲーション、URL の状態、データ読み込み、認証、SSR、フレームワークアダプターのための型安全なルーティングガイダンスです。
ワークフロー
- インストールされている TanStack パッケージと正確なバージョンを確認します。
- 検出されたフレームワークの基礎リファレンスとアダプターリファレンスを読みます。
- トピックリファレンスはインデックスです。タスクに合ったガイドまたはセクションを選び、必要な場合に限り、前提条件へのリンクをたどります。
- 記憶よりも、インストール済みパッケージの型とバージョンに対応したソースガイダンスを優先します。
- 例をフレームワークアダプターに置き換える場合も、ヘッドレス/コアの動作を維持します。
タスクの振り分け
- 基礎 — ルーターの構築と型安全性。
- URL とナビゲーション — パスパラメーター、検索パラメーター、ナビゲーション。
- データ、認証、エラー — データ読み込み、ガード、Not Found、エラーバウンダリー。
- SSR とビルドツール — SSR、コード分割、ルート生成、ビルドプラグイン。
- Solid アダプター — Solid Router アダプターのガイダンス。
- Vue アダプター — Vue Router アダプターのガイダンス。
- 追加の公式ガイダンス — 専門トピックにまだ割り当てられていない、新しい公式ガイダンス。
フレームワークの振り分け
- React —
@tanstack/react-routerを検出します。基礎を読みます。共有ガイダンスを参照し、アダプター固有の違いを確認します。 - Solid —
@tanstack/solid-routerを検出します。Solid アダプターを読みます。 - Vue —
@tanstack/vue-routerを検出します。Vue アダプターを読みます。
製品の境界
タスクが以下の製品の範囲にまたがる場合は、それぞれの専用スキルを使用します:tanstack-start、tanstack-query。
正確な上流入力と重複排除の記録については、ソースの来歴を参照してください。
コメント
Markdown 対応