component-refactoring
作成者 Charlie85270component-refactoringスキルは、アナライザーの指標をもとに、Difyフロントエンド内の複雑なReactコンポーネントをリファクタリングするのを支援します。`pnpm analyze-component --json` で複雑度が50を超える、行数が300を超える、またはコード分割、hook抽出、あるいは一般的な書き換えではなく、より安全なcomponent-refactoringの手順が必要な場合に使います。
このスキルは84/100点で、Reactコンポーネントのリファクタリングに的を絞ったワークフローを求めるディレクトリ利用者にとって有力な掲載候補です。リポジトリには、発動条件、指標、パターンのガイダンスが十分にそろっており、いつ使うべきか、どこから始めるべきかを汎用プロンプトよりも少ない試行錯誤で判断しやすくなっています。
- `pnpm analyze-component --json` で複雑度が50超、またはlineCountが300超のとき、あるいはコード分割やhook抽出を求められたときに使う、という明確な発動条件がある。
- 運用フローが具体的で、コマンド例、JSON出力オプション、複雑度のしきい値と目標が定義されている。
- 内容のガイダンスが充実しており、コンポーネント分割、hook抽出、複雑度削減のパターンを扱う参照ドキュメントが複数ある。
- ワークフローはDifyフロントエンドと`web/`配下のパスに特化しているため、そのコードベース以外への転用性は低い。
- インストールコマンドやスクリプトは用意されていないため、利用者側の環境に関連CLIツールがすでに入っている必要がある。
component-refactoring スキルの概要
component-refactoring でできること
component-refactoring スキルは、Dify のフロントエンドにある高複雑度の React コンポーネントを、どこから手を付けるべきか迷わずリファクタリングするためのものです。すでにコンポーネントが大きすぎる、入れ子が深すぎる、あるいはテストしづらすぎるケースを想定しており、UI の分割、hooks の抽出、認知複雑度の削減に向けた構造的な方針を立てるのに役立ちます。
どんなときに向いているか
pnpm analyze-component --json の結果で複雑度が 50 を超えている、行数が 300 を超えている、またはテスト前にリファクタリングが必要だとアナライザーが明示している場合に、component-refactoring スキルを使うのが適しています。コード分割、hook 抽出、条件分岐が増えすぎたコンポーネントの単純化といった作業が主目的のときにも向いています。
何が便利なのか
このスキルは、一般的なリファクタリング用プロンプトよりも意思決定に寄っています。Dify の component 分析ツールに紐づいた作業フローに加え、セクション単位の分割や hook 抽出といった具体的な削減パターンを提示してくれます。大きな React ファイルで本当に難しいのは構文ではなく、挙動を保ちながら結合度を下げることだからです。
component-refactoring スキルの使い方
インストールして、正しい repo を指す
npx skills add Charlie85270/Dorothy --skill component-refactoring で component-refactoring スキルをインストールします。ワークフローは Dify の frontend レイアウトを前提にしているため、コマンドは web/ から実行し、app/components/... のようにそのディレクトリ基準のパスを使ってください。
まずは書き換えではなく分析から始める
component-refactoring usage をうまく進める流れは、まずコンポーネントを分析し、生成された prompt を確認し、そのうえで本当に複雑度の原因になっている部分だけをリファクタリングすることです。pnpm analyze-component <path> --json でスコアと行数を確認し、機械可読なリファクタリング指示が欲しいときは pnpm refactor-component <path> --json を使います。ファイルが閾値を超えていないなら、このスキルは不要な場合があります。
先に読むべきファイル
実践的な component-refactoring guide としては、まず SKILL.md を読み、そのあと prompt の背後にあるパターンを説明した references/complexity-patterns.md、references/component-splitting.md、references/hook-extraction.md を確認してください。これらのファイルを見ると、このスキルが何を複雑度とみなしているのか、どの変更が実際にそれを下げるのかが分かります。
ざっくりした目的を、より良い prompt に変える
このスキルは、入力に対象コンポーネント、目的、制約がきちんと書かれているほど効果を発揮します。たとえば「このコンポーネントをリファクタリングして」ではなく、「app/components/foo/index.tsx を、認知複雑度が 50 未満になるようにリファクタリングしてください。state/effects は hook 抽出を優先し、modal 部分は分割してください。ただし挙動と public props は変えないでください」と書くほうがよいです。このレベルまで具体化すると、何を維持し、何を最適化すべきかがスキルに伝わり、出力の質が上がります。
component-refactoring スキルの FAQ
component-refactoring は Dify 専用ですか？
はい。component-refactoring for Refactoring のワークフローは、Dify frontend の慣習、コマンド名、component パスを前提に設計されています。他の環境にも考え方は応用できますが、インストール手順と使い方の案内が最も役立つのは、この codebase か、それに非常によく似た React monorepo で作業している場合です。
普通の prompt の代わりに使えますか？
使えますが、複雑度を測れる形で再現性のあるリファクタリング指示が必要なときは、一般的な prompt よりこのスキルのほうが有効です。素の prompt でも広い範囲の整理は提案できますが、component-refactoring が真価を発揮するのは、次に何をすべきかが分析結果に基づいており、なおかつ範囲が明確に絞られている場面です。
上級者でないと使えませんか？
いいえ。対象ファイルを特定できて、分析コマンドを実行できるなら、初心者でも使えます。必要なのは、具体的な component path を示し、優先したい方向が分割なのか、hook 抽出なのか、複雑度の削減なのかを伝えられることです。
どんなときに使わないほうがいいですか？
単純なコンポーネント、third-party wrapper、構造を変えずにテストだけ追加したいケースでは、component-refactoring スキルは使わないでください。すでに読みやすく、しきい値も下回っているコンポーネントを無理にリファクタリングすると、不要な変更が増えるだけになりがちです。
component-refactoring スキルを改善する方法
入力メトリクスをもっと良くする
component-refactoring usage を最も早く改善する方法は、依頼にアナライザーの出力を含めることです。複雑度スコア、maxComplexity、lineCount、警告文があれば一緒に添えてください。こうした情報があると、スキルは「大きいファイル一般」ではなく、実際のボトルネックに集中できます。
望むリファクタリングの型を明示する
欲しい結果が決まっているなら、最初にそれを伝えてください。たとえば「まず UI をセクションごとに分割する」「共有 state/effects 用の custom hook を抽出する」「main return の conditional rendering を減らす」などです。これは曖昧に「もっときれいにして」と頼むよりずっと有効です。references にあるパターンに、あなたの目的を正しく対応づけやすくなるからです。
よくある失敗パターンに注意する
よくある失敗は、分割しすぎること、ロジックを移すだけで単純化していないこと、複雑度を下げることを優先するあまり挙動を変えてしまうことです。よりよい入力を与えると、このリスクを減らせます。たとえば、どの props、side effects、modal の流れを固定したいのかを明記し、外部 API の変更は最小限にしてほしいと伝えてください。
1 回目の結果を見て反復する
最初のリファクタリングが終わったら、pnpm analyze-component <path> --json をもう一度実行し、スコアが目標に近づいたか確認します。それでも複雑度が高いなら、ファイル全体をやり直すのではなく、残っている分岐の多いブロックか、候補の hook を 1 つに絞ってスキルに再依頼してください。