tanstack-devtools について
tanstack-devtools は、TanStack Devtools の導入と利用を支援する開発ガイダンススキルです。タスクやフレームワークに応じて参照先を案内し、バージョンに合った資料とソースの確認を促します。
主な機能
- 01フレームワーク別の資料案内
- 02セットアップと本番ビルドのガイダンス
- 03プラグインとマーケットプレイスのガイダンス
- 04イベント計測のガイダンス
- 05バージョンに合うソースの推奨
活用シーン
- 01アプリへの TanStack Devtools の導入
- 02フレームワークアダプターの資料選び
- 03プラグインパネルやイベント計測の実装
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ lukasa1993/ tanstack-skills-extracted --skill tanstack-devtoolsインストール後、Claude Code で/tanstack-devtoolsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
.tanstack-product-skill.jsonLICENSEagents/openai.yamllicenses/de86d3f4c6d93bcd529b389aaae7d4297072e623af8b5b701db3564f4b89ec90.txtreferences/additional-guidance.mdevents-instrumentation.mdreferences/assets/tanstack-devtools-plugin-panel/references/panel-api.mdreferences/assets/tanstack-devtools-utils-devtools-framework-adapters/references/preact.mdreact.mdsolid.mdvue.mdreferences/assets/tanstack-devtools-vite-plugin/references/vite-options.mdreferences/guides/tanstack-devtools-app-setup-a09047cc.mdtanstack-devtools-event-client-b11524e7.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--common-mistakes.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--core-concept.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--core-patterns.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--debouncing-frequent-observations.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--overview.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88--see-also.mdtanstack-devtools-event-client-devtools-bidirectional-02c62d88.mdtanstack-devtools-event-client-devtools-instrumentation-6363dc09.mdtanstack-devtools-marketplace-8bf06759--common-mistakes.mdtanstack-devtools-marketplace-8bf06759--featured-plugins.mdtanstack-devtools-marketplace-8bf06759--framework-detection.mdtanstack-devtools-marketplace-8bf06759--how-auto-install-works.mdtanstack-devtools-marketplace-8bf06759--overview-2.mdtanstack-devtools-marketplace-8bf06759--overview.mdtanstack-devtools-marketplace-8bf06759--plugin-id-matching.mdtanstack-devtools-marketplace-8bf06759--pluginmetadata-interface.md詳細
TanStack Devtools
セットアップ、フレームワークアダプター、プラグイン、イベント計測、マーケットプレイスの利用、本番ビルドに関する Devtools のガイダンスです。
コアとプラグインのバージョンを確認してください。
ワークフロー
- インストール済みの TanStack パッケージと正確なバージョンを確認します。
- タスクでアダプターを使用する場合は、検出したフレームワークのアダプターリファレンスを読みます。
- トピック別リファレンスは索引です。タスクに適したガイドまたはセクションを選び、必要な場合にのみ前提条件へのリンクをたどります。
- 記憶に頼るより、インストール済みパッケージの型とバージョンに合ったソースのガイダンスを優先します。
- 例をフレームワークアダプター向けに置き換える際も、ヘッドレス/コアの動作を維持します。
タスク別の参照先
- セットアップと本番環境 — アプリのセットアップ、Vite との統合、本番環境での動作。
- プラグインとマーケットプレイス — プラグインパネル、フレームワークアダプター、マーケットプレイスの利用。
- イベントと計測 — イベントクライアント、計測、双方向イベント。
- 追加の公式ガイダンス — 専門トピックにまだ割り当てられていない新しい公式ガイダンス。
フレームワーク別の参照先
- Vanilla —
@tanstack/devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - React —
@tanstack/react-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - Preact —
@tanstack/preact-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - Solid —
@tanstack/solid-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - Vue —
@tanstack/vue-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - Svelte —
@tanstack/svelte-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。 - Angular —
@tanstack/angular-devtoolsを検出します。プラグインとマーケットプレイスを読みます。共通のガイダンスです。アダプター固有の違いを確認してください。
正確なアップストリームの入力と重複排除の記録については、ソースの来歴を参照してください。
コメント
Markdown 対応