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

form-builder

Generate validated forms with Zod, react-hook-form, and shadcn/ui in Next.js.

3|Updated Dec 12, 2025
Search Tags:#validation#next.js#zod#shadcn/ui#form#react-hook-form
One-click install
npx skills add https://github.com/human-centric-engineering/sunrise --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/sunrise/tree/main/.claude/skills/form-builder
Command: npx skills add https://github.com/human-centric-engineering/sunrise --skill form-builder-human-centric-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of complex, production-ready forms by automating the implementation of validation, API integration, and user feedback patterns.

Core Features & Use Cases

  • Rapid Form Development: Generates forms using Zod for validation, react-hook-form for state management, and shadcn/ui for components.
  • Pattern Enforcement: Ensures consistency in loading states, error handling, and accessibility across all forms.
  • Use Case: Quickly scaffold a user registration form with email validation, password strength feedback, and clear error messages upon submission.

Quick Start

Use the form-builder skill to create a new user profile form with name, email, and bio fields.

Frequently Asked Questions about form-builder

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

FAQPage Schema
How do I build a validated form in Next.js using Zod and react-hook-form?▼

Build a validated form in Next.js by generating components with Zod for schema validation and react-hook-form for state management, enforcing consistent patterns for loading states, error handling, and accessibility across your application.

Can I use shadcn/ui components with react-hook-form for user registration?▼

Yes, you can use shadcn/ui components with react-hook-form to scaffold a user registration form, enabling email validation, password strength feedback, and clear submission error messages using established codebase patterns.

What is the best way to enforce consistent form validation patterns in a React application?▼

Enforce consistent form validation patterns by generating forms with Zod schemas and react-hook-form, ensuring standardized API integration, loading states, error handling, and accessibility across all forms in your codebase.

Does the form-builder skill support modifying existing forms or only creating new ones?▼

The form-builder skill supports both creating new validated forms and modifying existing ones by referencing established Zod, react-hook-form, and shadcn/ui patterns already present in your Next.js codebase.

How do I add API integration and loading states to a Zod validated form?▼

Add API integration and loading states to a Zod validated form by generating the form structure with react-hook-form and shadcn/ui, which automatically enforces patterns for asynchronous submission and user feedback.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
koralliskorallis
90

react-server-actions

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

Community
Intermediate
xyqyearxyqyear

shadcn-form

Generates Zod-validated shadcn/ui form components with React Hook Form.

Community
Advanced
Bbeierle12Bbeierle12
8

form-react

Build React forms with React Hook Form and Zod validation.

Community
Intermediate