create-form

Enforce consistent Zod form validation across React client and server.

4|Updated Oct 24, 2025

Search Tags:#TypeScript #Zod #server actions #form validation #React Hook Form #client-server

Ready to run

npx skills add https://github.com/tech-with-seth/iridium --skill create-form

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-form
Source: https://github.com/tech-with-seth/iridium/tree/main/.github/skills/create-form
Command: npx skills add https://github.com/tech-with-seth/iridium --skill create-form

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web apps with forms often duplicate validation logic between the client and server, leading to inconsistent errors and extra maintenance.

Core Features & Use Cases

Unified validation: Shared Zod schemas on client and server to prevent duplication.
Instant feedback: Client-side validation with React Hook Form for a snappy UX.
Secure server validation: Server actions validate data against the same schema and surface precise errors to the UI.
Use Case: Build admin forms, signup flows, or contact forms with consistent validation and error handling.

Quick Start

Define a Zod schema in app/lib/validations.ts
Create a server action using validateFormData and zodResolver
Build a client form with useValidatedForm and register inputs
Submit the form to trigger server-side validation and read errors

Frequently Asked Questions about create-form

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

FAQPage Schema

How do I share form validation logic between client and server in React?▼

Share form validation logic by defining a single Zod schema used by both React Hook Form on the client and server actions. This prevents duplicated rules and inconsistent errors during form submission.

How do I set up validated forms with Zod and React Hook Form?▼

Set up validated forms by installing zod, @hookform/resolvers, and react-hook-form. Define a Zod schema, create a server action, and build a client form using zodResolver to enforce schema rules instantly.

Can I use server actions to validate form data with a shared Zod schema?▼

Yes, server actions can validate form data against a shared Zod schema. The server processes the submission, enforces consistent rules, and surfaces precise validation errors back to the UI.

Do I need a separate validation schema for my React client and server route?▼

No, you do not need separate schemas. A shared Zod schema placed in a common file like app/lib/validations.ts ensures the React client and server route enforce identical validation rules.

What is the best way to handle signup and contact form validation in TypeScript?▼

The best way to handle signup and contact form validation in TypeScript is using a shared Zod schema. It provides type safety, client-side feedback via React Hook Form, and secure server validation.

Why do my form errors differ between the client UI and the server response?▼

Form errors differ because validation logic is duplicated between client and server. Consolidating rules into a single shared Zod schema ensures both environments enforce identical constraints and return matching errors.