Agent skill
custom-hooks-patterns
Reactカスタムフックの設計・抽出・合成・テストの実務指針を提供するスキル。 再利用性と保守性を高めるための判断基準を整理する。 Anchors: • Learning React / 適用: フック設計の基本 / 目的: 再利用可能な設計 • React公式ドキュメント / 適用: フックルール / 目的: 安全な実装 • Refactoring / 適用: 抽出判断 / 目的: 重複削減と責務分離 Trigger: Use when designing custom React hooks, extracting reusable logic, composing hooks, or validating hook usage patterns. custom hooks, hook composition, hook extraction, hook testing, hook design
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/custom-hooks-patterns
SKILL.md
custom-hooks-patterns
概要
Reactカスタムフックの抽出基準・設計パターン・合成パターン・テスト戦略を整理し、再利用性の高いフック設計を支援する。
ワークフロー
Phase 1: 要件整理
目的: 抽出対象のロジックと目的を整理する。
アクション:
- 抽出候補を洗い出す。
references/extraction-criteria.mdで抽出基準を確認する。- 既存フックの有無を確認する。
Task: agents/analyze-hook-opportunity.md を参照
Phase 2: 設計
目的: フックの責務とAPIを設計する。
アクション:
references/design-patterns.mdで設計パターンを確認する。references/composition-patterns.mdで合成方針を決める。- 入出力と副作用を整理する。
Task: agents/design-hook-composition.md を参照
Phase 3: 実装
目的: フックを実装し、利用パターンを整える。
アクション:
assets/basic-hooks-template.mdとassets/advanced-hooks-template.mdを参照して実装する。scripts/analyze-hook-candidates.mjsで抽出候補の確認を行う。- 変更点を記録する。
Task: agents/implement-custom-hook.md を参照
Phase 4: 検証と記録
目的: 使い勝手・テスト観点を検証し、記録する。
アクション:
references/testing-strategies.mdでテスト観点を確認する。assets/hook-review-checklist.mdでレビューする。scripts/log_usage.mjsで記録を更新する。
Task: agents/validate-hook-quality.md を参照
Task仕様ナビ
| Task | 起動タイミング | 入力 | 出力 |
|---|---|---|---|
| analyze-hook-opportunity | Phase 1開始時 | 既存ロジック | 抽出候補メモ、判断理由 |
| design-hook-composition | Phase 2開始時 | 抽出候補メモ | フック設計書、API方針 |
| implement-custom-hook | Phase 3開始時 | フック設計書 | 実装メモ、変更内容 |
| validate-hook-quality | Phase 4開始時 | 実装メモ | レビューレポート、改善提案 |
詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| 抽出基準を明確にする | 責務が曖昧にならない |
| フックAPIを小さくする | 再利用性が高まる |
| 合成パターンを採用する | 依存関係が整理される |
| テスト観点を明文化する | 回帰防止になる |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| 目的のない抽出 | 依存が増える |
| 巨大なフック | 保守性が落ちる |
| 副作用の隠蔽 | 予期しない挙動になる |
| テストなしの導入 | 品質劣化の原因になる |
リソース参照
scripts/（決定論的処理）
| スクリプト | 機能 |
|---|---|
scripts/analyze-hook-candidates.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/extraction-criteria.md | Phase 1 |
| 設計パターン | references/design-patterns.md | Phase 2 |
| 合成パターン | references/composition-patterns.md | Phase 2 |
| テスト戦略 | references/testing-strategies.md | Phase 4 |
| 要求仕様索引 | references/requirements-index.md | 仕様確認時 |
| 旧スキル | references/legacy-skill.md | 互換確認時 |
assets/（テンプレート・素材）
| アセット | 用途 |
|---|---|
assets/basic-hooks-template.md |
基本フックテンプレート（インデックス） |
assets/basic-state-hooks.md |
状態管理フック（useToggle, useCounter, useInput） |
assets/side-effect-hooks.md |
副作用フック（useDebounce, useInterval, useTimeout） |
assets/event-hooks.md |
イベントフック（useEventListener, useClickOutside） |
assets/browser-api-hooks.md |
ブラウザAPIフック（useLocalStorage, useMediaQuery） |
assets/utility-hooks.md |
ユーティリティフック（usePrevious, useMounted） |
assets/advanced-hooks-template.md |
高度フックテンプレート（インデックス） |
assets/data-fetch-hooks.md |
データフェッチフック（useFetch, useAsync） |
assets/form-hooks.md |
フォームフック（useForm） |
assets/advanced-state-hooks.md |
高度状態管理フック（useReducerWithMiddleware, useUndoRedo） |
assets/websocket-hooks.md |
WebSocketフック（useWebSocket） |
assets/hook-review-checklist.md |
レビュー観点チェック |
assets/hook-api-contract-template.md |
API設計テンプレート |
運用ファイル
| ファイル | 目的 |
|---|---|
EVALS.json |
レベル評価・メトリクス管理 |
LOGS.md |
実行ログの蓄積 |
変更履歴
| Version | Date | Changes |
|---|---|---|
| 1.2.0 | 2026-01-06 | assets分割（500行制限対応）、9カテゴリファイル作成 |
| 1.1.0 | 2026-01-06 | extraction-criteria.md実装事例追加 |
| 1.0.0 | 2026-01-01 | 初版作成 |
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?