React Hook Form + Zod + shadcn/ui Generator

---
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 `<FormField>` 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<typeof formSchema>;

export function {FormName}Form() {
  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      // one entry per field — no missing keys
    },
  });

  const onSubmit = (values: FormValues) => {
    // submit logic
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        {/* one <FormField> block per field */}
        <Button type="submit" disabled={form.formState.isSubmitting}>
          Submit
        </Button>
      </form>
    </Form>
  );
}
```

### 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 `<FormField>` / `<FormItem>` / `<FormLabel>` / `<FormControl>` / `<FormMessage>` wrappers — never a bare `<input>`.
7. **Every field** has a message in its Zod rule so `<FormMessage />` 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<typeof formSchema>` — no hand-written duplicate type.
- [ ] `onSubmit` is typed `(values: FormValues) => void` or `Promise<void>`.
- [ ] `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.