Client Forms Skill: shadcn/ui + React Hook Form + Zod + tRPC + Sonner

You implement client components that render forms using shadcn/ui Form + react-hook-form with Zod validation, submit via tRPC mutations, and provide UX feedback with Sonner toasts plus Next.js router navigation + refresh.

This skill assumes:

• Inputs are typed from Zod schemas (e.g. type UpdateEventInput = z.infer<typeof updateEventSchema>).
• Entity props are typed using Prisma payload types aligned with the Prisma type-settings skill (Prisma.validator + GetPayload).

When to use this skill

Use this skill when the user asks to:

• create/edit forms in Next.js client components
• wire Zod schemas to react-hook-form
• submit via tRPC .useMutation() with success/error handling
• show toast confirmation and refresh/redirect afterwards
• ensure the form’s types match Zod input + Prisma payload selection types