component-refactoring
von Charlie85270Die component-refactoring-Fähigkeit hilft dir, React-Komponenten mit hoher Komplexität im Dify-Frontend anhand von Analyzer-gestützter Anleitung zu refaktorieren. Nutze sie, wenn `pnpm analyze-component --json` eine Komplexität über 50, eine Zeilenanzahl über 300 oder Bedarf an Code-Splitting, Hook-Extraktion oder einem sichereren component-refactoring-Leitfaden statt eines generischen Rewrites anzeigt.
Diese Fähigkeit erreicht 84/100 und ist damit ein solider Kandidat für Verzeichnisseinträge für Nutzer, die einen gezielten Workflow zum Refactoring von React-Komponenten suchen. Das Repository liefert ausreichende Auslöse-Regeln, Metriken und Musterhinweise, damit ein Agent besser entscheiden kann, wann es eingesetzt wird und wie man ohne so viel Rätselraten wie bei einem generischen Prompt startet.
- Explizite Auslösbarkeit: einsetzen, wenn `pnpm analyze-component --json` eine Komplexität > 50 oder `lineCount` > 300 zeigt oder wenn nach Code-Splitting/Hook-Extraktion gefragt wird.
- Der Workflow ist konkret: Er enthält Befehlsbeispiele, JSON-Ausgabeoptionen und einen definierten Schwellenwert bzw. Zielwert für die Komplexität.
- Umfangreicher Leitfadeninhalt: Mehrere Referenzdokumente behandeln Komponententeilung, Hook-Extraktion und Muster zur Reduzierung der Komplexität.
- Der Workflow ist auf das Dify-Frontend und `web/`-Pfade ausgerichtet und lässt sich daher außerhalb dieser Codebasis nur eingeschränkt übertragen.
- Es werden keine Installationsbefehle oder Skripte mitgeliefert; Nutzer müssen die zugehörigen CLI-Tools bereits in ihrer Umgebung verfügbar haben.
Überblick über die component-refactoring-Skill
Was component-refactoring macht
Die component-refactoring-Skill hilft dir dabei, React-Komponenten mit hoher Komplexität im Dify-Frontend gezielt zu refaktorisieren, ohne raten zu müssen, wo du anfangen sollst. Sie ist für Fälle gedacht, in denen eine Komponente bereits zu groß, zu tief verschachtelt oder zu schwer sauber testbar ist und du einen strukturierten Plan brauchst, um UI aufzuteilen, Hooks auszulagern oder die kognitive Komplexität zu senken.
Wann sie gut passt
Nutze die component-refactoring-Skill, wenn pnpm analyze-component --json eine Komplexität über 50 oder eine Zeilenanzahl über 300 meldet oder wenn der Analyzer explizit empfiehlt, vor dem Testen zu refaktorieren. Sie passt auch gut, wenn es konkret um Code-Splitting, Hook-Extraktion oder die Vereinfachung einer Komponente geht, die zu viele bedingte Verzweigungen angesammelt hat.
Was sie nützlich macht
Diese Skill ist stärker auf Entscheidungen ausgerichtet als ein generischer Refactor-Prompt. Sie gibt dir einen Workflow, der an Difys Komponenten-Analysetools gekoppelt ist, plus konkrete Reduktionsmuster wie das Aufteilen nach Abschnitten und das Extrahieren von Hooks. Das ist wichtig, weil das Hauptproblem bei großen React-Dateien nicht die Syntax ist, sondern das Verhalten zu erhalten, während Kopplung reduziert wird.
So verwendest du die component-refactoring-Skill
Installieren und auf das richtige Repo ausrichten
Installiere die component-refactoring-Skill mit npx skills add Charlie85270/Dorothy --skill component-refactoring. Der Workflow setzt das Dify-Frontend-Layout voraus, also führe die Befehle aus web/ heraus aus und verwende Pfade relativ zu diesem Verzeichnis, zum Beispiel app/components/....
Mit Analyse starten, nicht mit einem Rewrite
Ein guter Ablauf für die component-refactoring-Nutzung ist: Komponente analysieren, den generierten Prompt prüfen und dann nur die Teile refaktorieren, die tatsächlich die Komplexität treiben. Verwende pnpm analyze-component <path> --json, um Score und Zeilenanzahl zu bestätigen, und pnpm refactor-component <path> --json, wenn du ein maschinenlesbares Refactoring-Briefing brauchst. Wenn die Datei nicht über dem Schwellwert liegt, ist die Skill möglicherweise unnötig.
Diese Dateien zuerst lesen
Für echten praktischen Nutzen der component-refactoring-Anleitung lies zuerst SKILL.md und danach die Referenzdokumente, die die Muster hinter dem Prompt erklären: references/complexity-patterns.md, references/component-splitting.md und references/hook-extraction.md. Diese Dateien zeigen dir, was die Skill als Komplexität versteht und welche Arten von Änderungen sie tatsächlich reduzieren.
Ein grobes Ziel in einen besseren Prompt verwandeln
Die Skill funktioniert am besten, wenn dein Input die Zielkomponente, das Ziel und etwaige Einschränkungen klar benennt. Statt also „refaktoriere diese Komponente“ zu schreiben, formuliere lieber: „Refaktoriere app/components/foo/index.tsx, um die kognitive Komplexität unter 50 zu senken. Extrahiere bevorzugt Hooks für State/Effects und teile den Modal-Bereich auf, ändere aber weder das Verhalten noch die öffentlichen Props.“ So eine Präzision verbessert die Ausgabe, weil sie der Skill sagt, was erhalten bleiben soll und was optimiert werden soll.
FAQ zur component-refactoring-Skill
Ist component-refactoring nur für Dify gedacht?
Ja, der component-refactoring for Refactoring-Workflow ist auf die Dify-Frontend-Konventionen, Befehlsnamen und Komponentenpfade ausgerichtet. Du kannst die Ideen auch anderswo anwenden, aber Installations- und Nutzungshinweise sind vor allem dann wertvoll, wenn du in dieser Codebasis oder in einem sehr ähnlichen React-Monorepo arbeitest.
Kann ich sie statt eines normalen Prompts verwenden?
Ja, aber die Skill ist einem generischen Prompt überlegen, wenn du wiederholbare Refactoring-Hinweise brauchst, die an messbare Komplexität gekoppelt sind. Ein einfacher Prompt kann grobe Aufräumarbeit vorschlagen; component-refactoring ist nützlicher, wenn der nächste Schritt evidenzbasiert und durch die Analyzer-Ausgabe begrenzt sein soll.
Muss ich fortgeschritten sein, um sie zu nutzen?
Nein. Die Skill eignet sich auch für Einsteiger, die eine Ziel-Datei identifizieren und die Analysebefehle ausführen können. Die wichtigste Voraussetzung ist, dass du einen konkreten Komponentenpfad angeben kannst und dem Modell sagst, ob der Schwerpunkt auf Aufteilen, Hook-Extraktion oder dem Senken der Komplexität liegt.
Wann sollte ich sie nicht verwenden?
Verwende die component-refactoring-Skill nicht für einfache Komponenten, Wrapper von Drittanbietern oder Fälle, in denen du nur Tests willst, ohne die Struktur zu verändern. Wenn eine Komponente bereits gut lesbar ist und unter dem Schwellwert liegt, kann Refactoring unnötigen Aufwand erzeugen.
So verbesserst du die component-refactoring-Skill
Bessere Eingabemetriken liefern
Der schnellste Weg, die component-refactoring-Nutzung zu verbessern, ist, die Analyzer-Ausgabe in deine Anfrage aufzunehmen: Complexity-Score, maxComplexity, lineCount und eventuelle Warnhinweise. Diese Details helfen der Skill, sich auf den eigentlichen Engpass zu konzentrieren, statt jede große Datei gleich zu behandeln.
Den gewünschten Refactor-Stil klar benennen
Wenn du ein bestimmtes Ergebnis willst, sag es direkt. Zum Beispiel: „UI-Abschnitte zuerst aufteilen“, „einen Custom Hook für geteilten State/Effects extrahieren“ oder „bedingtes Rendern im Haupt-Return reduzieren“. Das ist besser als eine vage „mach es sauberer“-Anfrage, weil die Skill dein Ziel dem passenden Muster aus den Referenzen zuordnen kann.
Auf die typischen Fehler achten
Die größten Fehler sind zu starkes Aufsplitten, Logik zu verschieben, ohne sie wirklich zu vereinfachen, und Verhalten zu verändern, nur um die Komplexität zu drücken. Stärkere Inputs senken diese Risiken: Benenne, welche Props, Side Effects und Modal-Flows stabil bleiben müssen, und bitte um minimale Änderungen an der externen API.
Nach dem ersten Durchlauf iterieren
Führe nach dem ersten Refactor pnpm analyze-component <path> --json erneut aus und vergleiche den Score mit dem Zielwert. Wenn die Komplexität immer noch hoch ist, bitte die Skill, sich auf den verbleibenden branch-lastigen Block oder einen einzelnen Hook-Kandidaten zu konzentrieren, statt die ganze Datei noch einmal komplett umzubauen.