Why does this skill require field.id for array keys?

Using array indices as keys in useFieldArray can cause state corruption and UI bugs during adding or reordering items. field.id provides a stable, unique identifier.

When should I use Controller instead of register?

Use the Controller component for controlled UI library components (like Material UI or Radix) that do not expose a native ref. Use register for standard HTML5 inputs.

How does this skill improve form performance?

It prioritizes uncontrolled inputs and subscription-based hooks like useWatch and useFormState, which ensure only the specific fields changing will re-render rather than the entire form.

Can I use this skill with Zod or Yup?

Yes, the skill specifically covers the resolver pattern, which is the standard way to integrate Zod, Yup, or Joi schemas for centralized form validation.

React Hook Form Patterns

Name: React Hook Form Patterns
Author: agents-inc

byagents-inc

•

Developer Tools

Implements high-performance, type-safe web forms using React Hook Form best practices and optimized state management patterns.

This skill provides a comprehensive framework for building robust forms with React Hook Form within Claude Code. It focuses on performance-first patterns, utilizing subscription-based updates and uncontrolled components to minimize re-renders. The skill enforces critical best practices such as mandatory TypeScript generics for type safety, schema-based validation via resolvers, and proper management of dynamic field arrays. Whether building simple contact forms or complex multi-step wizards, this skill ensures your form logic is scalable, maintainable, and follows modern React development standards.

Key Features

011 GitHub stars

02Dynamic field array management with stable key identification

03Type-safe form handling using TypeScript generics

04Schema validation integration via Zod/Resolver patterns

05Isolated re-render optimization using useWatch and useFormState

06Context-based form sharing for deeply nested components

Use Cases

01Developing complex data-entry interfaces with dynamic, repeatable fields

02Optimizing large-scale forms to maintain high performance and responsiveness

03Building multi-step wizard forms with per-step validation logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-forms-react-hook-form

For use in Claude.ai and ChatGPT

Key Features

011 GitHub stars

02Dynamic field array management with stable key identification

03Type-safe form handling using TypeScript generics

04Schema validation integration via Zod/Resolver patterns

05Isolated re-render optimization using useWatch and useFormState

06Context-based form sharing for deeply nested components

Use Cases

01Developing complex data-entry interfaces with dynamic, repeatable fields

02Optimizing large-scale forms to maintain high performance and responsiveness

03Building multi-step wizard forms with per-step validation logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-forms-react-hook-form

For use in Claude.ai and ChatGPT