form-refactorer
Modernizes legacy React forms by migrating them to the Redpanda UI Registry Field component pattern.
Install
mkdir -p .claude/skills/form-refactorer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3461" && unzip -o skill.zip -d .claude/skills/form-refactorer && rm skill.zipInstalls to .claude/skills/form-refactorer
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Refactor legacy forms to use modern Redpanda UI Registry Field components.
- →Implement react-hook-form for form state management.
- →Integrate Zod for validation schemas via zodResolver.
- →Convert Chakra UI or @redpanda-data/ui forms to the modern pattern.
- →Update forms to use Field, FieldLabel, and Input components.
- →Ensure FieldLabel has `htmlFor` matching Input `id`.
How it works
The skill refactors legacy form code by replacing old components with a specific hierarchy of Redpanda UI Registry Field components, react-hook-form for state, and Zod for validation.
Inputs & outputs
When to use form-refactorer
- →Migrate legacy Chakra UI forms
- →Implement react-hook-form with Zod validation
- →Refactor form components to Redpanda UI
About this skill
Form Refactorer
Refactor legacy forms to modern Redpanda UI Registry Field components with react-hook-form and Zod validation.
Core Requirements
MUST USE (Modern Pattern)
- Field component family from
components/redpanda-ui/components/field - react-hook-form for form state management
- Zod for validation schemas via
zodResolver
FORBIDDEN (Legacy Patterns)
See no-legacy for prohibited patterns. Also never import Form from components/redpanda-ui/components/form.
Component Hierarchy
FieldSet - Semantic fieldset container for related fields
├─ FieldLegend - Title for the fieldset
├─ FieldDescription - Description for entire fieldset
└─ FieldGroup - Layout wrapper that stacks fields
├─ Field - Individual field wrapper
│ ├─ FieldLabel - Label for input (use htmlFor)
│ ├─ Input/Select/... - Form control
│ ├─ FieldDescription - Helper text
│ └─ FieldError - Error message
├─ FieldSeparator - Visual divider between fields
└─ Field - Another field
Key Patterns
Vertical field:
<Field data-invalid={!!errors.fieldName}>
<FieldLabel htmlFor="fieldName">Label</FieldLabel>
<Input id="fieldName" {...register("fieldName")} aria-invalid={!!errors.fieldName} />
{errors.fieldName && <FieldError>{errors.fieldName.message}</FieldError>}
</Field>
Horizontal field (switch/checkbox):
<Field orientation="horizontal">
<Switch id="toggle" {...register("toggle")} />
<FieldContent>
<FieldLabel htmlFor="toggle">Enable Feature</FieldLabel>
<FieldDescription>Description</FieldDescription>
</FieldContent>
</Field>
Checklist
Before completing refactoring, verify:
- All legacy form imports removed (Chakra, @redpanda-data/ui, legacy Form)
- Field components used for all fields
- FieldLabel has
htmlFormatching Inputid - Errors show
data-invalidon Field andaria-invalidon Input - Yup replaced with Zod + zodResolver
- FieldSet + FieldLegend used for semantic grouping
- FieldError conditionally rendered:
{errors.field && <FieldError>... - Form submission handled via react-hook-form
handleSubmit
References
- Common Patterns — Dynamic fields, field arrays, multi-section forms, pitfalls, Zod patterns
- Migration Examples — Before/after examples for Chakra/legacy -> modern
- Field Component Docs
When not to use it
- →When the form does not require react-hook-form for state management.
- →When validation is not handled by Zod.
- →When the form does not use Redpanda UI Registry Field components.
Limitations
- →Cannot be used with legacy form imports from Chakra or @redpanda-data/ui.
- →Requires the use of Field component family from `components/redpanda-ui/components/field`.
- →Requires Zod for validation schemas via `zodResolver`.
How it compares
This skill automates the migration of forms to a specific component and validation standard, unlike manual refactoring which requires developers to identify and replace each legacy pattern individually.
Compared to similar skills
form-refactorer side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| form-refactorer (this skill) | 1 | 5mo | No flags | Intermediate |
| react-modernization | 21 | 2mo | No flags | Advanced |
| state-management | 1 | 5mo | No flags | Beginner |
| writing-react-effects | 1 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by redpanda-data
View all by redpanda-data →You might also like
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
state-management
redpanda-data
Manage client and server state with Zustand stores and React Query patterns.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
building-compound-components
tambo-ai
Creates unstyled compound components that separate business logic from styles. Use when building headless UI primitives, creating component libraries, implementing Radix-style namespaced components, or when the user mentions "compound components", "headless", "unstyled", "primitives", or "render props".
rendering-conditional-render
TheOrcDev
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
creating-styled-wrappers
tambo-ai
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".