component-refactoring

Skill do refaktoryzacji zaawansowanych komponentów React w projekcie Dify. Automatycznie analizuje złożoność kodu i sugeruje podział na mniejsze części, ekstrakcję hooków lub redukcję logiki. Używaj, gdy analiza wykaże złożoność powyżej 50 punktów lub liczba linii przekroczy 300. Idealny dla zespołów utrzymujących duże komponenty frontendowe — oszczędza czas na ręcznym przeglądem kodu i ułatwia testowanie.

1. Przejdź do katalogu web/ w projekcie Dify: cd web
2. Uruchom analizę wybranego komponentu poleceniem pnpm analyze-component <ścieżka> --json, gdzie <ścieżka> to ścieżka względna do pliku (np. app/components/MyComponent.tsx). Sprawdź metryki: complexity (powinno być poniżej 50) i lineCount (poniżej 300).
3. Jeśli complexity jest powyżej 50 lub lineCount powyżej 300, uruchom pnpm refactor-component <ścieżka>, aby otrzymać szczegółową analizę refaktoryzacji z konkretnymi sugestiami.
4. Dodaj flagę --json (pnpm refactor-component <ścieżka> --json), aby otrzymać wynik w formacie JSON, łatwym do integracji z innymi narzędziami.
5. Zastosuj sugerowane wzorce refaktoryzacji: ekstrakcję custom hooków, podział logiki na mniejsze komponenty lub wydzielenie stanu. Skill sugeruje konkretne miejsca w kodzie do zmian.
6. Po refaktoryzacji ponownie uruchom pnpm analyze-component, aby potwierdzić spadek złożoności i gotowość do testów.