skills.rest
marcogonzalo
marcogonzaloCOMMUNITY
Explore all skills by this author →
Website𝕏@MarcoGonzaloGitHub

veta-forms-validation

Builds and validates Vite/Vue/Vaadin UI forms with Zod schemas and react-hook-form.

1|Updated Nov 26, 2025
Search Tags:#typescript#validation#zod#form state#radix ui#react-hook-form#shadcn select
One-click install
npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-forms-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: veta-forms-validation
Source: https://github.com/marcogonzalo/studio-manager/tree/main/.agents/skills/veta-forms-validation
Command: npx skills add https://github.com/marcogonzalo/studio-manager --skill veta-forms-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents form errors and broken UX by ensuring react-hook-form fields validate correctly with Zod, including safe handling of optional Select values in the Veta app.

Core Features & Use Cases

  • Zod-powered schema validation: Define a Zod schema and wire it into react-hook-form using zodResolver for consistent validation rules across the form.
  • Correct defaultValues for optional fields: Use undefined (not empty strings) in defaultValues to avoid accidental “selected” states and validation mismatches.
  • Shadcn/Radix Select compliance rule: Avoid value="" on SelectItem and convert empty values to undefined for optional selections to ensure Radix Select semantics stay correct.
  • Consistent form UI components: Use the shared Form, FormField, FormItem, FormControl, and FormMessage components for standardized layout and error rendering.

Quick Start

Create a Zod schema for your form, pass it to useForm via zodResolver, and update your Shadcn Select to map empty selections to undefined while using the shared Form components for field rendering.

Frequently Asked Questions about veta-forms-validation

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

FAQPage Schema
How do I validate react-hook-form inputs using Zod schemas?▼

Use undefined instead of empty strings for optional fields in defaultValues when validating react-hook-form forms with Zod. This prevents accidental selected states and validation mismatches in your form components.

Why does my Shadcn Select component break with optional values in react-hook-form?▼

Shadcn Select components break because Radix Select semantics reject empty strings. Avoid setting value="" on SelectItem and map empty selections to undefined to ensure correct optional value validation and UI behavior.

What is the best way to handle optional Select fields with Zod and react-hook-form?▼

The best way to handle optional Select fields is using undefined for defaultValues and mapping empty selections to undefined. This maintains correct Radix Select semantics and ensures Zod schema validation processes optional inputs accurately.

Can I use Zod schemas with Shadcn UI form components?▼

Yes, you can use Zod schemas with Shadcn UI form components by integrating zodResolver into react-hook-form. Use shared Form, FormField, FormItem, and FormMessage components for standardized layout and error rendering.

What causes validation mismatches in react-hook-form when using Radix Select?▼

Validation mismatches occur when defaultValues use empty strings instead of undefined for optional Radix Select fields. This triggers accidental selected states, causing Zod schema validation and the UI to fall out of sync.

Related Skills

Explore More Software Engineering Skills→
doanchienthangdevdoanchienthangdev
4

building-with-shadcn

Create accessible React UIs with shadcn/ui components and Radix primitives.

Community
Intermediate
kurtjameshayeskurtjameshayes

form_field_identification

Parse HTML registration forms to classify required and optional API key fields.

Community
Intermediate
Impertio-StudioImpertio-Studio

shadcn-syntax-form

Compose shadcn ui forms with react-hook-form and zodResolver.

Official
Advanced
tanaka-mambingetanaka-mambinge

react-form-validation

Validate React form inputs using react-hook-form and Yup schemas.

Community
Intermediate