How does it improve form performance?

It advocates for subscription-based hooks like useWatch and useFormState to ensure only specific fields re-render rather than the entire form.

Does this skill support schema validation?

Yes, it emphasizes the resolver pattern for libraries like Zod or Yup to separate validation logic from form components.

Does it work with UI libraries like MUI or Radix?

Yes, it provides specific guidance on using the Controller component to integrate with controlled components that don't expose a native ref.

Can I use this for dynamic fields?

Absolutely. It includes patterns for useFieldArray to manage repeatable field groups with proper key management using field.id.

React Hook Form Patterns

Name: React Hook Form Patterns
Author: agents-inc

byagents-inc

0•

デザインツール

Streamlines the creation of type-safe, high-performance React forms using industry-standard React Hook Form patterns and best practices.

This skill equips Claude with specialized knowledge to implement robust form logic using React Hook Form. It provides implementation patterns for everything from basic uncontrolled inputs to complex dynamic field arrays and multi-step wizards. The skill focuses on maximizing performance through subscription-based updates and ensuring strict type safety with TypeScript generics, while also covering schema validation integration and controlled component handling for modern UI libraries.

主な機能

01Schema-based validation patterns using Zod and Resolver integration

02Performance optimization via useWatch and isolated re-render subscriptions

03Advanced state sharing with FormProvider and useFormContext for nested UIs

040 GitHub stars

05Type-safe form handling using TypeScript generics with useForm

06Dynamic field management with useFieldArray and unique ID tracking

ユースケース

01Integrating controlled third-party UI components into performance-sensitive forms

02Developing complex multi-step registration or checkout wizards

03Managing dynamic data entry forms like invoice line items or nested lists

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

主な機能

01Schema-based validation patterns using Zod and Resolver integration

02Performance optimization via useWatch and isolated re-render subscriptions

03Advanced state sharing with FormProvider and useFormContext for nested UIs

040 GitHub stars

05Type-safe form handling using TypeScript generics with useForm

06Dynamic field management with useFieldArray and unique ID tracking

ユースケース

01Integrating controlled third-party UI components into performance-sensitive forms

02Developing complex multi-step registration or checkout wizards

03Managing dynamic data entry forms like invoice line items or nested lists

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