.claude/skills/performance-optimization-react/SKILL.md

Performance Optimization React

概要

Reactアプリケーションのパフォーマンス最適化を専門とするスキル。 ダン・アブラモフの思想に基づき、測定駆動の最適化アプローチを提供します。

詳細な手順や背景は resources/​Level1_basics.md と resources/​Level2_intermediate.md を参照してください。

ワークフロー

Phase 1: 目的と前提の整理

目的: タスクの目的と前提条件を明確にする

アクション:

1. resources/​Level1_basics.md と resources/​Level2_intermediate.md を確認
2. 必要な resources/​scripts/​templates を特定

Phase 2: スキル適用

目的: スキルの指針に従って具体的な作業を進める

アクション:

1. 関連リソースやテンプレートを参照しながら作業を実施
2. 重要な判断点をメモとして残す

Phase 3: 検証と記録

目的: 成果物の検証と実行記録の保存

アクション:

1. scripts/​validate-skill.mjs でスキル構造を確認
2. 成果物が目的に合致するか確認
3. scripts/​log_usage.mjs を実行して記録を残す

ベストプラクティス

すべきこと

• 不要な再レンダリングを検出・防止する時
• React.memoやメモ化の適用を判断する時
• React DevTools Profilerで測定する時
• Context APIのパフォーマンス問題を解決する時

避けるべきこと

• アンチパターンや注意点を確認せずに進めることを避ける

コマンドリファレンス

リソース読み取り

cat .claude/​skills/​performance-optimization-react/​resources/​Level1_basics.md
cat .claude/​skills/​performance-optimization-react/​resources/​Level2_intermediate.md
cat .claude/​skills/​performance-optimization-react/​resources/​Level3_advanced.md
cat .claude/​skills/​performance-optimization-react/​resources/​Level4_expert.md
cat .claude/​skills/​performance-optimization-react/​resources/​context-splitting.md
cat .claude/​skills/​performance-optimization-react/​resources/​legacy-skill.md
cat .claude/​skills/​performance-optimization-react/​resources/​profiler-measurement.md
cat .claude/​skills/​performance-optimization-react/​resources/​re-rendering-patterns.md
cat .claude/​skills/​performance-optimization-react/​resources/​react-memo-guide.md

スクリプト実行

node .claude/​skills/​performance-optimization-react/​scripts/​log_usage.mjs --help
node .claude/​skills/​performance-optimization-react/​scripts/​validate-skill.mjs --help

テンプレート参照

cat .claude/​skills/​performance-optimization-react/​templates/​optimization-checklist.md

変更履歴