Delegate independent tasks to specialized agents working concurrently with isolated context.
295.4K 206.3K
View 
状態リフティング
state-lifting
Reactにおける状態リフティングと状態配置判断を支援するスキル。 兄弟コンポーネント間の状態共有、Prop Drilling削減、Context導入判断、 Compound Componentパターンまで、React状態管理の全体像を扱う。 Anchors: • React Documentation (Lifting State Up) / 適用: 共有状態の配置判断 / 目的: 最小責務での共有設計 • Thinking in React / 適用: 状態配置の判断フロー / 目的: 最適な状態配置の特定 • Kent C. Dodds (Colocation) / 適用: 状態...
SKILL.md
Full skill instructions
状態リフティング
概要
共有状態の配置と伝播設計を整理し、最小限の状態リフティングで一貫したデータフローを維持するスキル。 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で伝播する
- 更新関数をメモ化し依存関係を整理する
参照: references/colocation-principles.md
Task: agents/sl-003-props-state-passing.md を参照
Phase 3: Context導入判断
目的: Prop Drillingが過剰な場合にContext導入を判断する
アクション:
- Props伝播階層と頻度を確認する
- Prop Drillingの負荷を評価する
- Context導入のメリット/デメリットを整理する
参照: references/prop-drilling-solutions.md, references/context-patterns.md
Task: agents/sl-005-context-api-introduction.md を参照
Phase 4: 複合コンポーネント設計
目的: Compound Componentで共有状態を局所化する
アクション:
- 共有状態を局所化する構成を決める
- 子コンポーネントの役割を定義する
- APIと使用例を設計する
テンプレート: assets/compound-component-template.md
Task: agents/sl-007-compound-component-pattern.md を参照
Task仕様ナビ
| Task | 起動タイミング | 入力 | 出力 |
|---|---|---|---|
| sl-001-analyze-requirements | Phase 1開始時 | コンポーネント情報、状態一覧 | 状態共有要件レポート |
| sl-003-props-state-passing | Phase 2開始時 | 状態共有要件、既存コード | Props伝播設計 |
| sl-005-context-api-introduction | Phase 3開始時 | Props伝播設計 | Context導入判断 |
| sl-007-compound-component-pattern | Phase 4開始時 | Context判断、設計要件 | Compound Component設計 |
詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照
ベストプラクティス
すべきこと
| 推奨事項 | 理由 |
|---|---|
| 共通親が最小の箇所に状態を配置する | 過度なリフティングを避けられる |
| Props経由の一方向フローを維持する | デバッグ容易性が高まる |
| Context導入は必要最小限に留める | 依存範囲が広がり過ぎるのを防ぐ |
| 派生状態は計算で済ませる | 状態重複を避けられる |
| コンポジションパターンを検討する | Prop Drillingを根本解決できる |
避けるべきこと
| 禁止事項 | 問題点 |
|---|---|
| 深いProp Drillingを放置 | 保守性と可読性が低下する |
| 不要なグローバル化 | 影響範囲が拡大する |
| 状態の重複管理 | 不整合が発生する |
| Contextの乱用 | 再レンダリングを誘発する |
| 高頻度更新データをContext化 | パフォーマンスが劣化する |
リソース参照
references/（詳細知識）
| リソース | パス | 読込条件 |
|---|---|---|
| 状態配置ガイド | references/state-placement-guide.md | 共有状態の配置判断時 |
| Prop Drilling対策 | references/prop-drilling-solutions.md | Prop Drilling対策検討時 |
| Contextパターン | references/context-patterns.md | Context導入判断時 |
| Colocation原則 | references/colocation-principles.md | 状態と利用箇所の距離判断時 |
scripts/（決定論的処理）
| スクリプト | 機能 | 使用例 |
|---|---|---|
analyze-state-structure.mjs | 状態構造の分析 | node scripts/analyze-state-structure.mjs <file.tsx> |
log_usage.mjs | 使用記録の保存 | node scripts/log_usage.mjs --result success |
validate-skill.mjs | スキル構造検証 | node scripts/validate-skill.mjs |
assets/（テンプレート）
| アセット | 用途 |
|---|---|
compound-component-template.md | Compound Component概要・索引 |
select-template.md | Selectコンポーネント |
accordion-template.md | アコーディオンコンポーネント |
tabs-template.md | タブコンポーネント |
modal-template.md | モーダルコンポーネント |
context-provider-template.md | Context Providerテンプレート |
変更履歴
| Version | Date | Changes |
|---|---|---|
| 2.2.0 | 2026-01-06 | compound-component-template分割、実装事例追加 |
| 2.1.0 | 2026-01-03 | 18-skills.md仕様に完全準拠、構造整理 |
| 2.0.0 | 2026-01-02 | ワークフロー再編 |
| 1.0.0 | 2025-12-28 | 初版作成 |
More Other skills
Other
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
179.7K 100.1K
View Other
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
179.7K 89.5K
View Other
internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
179.7K 76.1K
View Fundamental design principles for writing maintainable, testable Python code.
40.2K 21.9K
View 
Other
responsive-design
Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.
40.2K 20K
View Generate Playwright tests from scenarios using interactive browser exploration and validation.
39.7K 18.2K
View Automated website exploration and test case generation using Playwright.
39.7K 14.9K
View Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.
40.2K 14.7K
View Other
gdpr-data-handling
GDPR-compliant data handling with consent management, data subject rights, and privacy controls.
40.2K 14.3K
View Python error handling patterns including input validation, exception hierarchies, and partial failure handling. Use when implementing validation logic, designing exception strategies, handling batch processing failures, or building robust APIs.
40.2K 13.5K
View 
Other
refactor-plan
Detailed multi-file refactor planning with safety checks and rollback guidance.
39.7K 13K
View