shadcn ui: end-to-end Form workflow (zod + react-hook-form)

This skill is the IMPLEMENTATION recipe that orchestrates the primitives covered in shadcn-syntax-form, shadcn-syntax-field, and shadcn-syntax-selectors. It teaches the five-step workflow from zod schema definition to typed submit handler to server-error display.

ALWAYS read shadcn-syntax-form first if the seven Form primitives are unclear. ALWAYS read shadcn-syntax-selectors first if binding Select, Checkbox, RadioGroup, or Switch to Controller is unclear.

Quick Reference

Canonical end-to-end form

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"