skills.rest
human-centric-engineering
human-centric-engineeringOFFICIAL
Explore all skills by this author →
WebsiteGitHub

form-builder

Creates validated React forms using react-hook-form, Zod, and shadcn/ui components.

Updated Jul 28, 2026
Search Tags:#typescript#next.js#zod#shadcn/ui#form validation#react-hook-form#form builder
One-click install
npx skills add https://github.com/human-centric-engineering/resparkable --skill form-builder-human-centric-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-builder
Source: https://github.com/human-centric-engineering/resparkable/tree/main/.claude/skills/form-builder
Command: npx skills add https://github.com/human-centric-engineering/resparkable --skill form-builder-human-centric-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building forms in a Next.js application involves repetitive decisions about validation, state management, error display, and accessibility. This Skill encodes the established Resparkable form pattern so every new form follows the same conventions without re-deriving them. ## Core Features & Use Cases - Standardized Form Composition: Generates forms with react-hook-form, zodResolver, mode: 'onTouched', complete default values, and per-field <FormError> display. - Correct Client Selection: Enforces apiClient for non-auth submissions and authClient for sign-in, sign-up, and OAuth flows, with proper error handling for each. - Contextual Help Enforcement: Adds <FieldHelp> popovers to every non-trivial field as required by project conventions. - Use Case: Ask for a settings form with notification toggles and a timezone selector, and receive a complete Zod schema in lib/validations/ plus a form component in components/forms/ using Switch and Select via Controller. ## Quick Start Ask the assistant to create a profile edit form with name, email, and bio fields following the form-builder patterns.

Frequently Asked Questions about form-builder

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

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

Define a Zod schema in lib/validations/, export its inferred type, then call useForm with zodResolver, mode 'onTouched', and default values for every field. Register inputs with register() and display errors through a FormError component.

How do I use shadcn/ui Switch and Select with react-hook-form?▼

Wrap non-native shadcn/ui components like Switch and Select in a Controller from react-hook-form. Pass field.value to checked or value props and field.onChange to onCheckedChange or onValueChange, since these components do not support register() directly.

When should I use authClient versus apiClient for form submission?▼

Use authClient only for authentication flows such as signIn.email, signUp.email, and signIn.social. Use apiClient for all other submissions like profile updates and settings changes, catching APIClientError for error messages.

Why does my form show uncontrolled to controlled warnings?▼

The warning appears when defaultValues are missing from useForm, so fields start as undefined and become controlled on typing. Provide a default value for every schema field, typically empty strings for text inputs.

Why does optional URL validation fail on empty strings in Zod?▼

An empty string is not a valid URL, so z.string().url().optional() still rejects it. Append .or(z.literal('')) to the field to explicitly permit empty values for optional URL inputs.

Related Skills

Explore More Software Engineering Skills→
voidcorp-corevoidcorp-core

void-form-pattern

Builds validated React forms with react-hook-form, Zod resolvers, and Server Action submit flows.

Official
Intermediate
freedomw1987freedomw1987
2

client-api-wire-shape-verification

Verify client API wrapper shapes against backend route handlers and Prisma returns.

Community
Intermediate
rdb420rdb420

web-app-user-tester

Guide AI agents through end-to-end web application testing via browser automation.

Community
Advanced
pascallammerspascallammers
1

react-server-actions

Implement React Server Actions for form handling and server mutations in Next.js 14+.

Community
Intermediate