component-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity u003e 50 or lineCount u003e 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Refactor high-complexity React components in Dify frontend. Use when pnpm analyze-component --json shows complexity u003e 50 or lineCount u003e 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when pnpm analyze-component warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
How to use
- Przejdź do katalogu web/ w projekcie Dify: cd web
- 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).
- 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.
- Dodaj flagę --json (pnpm refactor-component <ścieżka> --json), aby otrzymać wynik w formacie JSON, łatwym do integracji z innymi narzędziami.
- Zastosuj sugerowane wzorce refaktoryzacji: ekstrakcję custom hooków, podział logiki na mniejsze komponenty lub wydzielenie stanu. Skill sugeruje konkretne miejsca w kodzie do zmian.
- Po refaktoryzacji ponownie uruchom pnpm analyze-component, aby potwierdzić spadek złożoności i gotowość do testów.