--- name: react-hook-form-shadcn-a2ee390f0625 description: This skill should be used whenever the user asks to create, build, generate, scaffold, or add a form in a React or Next.js project — including login, signup, registration, contact, checkout, profile, settings, feedback, or any UI that collects validated user input. Trigger on mentions of "form", "form validation", "react-hook-form", "zod schema", "shadcn form", "FormField", "useForm", "zodResolver", or requests for typed form inputs with error messages. Produces a single clean typed .tsx file using useForm, zodResolver, and shadcn/ui FormField wrappers with full Zod validation. license: MIT --- # React Hook Form + Zod + shadcn/ui Generator You generate clean, typed, production-ready React forms using `react-hook-form`, `zod`, and `shadcn/ui`. Follow the five-step workflow below in order. Do not skip steps. ## Compatibility - **Frameworks:** React 18+, Next.js 13+ (App Router or Pages Router). - **Required packages:** `react-hook-form`, `zod`, `@hookform/resolvers`. - **Required UI:** `shadcn/ui` (initialized with `components.json`) plus the `form`, `input`, `button`, and `label` components at minimum. - **Node:** 18 or newer. - **TypeScript:** required — this skill produces `.tsx` with no `any`. ## Reference files Load these on demand as you work through the steps: - `references/zod-patterns.md` — Zod schema recipes for every common field type. - `references/component-examples.md` — Full `` code blocks for each shadcn input. - `references/install-commands.md` — Install commands for npm, yarn, pnpm, bun, and shadcn CLI. --- ## Step 1 — Gather requirements Before writing any code, confirm you have: 1. **Form purpose** (login, signup, contact, checkout, profile, etc.) 2. **Field list** — every field name, its input type, and whether it is required 3. **Submit behavior** — what happens on submit (API call, route, callback) If any of the three are missing or ambiguous, **ask the user once** with a concise list of questions. Do not invent fields. Do not proceed with assumptions. Example clarifying prompt when fields are missing: > I can scaffold the form, but I need a bit more detail first: > 1. What is the form for (login, signup, contact, etc.)? > 2. Which fields should it contain, and what type is each (text, email, password, select, checkbox, etc.)? > 3. What should happen when the user submits — API call, navigation, or a callback I should stub? Once you have answers, continue. --- ## Step 2 — Check dependencies Read `package.json` from the project root and verify the following are installed: - `react-hook-form` - `zod` - `@hookform/resolvers` - Each shadcn/ui component the form needs (`form`, `input`, `button`, `label`, plus any of `textarea`, `select`, `checkbox`, `radio-group`, `switch` based on the field mapping from Step 3) For **anything missing**, print the exact install commands the user needs to run. Detect the package manager from lockfiles in this order: `bun.lockb` → bun, `pnpm-lock.yaml` → pnpm, `yarn.lock` → yarn, else npm. If unsure, print the npm version and mention the alternatives are in `references/install-commands.md`. If shadcn/ui is not yet initialized (no `components.json` at the project root), include the `shadcn init` command before the component `add` commands. Do not proceed to code generation until you have either confirmed all dependencies exist or clearly printed the install commands. --- ## Step 3 — Map fields to components Use this table to pick the correct shadcn/ui component and Zod type for every field. When a field doesn't match a row exactly, pick the closest match and note it in a comment in the generated file. | Field type | shadcn/ui component | Zod type | Notes | | --------------------- | ------------------------- | --------------------------------------------- | ---------------------------------------- | | text / name / title | `Input` (type="text") | `z.string().min(1, "...")` | Trim in `.transform` if needed. | | email | `Input` (type="email") | `z.string().email("...")` | | | password | `Input` (type="password") | `z.string().min(8).regex(...)` | See complexity rules in zod-patterns. | | confirm password | `Input` (type="password") | Same as password, plus schema-level `.refine` | Compare against `password` field. | | phone | `Input` (type="tel") | `z.string().regex(/^\+?[0-9\s\-()]{7,}$/)` | | | url | `Input` (type="url") | `z.string().url("...")` | | | number / age / amount | `Input` (type="number") | `z.coerce.number().int().min(x).max(y)` | Use `.coerce` since inputs emit strings. | | long text / message | `Textarea` | `z.string().min(1).max(n)` | | | single choice (list) | `Select` | `z.enum([...])` | | | single choice (2–4) | `RadioGroup` | `z.enum([...])` | | | on/off toggle | `Switch` | `z.boolean()` | | | boolean consent | `Checkbox` | `z.boolean().refine(v => v, "...")` | For required checkboxes like ToS. | | optional anything | add `.optional()` | `z.string().optional()` | Remember to handle in `defaultValues`. | Pull concrete code snippets for each row from `references/component-examples.md` and for schema patterns from `references/zod-patterns.md`. --- ## Step 4 — Generate the form Produce **one** file named `{FormName}Form.tsx` (PascalCase, e.g. `SignUpForm.tsx`, `ContactForm.tsx`). The file must follow this exact structure: ```tsx "use client"; // remove this line if you are not using the Next.js App Router import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; // import additional shadcn components here based on Step 3 mapping const formSchema = z.object({ // field definitions from Step 3 }); type FormValues = z.infer; export function {FormName}Form() { const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { // one entry per field — no missing keys }, }); const onSubmit = (values: FormValues) => { // submit logic }; return (
{/* one block per field */} ); } ``` ### Code generation rules (hard requirements) 1. **No `any` types.** Derive `FormValues` from the schema via `z.infer`. 2. **No inline styles.** Use Tailwind utility classes via `className`. 3. **No unnecessary `useEffect` or `useState`.** `react-hook-form` owns the state. 4. **No over-engineering.** No extra wrappers, no custom hooks, no speculative abstractions, no context providers. 5. **`"use client"` at the top**, with the inline comment `// remove this line if you are not using the Next.js App Router`. 6. **Every field** uses the shadcn `` / `` / `` / `` / `` wrappers — never a bare ``. 7. **Every field** has a message in its Zod rule so `` renders a meaningful error. 8. **`defaultValues`** includes **every** field — strings default to `""`, booleans to `false`, enums to a valid option or `undefined` (with the field typed optional). 9. **File name** is `{FormName}Form.tsx` — PascalCase, ends in `Form`. --- ## Step 5 — Final checklist Before handing the file to the user, verify each item. Treat this as a blocking gate. - [ ] Every field in the Zod schema has a descriptive error message (no bare `z.string()` without `.min`/`.email`/etc). - [ ] `FormValues` is `z.infer` — no hand-written duplicate type. - [ ] `onSubmit` is typed `(values: FormValues) => void` or `Promise`. - [ ] `defaultValues` has one key for **every** field in the schema. - [ ] All imports resolve: `@/components/ui/form`, `@/components/ui/input`, `@/components/ui/button`, plus any extra component used. - [ ] `"use client"` directive is present with the removal comment. - [ ] No `any`, no inline styles, no stray `useEffect`/`useState`, no unused imports. - [ ] Cross-field rules (e.g. confirm password) use schema-level `.refine` with a `path` pointing at the dependent field. - [ ] File is named `{FormName}Form.tsx`. If any checklist item fails, fix the file before responding. Only return the final `.tsx` file and — if Step 2 flagged missing packages — the install commands above it. --- Source attribution: raihansharifrimon Original project: https://github.com/raihansharifrimon/ai-agent-dev-skills/blob/e7fdcdf5e5e2714b12600ae6e4186adcdec1d668/skills/react-hook-form-shadcn/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 react-hook-form-shadcn skill authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: raihansharifrimon Original project: https://github.com/raihansharifrimon/ai-agent-dev-skills/blob/e7fdcdf5e5e2714b12600ae6e4186adcdec1d668/skills/react-hook-form-shadcn/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering, Product Management Roles: Frontend Developer, Product Manager, UX Designer Specialties: API, Word Documents, Frontend, React Tools: React Hook Form, Zod, Shadcn/Ui Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 377a1087f93391ffcf5c62fc95926e194a85b81b69cf39098c91c5b188d7b41e