frontend-refactor-planner について
複雑なフロントエンドコードを安全に段階的リファクタリングする計画を立てるスキルです。リスク評価と優先順位付けを支援し、テストやロールバックを考慮した小刻みな作業に整理します。
主な機能
- 01フロントエンドの複雑さとリスクの評価
- 02影響とリスクに基づく優先順位付け
- 03小さくテスト可能な段階計画
- 04性能とアクセシビリティの改善
- 05リリースとロールバックの対策
活用シーン
- 01大規模なフロントエンドコンポーネントの分割
- 02重複ロジックと状態の複雑さの削減
- 03アクセシビリティ改善の計画
- 04テストを伴う段階的リファクタリングの準備
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/frontend-refactor-plannerを入力して読み込まれたか確認します。
詳細
フロントエンドのリファクタリング計画
複雑なフロントエンドコードを安全に段階的にリファクタリングする計画を作成します。
リファクタリングの評価
問題の特定：大規模なコンポーネント（300行超）、プロップドリリング、ロジックの重複、パフォーマンスの低下、アクセシビリティの不足、密結合、テストされていないコード 優先順位付け：リスク（トラフィックの多いページを優先）と影響度（ユーザーに見えるバグを優先）に基づいて決定します フェーズの計画：小さく、テスト可能な単位に分割します
よくあるリファクタリングのパターン
コンポーネントの分割：サブコンポーネントを抽出し、複合コンポーネントを作成し、ロジックと表示を分離します 状態管理：状態を上位に引き上げ、Context/Zustand に移し、不要な状態を削除します パフォーマンス：メモ化（useMemo/useCallback）、コード分割、遅延読み込み、仮想化 アクセシビリティ：ARIA ラベル、キーボードナビゲーション、フォーカス管理、セマンティック HTML を追加します テスト：リファクタリングの前にテストを追加し、変更のたびにテストします
段階的なアプローチ
フェーズ 1 - 安定化：テストを追加し、重大なバグを修正し、現在の動作を文書化します フェーズ 2 - 抽出：ユーティリティを切り出し、小さなコンポーネントを作成し、複雑さを軽減します フェーズ 3 - 簡素化：不要なコードを削除し、重複を統合し、状態を最適化します フェーズ 4 - 仕上げ：パフォーマンスの最適化、アクセシビリティ監査、ドキュメント作成
リスク軽減
機能フラグによる段階的なロールアウト、リファクタリング版と元の版の A/B テスト、エラー率の監視、ロールバック計画の用意、すべての変更のピアレビュー、段階的なデプロイ。
完了基準
コードカバレッジが 80％超、パフォーマンス指標が改善、アクセシビリティスコアが 95 以上、テストでリグレッションがないこと、コードレビューの承認、ドキュメントの更新。