new-form

Name: new-form
Availability: InStock
Author: Techdiary

Scaffold React Hook Form components with Zod validation and server mutations.

13|5|Updated May 18, 2024

Search Tags:#react #validation #zod #forms #tanstack-query #toast #hook-form

Ready to run

npx skills add https://github.com/techdiary-dev/techdiary.dev --skill new-form

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffold React forms with React Hook Form, Zod validation, and TanStack Query mutations to reduce boilerplate and enforce consistent patterns across features.

Core Features & Use Cases

Scaffolded Form component using RHF with zodResolver and typed SubmitHandler
Reuses existing Zod schemas from src/backend/services/inputs/<domain>.input.ts to ensure consistency
Includes server actions via useMutation with toast notifications on success and error
Enforces "use client" and uses shadcn/ui Form primitives
Use Cases: admin dashboards, signup forms, and dynamic data-entry forms

Quick Start

Specify the domain and field set, then generate a new form component wired to Zod validation and a server action via useMutation.

Frequently Asked Questions about new-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold React Hook Form with Zod validation and server mutations?▼

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.

How do I reuse existing Zod schemas for React Hook Form validation?▼

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.

What's the best way to handle form mutation feedback with toast notifications?▼

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.

Does this form scaffolding approach work with server actions and shadcn/ui?▼

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.

Can I use this React form scaffolding for admin dashboards and signup flows?▼

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.

Why do my React Hook Form components need a use client directive?▼

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.