Skills
.Work. You
Rest

new-form

Official

Scaffold React forms with validation & mutations

Software Engineering#react#validation#zod#forms#tanstack-query#toast#hook-form
Authortechdiary-dev
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: new-form
Download link: https://github.com/techdiary-dev/techdiary.dev/archive/main.zip#new-form

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.