Is this compatible with UI libraries like Material UI or Radix?

Yes, it provides specific implementation patterns for the 'Controller' component, which is designed to wrap controlled components from external UI libraries.

Can I use this with Zod or Yup validation?

Yes, the skill specializes in the resolver pattern, which separates validation logic from form components using industry-standard schema libraries.

Does it support dynamic 'add more' style fields?

Absolutely. It implements the useFieldArray pattern with mandatory unique ID keys to prevent state corruption when adding, removing, or reordering items.

How does this skill improve form performance?

It utilizes React Hook Form's subscription-based model and 'useWatch' patterns, ensuring that only specific fields re-render instead of the entire form component.

React Hook Form Patterns

Name: React Hook Form Patterns
Author: agents-inc

byagents-inc

•

開発者ツール

Implements performant, type-safe React forms using React Hook Form best practices and optimized rendering patterns.

This skill empowers Claude to build complex, high-performance web forms using React Hook Form. It provides domain-specific guidance on implementing advanced patterns such as dynamic field arrays, schema-based validation via resolvers, and subscription-based state management to minimize unnecessary re-renders. By enforcing strict TypeScript generics and accessibility standards, it ensures that generated forms are not only production-grade and type-safe but also optimized for the best possible user experience with features like on-blur validation and isolated error displays.

主な機能

01Performance-optimized re-rendering via useWatch and subscription patterns

02Type-safe form handling using TypeScript generics with useForm

03Flexible integration for controlled components using the Controller pattern

04Dynamic field management with useFieldArray and unique ID tracking

05Seamless schema validation integration with Zod and other resolvers

061 GitHub stars

ユースケース

01Building complex enterprise forms with dynamic, repeatable field sections

02Creating multi-step onboarding wizards with persistent state and validation

03Optimizing input-heavy applications where standard React state causes lag

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

主な機能

01Performance-optimized re-rendering via useWatch and subscription patterns

02Type-safe form handling using TypeScript generics with useForm

03Flexible integration for controlled components using the Controller pattern

04Dynamic field management with useFieldArray and unique ID tracking

05Seamless schema validation integration with Zod and other resolvers

061 GitHub stars

ユースケース

01Building complex enterprise forms with dynamic, repeatable field sections

02Creating multi-step onboarding wizards with persistent state and validation

03Optimizing input-heavy applications where standard React state causes lag

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