tomevault-io Frontend TanStack Architecture Skill
目的
フロント実装のブレをなくし、画面追加を高速化するために、TanStackを中心に「いつも同じ作り」に揃える。
採用コンポーネント
- TanStack Query：サーバーステート管理（取得/更新/キャッシュ/再試行）
- TanStack Router：ルーティング（ルートローダー、検索パラメータ、認証導線）
- TanStack Table：勤怠一覧・月次集計テーブル
基本ルール
- サーバーデータは 必ず Query を経由（直fetch禁止）
- 画面の入力状態はローカル or フォームで管理（Queryに混ぜない）
- 一覧は Table を正とし、ソート/フィルタ/ページングを統一
- エラーは「ユーザー向け表示」と「ログ」を分離する
フォルダ方針（例）
src/api/：fetch/Graph呼び出しなど低レベルsrc/features/<domain>/：time_entries / approvals などsrc/routes/：TanStack Router 定義src/components/：共通UI
依頼例
- 「打刻画面を追加したい。TanStack流の構成で最小実装の型を作って」
- 「time_entries の一覧を Table で作りたい。列定義とフィルタ方針を整理して」
関連スキル
References
Converted and distributed by TomeVault — claim your Tome and manage your conversions.