state-lifting
Reactにおける状態リフティングと状態配置判断を支援するスキル。 兄弟コンポーネント間の状態共有、Prop Drilling削減、Context導入判断、 Compound Componentパターンまで、React状態管理の全体像を扱う。 Anchors: • React Documentation (Lifting State Up) / 適用: 共有状態の配置判断 / 目的: 最小責務での共有設計 • Thinking in React / 適用: 状態配置の判断フロー / 目的: 最適な状態配置の特定 • Kent C. Dodds (Colocation) / 適用: 状態と利用箇所の距離 / 目的: 保守性とパフォーマンスの両立 Trigger: Use when lifting state between components, sharing state across siblings, reducing prop drilling, deciding on Context usage, or implementing compound components. state lifting, prop drilling, context api, state placement, compound component, react state, colocation
SKILL.md 本文
状態リフティング
概要
共有状態の配置と伝播設計を整理し、最小限の状態リフティングで一貫したデータフローを維持するスキル。 Reactにおける状態管理の基本原則から高度なパターンまでをカバーする。
ワークフロー
analyze-requirements → design-state-placement → implement-lifting → evaluate-context → apply-patterns
Phase 1: 状態共有の要件整理
目的: 共有状態と共通親の候補を特定する
アクション:
- コンポーネントツリーを把握する
- 状態を使用するコンポーネントを列挙する
- 最も近い共通親を特定する
参照: references/state-placement-guide.md
Task: agents/sl-001-analyze-requirements.md を参照
Phase 2: Props経由の状態伝播
目的: 状態と更新関数をpropsで一方向に伝播する
アクション:
- 親コンポーネントに状態を集約する
- 子コンポーネントへpropsで伝播する
- 更新関数をメモ化し依存関係を整理する
参照: `re
...
詳細情報
- 作者
- majiayu000
- ライセンス
- 不明
- 最終更新
- 2026/5/9
Source: https://github.com/majiayu000/claude-skill-registry-data / ライセンス: 未指定