---
name: "react-hook-form-zod-resolver"
description: "Build high-performance, non-re-rendering form components with strict Zod type safety."
metadata:
  author: "React Hook Form"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "validate form react-hook-form zod"
  - "usefieldarray dynamic inputs"
  - "handle submit react-hook-form"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# React Hook Form & Zod Schema Form Validation

Implements React Hook Form: integrating @hookform/resolvers/zod, managing controlled vs uncontrolled inputs, field arrays (useFieldArray), formState (errors, isSubmitting, isValid), and custom input wrappers.

## When to Invoke
Invoke this skill whenever you need to:
- validate form react-hook-form zod
- usefieldarray dynamic inputs
- handle submit react-hook-form

## Execution SOP & Rules
1. Define Zod schema and infer TypeScript type: type FormData = z.infer<typeof schema>.
2. Initialize hook: const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({ resolver: zodResolver(schema) }).
3. Register input: <input {...register('email')} /> and display errors: {errors.email?.message}.
4. Pass submit callback to handleSubmit(onValidSubmit) ensuring errors prevent submission.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.