# Kk0ga Employee Time Attendance Frontend Tanstack Architecture

> Frontend TanStack Architecture Skill

- Skill: `tomevault-io/kk0ga-employee-time-attendance-frontend-tanstack-architectur` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/kk0ga-employee-time-attendance-frontend-tanstack-architectur`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/kk0ga-employee-time-attendance-frontend-tanstack-architectur/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-tanstack-architectur

---


# 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 で作りたい。列定義とフィルタ方針を整理して」

## 関連スキル
- [web-design-reviewer](../web-design-reviewer/SKILL.md)
- [refactor](../refactor/SKILL.md)

## 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 -->