skills.rest
hpark0011
hpark0011COMMUNITY
Explore all skills by this author →
GitHub

react-form-builder

Create type-safe React forms using react-hook-form, Zod schemas, and Next.js server actions.

Updated Apr 17, 2026
Search Tags:#typescript#react#next.js#zod#server actions#form validation#react-hook-form
One-click install
npx skills add https://github.com/hpark0011/mirror --skill react-form-builder-hpark0011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-form-builder
Source: https://github.com/hpark0011/mirror/tree/main/.agents/skills/react-form-builder
Command: npx skills add https://github.com/hpark0011/mirror --skill react-form-builder-hpark0011

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form, @hookform/resolvers, zod.

What problem does it solve? Building client-side forms in React involves repetitive decisions about validation, error handling, loading states, and type safety. This Skill enforces a consistent architecture for forms using react-hook-form, Zod schemas, and Next.js server actions so every form follows the same proven patterns. ## Core Features & Use Cases - Standardized Form Architecture: Generates forms with useForm, zodResolver, useTransition for pending states, and isRedirectError handling for server action redirects. - UI Component Integration: Uses @feel-good/ui primitives (Form, FormField, Input, Select, Checkbox, Switch, Textarea, Alert) with Trans components for internationalization and data-test attributes for E2E testing. - Use Case: When adding a "create product" form to a Next.js app, invoke this Skill to produce the Zod schema in _lib/schemas/, the server action in _lib/server/, and the typed client form component with validation, error alerts, and toast notifications. ## Quick Start Ask the agent to create a React form with react-hook-form and Zod validation for your chosen fields, wired to a Next.js server action.

Frequently Asked Questions about react-form-builder

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

FAQPage Schema
How do I create a React form with react-hook-form and Zod validation?▼

Define a Zod schema, pass it to useForm via zodResolver, and render fields with FormField and FormControl components. Set mode and reValidateMode to onChange so validation feedback appears as the user types.

How to handle loading states when submitting forms to Next.js server actions?▼

Wrap the server action call in startTransition from the useTransition hook and use the pending flag to disable the submit button. Catch errors inside the transition and ignore redirect errors using isRedirectError.

Should I add generic types to useForm when using zodResolver?▼

No. zodResolver infers the form types directly from the Zod schema, so adding redundant generics to useForm is unnecessary. Use z.infer on the schema when you need the type elsewhere.

Why does my form throw an error after a successful server action redirect?▼

Next.js redirects throw a special error internally. Check errors with isRedirectError from next/dist/client/components/redirect-error and skip setting your error state for those, while still catching genuine failures.

When should I not use useState for form field values?▼

Field values belong in react-hook-form state, not useState. Reserve useState for UI concerns like error flags, and use useTransition for pending states rather than manual loading booleans.

Related Skills

Explore More Software Engineering Skills→
allthingslinuxallthingslinux
4

designing-zod-schemas

Design Zod schemas for validation and TypeScript type inference.

Official
Intermediate
wraps-teamwraps-team
55

create-server-action

Implement Next.js server actions with TanStack Form and zod validation.

Official
Advanced
ksciuskscius
2

form-testing

Automate browser-based form testing with empty, invalid, and valid data passes.

Community
Intermediate
astrolabe-appsastrolabe-apps
1

appforms-bootstrap

Generate TypeScript schemas from C# types for AppForms.

Official
Advanced