Toolverse
All skills
Frontend

form-refactorer

by redpanda-data

Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4)

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
redpanda-data
Category
Frontend
Views
3
GitHub repo

About this skill

Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4) Migrating from legacy form patterns, (5) Implementing forms with react-hook-form and Zod validation.

How to use

  1. Zainstaluj skill form-refactorer w swoim środowisku Claude/Copilot. Skill automatycznie aktywuje się, gdy poprosisz o refaktoryzację formularza lub modernizację komponentów formularza.

  2. 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.

  3. 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".

  4. 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.

  5. 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.

  6. 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.

Related skills

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676