skills.rest
sethdavis512
sethdavis512COMMUNITY
Explore all skills by this author →
Website𝕏@sethdavis512GitHub

iridium-form

Build validated forms with React Hook Form, Zod, useFetcher, and DaisyUI v5 markup.

4|Updated Oct 24, 2025
Search Tags:#accessibility#zod#form validation#daisyui#react-hook-form#react-router#usefetcher
One-click install
npx skills add https://github.com/sethdavis512/iridium --skill iridium-form-sethdavis512
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: iridium-form
Source: https://github.com/sethdavis512/iridium/tree/main/.claude/skills/iridium-form
Command: npx skills add https://github.com/sethdavis512/iridium --skill iridium-form-sethdavis512

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building forms that validate consistently on both client and server is error-prone: schemas drift apart, server errors never reach the right fields, and styling conventions get mixed across versions. This Skill provides a single pattern for composing accessible, validated forms in the Iridium React Router 7 app using one shared Zod schema. ## Core Features & Use Cases - Shared validation schema: Define a Zod v4 schema once and use it with zodResolver on the client and safeParse in the route action, returning structured formError and fieldErrors payloads. - Server error surfacing: Lift per-field errors from the action response back into React Hook Form via setError, with accessible aria-describedby and aria-invalid wiring. - DaisyUI v5 markup conventions: Fieldset/legend structure, alert banners for form-level errors, pending-state submit buttons, and multi-intent submissions. - Use Case: Add a settings page form where the user updates their profile; invalid input shows inline field errors, a taken email returns a field error from the server, and the submit button disables while the fetcher is pending. ## Quick Start Ask the AI to create a new validated form for a create/edit page in this app, following the iridium-form pattern with a shared Zod schema and useFetcher submission.

Frequently Asked Questions about iridium-form

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

FAQPage Schema
How do I validate a React Hook Form with Zod on both client and server?▼

Define the Zod schema once, pass it to useForm via zodResolver from @hookform/resolvers/zod on the client, and call schema.safeParse on the request JSON inside the route action. Return fieldErrors mapped from error.issues so the client can display them.

How do I show server-side field errors in React Hook Form?▼

Return a fieldErrors object from the action, then in a useEffect iterate over its entries and call setError for each field. React Hook Form renders the messages through formState.errors like normal client validation errors.

Should I use useFetcher or Form for React Hook Form submissions in React Router 7?▼

Use useFetcher with fetcher.submit(data, { method: 'post', encType: 'application/json' }) for RHF forms, since RHF owns the submit handler and JSON avoids FormData stringification. Use plain Form only for mutations that redirect and don't need RHF.

Does Zod v4 still support z.string().email()?▼

No. Zod v4 uses standalone format functions like z.email(), z.url(), and z.uuid() instead of chained methods. Validation issues are read from result.error.issues with path and message properties.

When should I not use this form pattern?▼

Skip it for the chat input, which uses @ai-sdk/react useChat, for the existing Better Auth login and register flows, and for pure search or filter forms, which should use Form with method get to sync URL searchParams.

Related Skills

Explore More Software Engineering Skills→
tech-with-sethtech-with-seth
4

react-router-framework-mode

Build full-stack React applications with React Router framework mode.

Official
Advanced
abdoulayesowabdoulayesow

seri-offline

Integrates a local database with a cloud backend for seamless offline/online sync.

Community
Advanced
jjmendezrodriguezjjmendezrodriguez

code-errors

Convert TypeScript/React/Supabase failures into typed AppError-based error handling.

Community
Intermediate
flaviogragnolatiflaviogragnolati

react-hook-form-zod

Construct and validate React forms with React Hook Form and Zod schemas.

Community
Advanced