skills.rest
redpanda-data
redpanda-dataOFFICIAL
Explore all skills by this author →
Website𝕏@redpandadataGitHub

form-refactorer

Refactor legacy React forms to Redpanda UI Field components with react-hook-form and Zod validation.

4.3k|430|Updated Sep 29, 2019
Search Tags:#zod#Frontend#react-hook-form# accessibility#reAct#chakra ui migration#form refactoring
One-click install
npx skills add https://github.com/redpanda-data/console --skill form-refactorer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-refactorer
Source: https://github.com/redpanda-data/console/tree/main/frontend/.claude/skills/form-refactorer
Command: npx skills add https://github.com/redpanda-data/console --skill form-refactorer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form, zod, @hookform/resolvers, and includes references (resource) components.

What problem does it solve?

Legacy forms built with Chakra UI or @redpanda-data/ui components are inconsistent, hard to maintain, and lack modern accessibility patterns. This Skill migrates them to the modern Redpanda UI Registry Field component family with react-hook-form state management and Zod schema validation.

Core Features & Use Cases

  • Legacy-to-Modern Migration: Converts Chakra UI FormControl/FormLabel/FormErrorMessage and @redpanda-data/ui Form patterns into Field, FieldLabel, FieldError, and FieldDescription components.
  • Validation Modernization: Replaces Yup schemas with Zod schemas wired through zodResolver, including conditional validation with refine.
  • Accessibility Enforcement: Ensures htmlFor/id label association, data-invalid on Field, and aria-invalid on inputs for every refactored field.
  • Use Case: When updating a Kafka connector configuration form from Chakra UI to the current design system, the Skill restructures it into FieldSet/FieldGroup sections, swaps validation to Zod, and applies the full accessibility checklist.

Quick Start

Refactor this legacy Chakra UI form to use Redpanda UI Field components with react-hook-form and Zod validation.

Frequently Asked Questions about form-refactorer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a Chakra UI form to react-hook-form and Zod?▼

Replace FormControl with Field using data-invalid, FormLabel with FieldLabel using htmlFor, and FormErrorMessage with conditionally rendered FieldError. Then swap Yup schemas for Zod schemas connected through zodResolver from @hookform/resolvers.

How to build dynamic form fields with react-hook-form?▼

Use useWatch to observe a controlling field value and conditionally render dependent fields. For repeatable groups, use useFieldArray with append and remove, registering inputs with indexed paths like tags.0.key.

Zod vs Yup for react-hook-form validation?▼

This codebase standardizes on Zod with zodResolver and forbids Yup in refactored forms. Zod supports string, number, array, and object validations plus conditional checks via refine for cross-field rules.

Why is my form label not associated with the input?▼

Label association fails when FieldLabel lacks htmlFor or the Input lacks a matching id. Set FieldLabel htmlFor="email" and Input id="email" so screen readers and click targeting work correctly.

How do I show validation errors accessibly in React forms?▼

Set data-invalid on the Field wrapper and aria-invalid on the Input when the error exists, then conditionally render FieldError only when errors.fieldName is present. This keeps error state visible to both styling and assistive technology.

Related Skills

Explore More Software Engineering Skills→
redpanda-dataredpanda-data
34

redpanda-frontend-kit

Set up Redpanda frontend projects with React and UI registry workflow.

Official
Advanced
YazanKittanehYazanKittaneh

new-endpoint

Scaffold RESTful and Next.js API endpoints with handlers, schemas, queries, tests, and OpenAPI entries.

Community
Advanced
blockblock
49

client-boundaries

Detect forbidden cross-app imports and console.log calls in frontend code.

Official
Intermediate
anicca-labsanicca-labs

form

Generate and validate React Native/Expo form components from Zod schemas.

Official
Intermediate