# Kk0ga Employee Time Attendance Frontend Routing Tanstack Router

> TanStack Router Skill

- Skill: `tomevault-io/kk0ga-employee-time-attendance-frontend-routing-tanstack-rou` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/kk0ga-employee-time-attendance-frontend-routing-tanstack-rou`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/kk0ga-employee-time-attendance-frontend-routing-tanstack-rou/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/kk0ga-employee-time-attendance-frontend-routing-tanstack-rou

---


# TanStack Router Skill

## 目的
画面追加時のルーティング設計を統一し、認証/権限/データロードをブレなく実装する。

## 標準ルート（例）
- `/`：ダッシュボード（今日の打刻状態）
- `/time-entries`：一覧（社員本人は自分、管理者は全体）
- `/approvals`：承認者向け（差戻し含む）
- `/reports/:yearMonth`：PDF/集計ビュー

## 設計ルール
- loaderでprefetchするQuery一覧はこのdocsに従う
- search params は型付きで扱う（年月、社員、状態フィルタ）
- 認証/権限が必要なルートは共通ガードに寄せる

## 必須アウトプット
- ルートマップ
- search param 定義（yearMonth 等）
- 画面ごとの loader で読む Query 一覧

## 依頼例
- 「承認画面のルート設計と search param を決めたい」
- 「loader で prefetch する Query 設計を提案して」

## References
- [docs/frontend-data-contract.md](../../../docs/frontend-data-contract.md)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kk0ga) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->