version: "1.0.1" name: state-lifting description: | 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 allowed-tools:

• Read
• Write
• Edit
• Bash
• Glob
• Grep

状態リフティング

概要

共有状態の配置と伝播設計を整理し、最小限の状態リフティングで一貫したデータフローを維持するスキル。 Reactにおける状態管理の基本原則から高度なパターンまでをカバーする。

ワークフロー

analyze-requirements → design-state-placement → implement-lifting → evaluate-context → apply-patterns

Phase 1: 状態共有の要件整理

目的: 共有状態と共通親の候補を特定する

アクション:

1. コンポーネントツリーを把握する
2. 状態を使用するコンポーネントを列挙する
3. 最も近い共通親を特定する

参照: references/state-placement-guide.md

Task: agents/sl-001-analyze-requirements.md を参照

Phase 2: Props経由の状態伝播

目的: 状態と更新関数をpropsで一方向に伝播する

アクション:

1. 親コンポーネントに状態を集約する
2. 子コンポーネントへpropsで伝播する
3. 更新関数をメモ化し依存関係を整理する

参照: references/colocation-principles.md

Task: agents/sl-003-props-state-passing.md を参照

Phase 3: Context導入判断

目的: Prop Drillingが過剰な場合にContext導入を判断する

アクション:

1. Props伝播階層と頻度を確認する
2. Prop Drillingの負荷を評価する
3. Context導入のメリット/デメリットを整理する

参照: references/prop-drilling-solutions.md, references/context-patterns.md

Task: agents/sl-005-context-api-introduction.md を参照

Phase 4: 複合コンポーネント設計

目的: Compound Componentで共有状態を局所化する

アクション:

1. 共有状態を局所化する構成を決める
2. 子コンポーネントの役割を定義する
3. APIと使用例を設計する

テンプレート: assets/compound-component-template.md

Task: agents/sl-007-compound-component-pattern.md を参照

Task仕様ナビ

詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照

ベストプラクティス

すべきこと

避けるべきこと

リソース参照

references/（詳細知識）

scripts/（決定論的処理）

assets/（テンプレート）

変更履歴