form-validation

Validates forms using React Hook Form and Zod. Use when creating forms with validation, handling form state, showing error messages, or implementing multi-step forms. Includes schema patterns and Controller usage.

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/form-validation

SKILL.md

Form Validation Skill

Instructions

Use React Hook Form with Zod resolver
Set mode: 'onChange' for real-time validation
Use Korean error messages
Wrap inputs with Controller component

Quick Start

tsx

import { useForm, Controller } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2, '2자 이상 입력해주세요.'),
  email: z.string().email('유효한 이메일을 입력해주세요.'),
})

type FormData = z.infer<typeof schema>

const { control, handleSubmit, formState: { errors, isValid } } = useForm<FormData>({
  resolver: zodResolver(schema),
  mode: 'onChange',
})

Controller Pattern

tsx

<Controller
  name="title"
  control={control}
  render={({ field, fieldState }) => (
    <input {...field} className={fieldState.error ? 'border-red-500' : ''} />
  )}
/>

For complete schema patterns, input components, and Zod 4.x migration notes, see reference.md.