form-generator-rhf-zod

# Form Generator with React Hook Form & Zod

Generate production-ready React forms using React Hook Form, Zod validation schemas, and accessible shadcn/ui form controls. This skill creates forms with client-side and server-side validation, proper TypeScript types, and consistent error handling.

## When to Use This Skill

Apply this skill when:
- Creating forms for entities (characters, locations, items, factions)
- Building data entry interfaces with validation requirements
- Generating forms with complex field types and conditional logic
- Setting up forms that need both client and server validation
- Creating accessible forms with proper ARIA attributes
- Building forms with multi-step or wizard patterns

## Resources Available

### Scripts

**scripts/generate_form.py** - Generates form component, Zod schema, and server action from field specifications.

Usage:
```bash
python scripts/generate_form.py --name CharacterForm --fields fields.json --output components/forms
```

**scripts/generate_zod_schema.py** - Converts field specifications to Zod schema with validation rules.

Usage:
```bash
python scripts/generate_zod_schema.py --fields fields.json --output lib/schemas
```

### References

**references/rhf-patterns.md** - React Hook Form patterns, hooks, and best practices
**references/zod-validation.md** - Zod schema patterns, refinements, and custom validators
**references/shadcn-form-controls.md** - shadcn/ui form component usage and examples
**references/server-actions.md** - Server action patterns for form submission

### Assets

**assets/form-template.tsx** - Base form component template with RHF setup
**assets/field-templates/** - Individual field component templates (Input, Textarea, Select, Checkbox, etc.)
**assets/validation-schemas.ts** - Common Zod validation patterns
**assets/form-utils.ts** - Form utility functions (formatters, transformers, validators)

## Form Generation Process

### Step 1: Define Field Specifications

Create a field specification