Agent skill
data-fetching-strategies
Reactアプリのデータフェッチ、キャッシュ、エラーハンドリング、楽観的更新を整理するスキル。 ライブラリ選定から設計・実装・検証までの実務フローを提供する。 Anchors: • Stale-While-Revalidate Pattern / 適用: キャッシュ戦略 / 目的: サーバー状態の一貫性確保 • React Query vs SWR / 適用: ライブラリ選定 / 目的: 要件に最適な選択 • MSW / 適用: テスト環境構築 / 目的: API依存の排除 Trigger: Use when implementing data fetching patterns, cache strategies, error handling, optimistic updates, or choosing between SWR and React Query. data fetching, cache strategy, swr, react query, optimistic updates, error handling
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/data-fetching-strategies
SKILL.md
data-fetching-strategies
概要
サーバー状態の取得と更新に関する設計・実装・検証の基準を提供し、安定したデータフェッチを実現する。
ワークフロー
Phase 1: 要件整理
目的: 取得対象・更新頻度・UX要件を整理する。
アクション:
- 取得対象と更新頻度を整理する。
- エラーハンドリングとローディング要件を整理する。
- 既存ライブラリの有無を確認する。
Task: agents/analyze-fetching-requirements.md を参照
Phase 2: 設計
目的: ライブラリ選定とキャッシュ設計を行う。
アクション:
references/library-comparison.mdでライブラリを比較する。references/caching-patterns.mdでキャッシュ方針を設計する。references/query-key-guidelines.mdでキー設計を決める。
Task: agents/design-fetching-architecture.md を参照
Phase 3: 実装
目的: データフェッチを実装し、最適化を反映する。
アクション:
assets/swr-hook-template.mdとassets/react-query-hook-template.mdを参照する。references/optimistic-updates.mdで更新方針を確認する。scripts/analyze-data-fetching.mjsで実装の傾向を確認する。
Task: agents/implement-fetching-patterns.md を参照
Phase 4: 検証と記録
目的: 実装品質を検証し、運用記録を残す。
アクション:
references/error-loading-states.mdでUI状態を確認する。assets/fetching-review-checklist.mdでレビューする。scripts/log_usage.mjsで記録を更新する。
Task: agents/validate-fetching-quality.md を参照
Task仕様ナビ
| Task | 起動タイミング | 入力 | 出力 |
|---|---|---|---|
| analyze-fetching-requirements | Phase 1開始時 | 取得対象/制約 | 要件メモ、優先度一覧 |
| design-fetching-architecture | Phase 2開始時 | 要件メモ | 設計方針、キャッシュ方針 |
| implement-fetching-patterns | Phase 3開始時 | 設計方針 | 実装メモ、変更内容 |
| validate-fetching-quality | Phase 4開始時 | 実装メモ | 検証レポート、改善提案 |
詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| ライブラリ選定を明確にする | 運用負荷を減らす |
| キャッシュ方針を決める | UXを安定させる |
| エラーハンドリングを統一する | 回復性を高める |
| 楽観的更新のロールバックを用意する | 失敗時の整合性確保 |
| テスト観点を整理する | 回帰を防ぐ |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| ライブラリの併用 | 保守性が低下する |
| キャッシュ無しの実装 | 遅延と負荷が増える |
| エラーの握りつぶし | 問題検知が遅れる |
| 状態の混在 | 保守性が落ちる |
リソース参照
scripts/（決定論的処理）
| スクリプト | 機能 |
|---|---|
scripts/analyze-data-fetching.mjs |
データフェッチの分析 |
scripts/validate-skill.mjs |
スキル構造の検証 |
scripts/log_usage.mjs |
使用記録と評価メトリクス更新 |
references/（詳細知識）
| リソース | パス | 読込条件 |
|---|---|---|
| レベル1 基礎 | references/Level1_basics.md | 要件整理時 |
| レベル2 実務 | references/Level2_intermediate.md | 設計時 |
| レベル3 応用 | references/Level3_advanced.md | 実装時 |
| レベル4 専門 | references/Level4_expert.md | 検証時 |
| ライブラリ比較 | references/library-comparison.md | 選定時 |
| キャッシュパターン | references/caching-patterns.md | キャッシュ設計時 |
| エラー/ローディング | references/error-loading-states.md | UI設計時 |
| 楽観的更新 | references/optimistic-updates.md | 更新設計時 |
| キー設計 | references/query-key-guidelines.md | キー設計時 |
| 要求仕様索引 | references/requirements-index.md | 仕様確認時 |
| 旧スキル | references/legacy-skill.md | 互換確認時 |
assets/（テンプレート・素材）
| アセット | 用途 |
|---|---|
assets/swr-hook-template.md |
SWRフックテンプレート |
assets/react-query-hook-template.md |
React Queryフックテンプレート |
assets/fetching-requirements-template.md |
要件整理テンプレート |
assets/cache-policy-matrix.md |
キャッシュ方針整理 |
assets/fetching-review-checklist.md |
実装レビュー観点 |
運用ファイル
| ファイル | 目的 |
|---|---|
EVALS.json |
レベル評価・メトリクス管理 |
LOGS.md |
実行ログの蓄積 |
CHANGELOG.md |
改善履歴の記録 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?