vhm24-forms

What problem does it solve?

This Skill helps frontend teams design and validate complex forms quickly by providing reusable patterns for React Hook Form and Zod, reducing boilerplate and enabling maintainable form logic at scale.

Core Features & Use Cases

• Multi-step wizards with dynamic fields and cross-field validation.
• MD Directory Builder for modeling flexible metadata structures within forms.
• Reusable UI form components and patterns for common form scenarios (CRUD, import/export, and configuration flows).
• Real-world example: Build a multi-page product form with dependent fields, server-side validation, and type-safe schemas.

Quick Start

Install the required libraries (react-hook-form, @hookform/resolvers, and zod), then create a form using useForm with a zodResolver, and extend it with dynamic fields via useFieldArray as needed. For UI, reference the provided form components patterns and the MD directory builder to model fields and validations.