type-safe-form-validation_skill

Overview

This skill provides a comprehensive, type-safe pattern for form and API payload validation using Zod with automatic error formatting and TypeScript inference. It centralizes validation schemas so the same rules run on both client and server, yields runtime-safe checks, and produces user-friendly error messages. Use it to keep form logic DRY and to guarantee data integrity across layers.

How this skill works

Define Zod schemas once and reuse them for client-side forms, server-side request validation, and response checks. The skill includes helpers to format Zod errors into field-level messages, utilities to extract typed payloads, and examples for integrations like React Hook Form and Next.js API routes. Schemas support composition, transforms, conditional logic, and custom validators so runtime values map directly to inferred TypeScript types.

When to use it

• Building forms that require identical client and server validation
• Validating API request or response payloads before processing
• Creating reusable validation primitives for multiple features
• Ensuring consistent, user-friendly error messages across UI and API
• Validating complex nested objects, arrays, or conditional shapes

Best practices

• Keep schemas as the single source of truth and import them in both UI and server code
• Use formatters to convert Zod errors into field-specific messages for form libraries
• Prefer schema composition for repeated patterns (base entities, common fields)
• Use .partial() and refinements for PATCH or conditional updates, and require at least one changed field when appropriate
• Add transforms sparingly to keep validation predictable; use separate transform pipelines when extracting derived values

Example use cases

• Register form with password confirmation and strength rules integrated into React Hook Form
• API route that parses request.json(), runs Zod.parse and returns 400 with formatted errors on validation failure
• Complex project settings validation demonstrating nested objects, enums, and numeric constraints
• A URL input schema that trims input, extracts a YouTube video ID, and fails with a clear message if extraction fails
• Discriminated payment schema that narrows types based on a method field to safely process different payment flows