Scaffold React Hook Form components with Zod validation and server mutations.
npx skills add https://github.com/techdiary-dev/techdiary.dev --skill new-form
Please help me install this Agent Skill. Skill: new-form Source: https://github.com/techdiary-dev/techdiary.dev/tree/main/.claude/skills/new-form Command: npx skills add https://github.com/techdiary-dev/techdiary.dev --skill new-form
Scaffold React forms with React Hook Form, Zod validation, and TanStack Query mutations to reduce boilerplate and enforce consistent patterns across features.
Specify the domain and field set, then generate a new form component wired to Zod validation and a server action via useMutation.
High-intent search queries and answers about installing and using this skill.
Scaffolding React Hook Form with Zod validation requires using zodResolver and a typed SubmitHandler, wiring form submissions to TanStack Query mutations for server actions to reduce boilerplate.
To reuse existing Zod schemas for React Hook Form validation, import your schemas from src/backend/services/inputs/<domain>.input.ts and pass them to zodResolver to ensure frontend and backend validation consistency.
Handling form mutation feedback with toast notifications involves integrating TanStack Query useMutation with your server actions, triggering toast notifications on success and error states to inform users of mutation results.
Yes, this form scaffolding approach works with server actions and shadcn/ui by enforcing a use client directive and utilizing shadcn/ui Form primitives to build interactive data-entry interfaces.
Yes, you can use this React form scaffolding for admin dashboards and signup flows, as it is specifically designed for frontend form-heavy features requiring data-entry interfaces and server mutation integration.
React Hook Form components need a use client directive because they rely on client-side interactivity, TanStack Query useMutation, and toast notifications, which cannot execute in server-side rendering environments.
vishalsachdevValidate forms and API data with Zod schemas and inferred TypeScript types.
techdiary-devGenerate TanStack Query hooks that call backend actions directly.
zaid-khan-codeDesign server-rendered Next.js App Router patterns with shadcn/ui and validated forms.
Bbeierle12Build React forms with React Hook Form and Zod validation.
