form-refactorer
Modernizuj starsze formularze do komponentów Redpanda UI z walidacją Zod
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do refaktoryzacji formularzy opartych na starszych wzorcach. Konwertuje formularze Chakra UI i @redpanda-data/ui na nowoczesne komponenty Field z biblioteki Redpanda UI Registry. Integruje react-hook-form do zarządzania stanem formularza i Zod do deklaratywnej walidacji. Przydatny gdy chcesz ujednolicić komponenty formularzy w projekcie, wyeliminować przestarzałe wzorce lub wdrożyć spójny system walidacji.
Jak używać
Zainstaluj skill form-refactorer w swoim środowisku Claude/Copilot. Skill automatycznie aktywuje się, gdy poprosisz o refaktoryzację formularza lub modernizację komponentów formularza.
Przygotuj kod formularza, który chcesz zmienić — może to być formularz oparty na Chakra UI, starszych komponentach @redpanda-data/ui lub dowolnym innym wzorcu. Udostępnij kod w zapytaniu.
Poproś skill o refaktoryzację, używając jednego z kluczowych słów: "refactor form", "modernize form", "convert to Field components", "migrate from legacy patterns" lub "implement react-hook-form with Zod".
Skill zastosuje hierarchię komponentów Redpanda UI: FieldSet jako kontener, FieldGroup do układu pól, Field dla poszczególnych pól wejściowych, oraz FieldLabel, FieldDescription i FieldError dla etykiet, opisów i komunikatów błędów.
Upewnij się, że nowy kod używa react-hook-form do zarządzania stanem (funkcja register) i Zod do definiowania schematów walidacji (zodResolver). Skill automatycznie usuwa zakazane wzorce, takie jak import Form z components/redpanda-ui/components/form.
Przejrzyj wygenerowany kod i wdróż go w swoim projekcie. Nowe formularze będą spójne z systemem designu Redpanda i będą mieć wbudowaną walidację po stronie klienta.