form-gen

What problem does it solve?

This Skill automates creating UI form components with built-in validation, accessible error messages, and submit handling, reducing boilerplate and ensuring consistent UX.

Core Features & Use Cases

• Detect form library: supports common libraries like react-hook-form, Formik, etc., and adapts generated code accordingly.
• Pattern matching: reads an existing form component to align styling and field patterns.
• Generated output: creates field definitions from the description, a validation schema (Zod or Yup), inline error messages with ARIA attributes, loading state on submit, and submission feedback.
• Type safety: provides TypeScript types for form values and the submit handler.
• Placement: places the component in the project's components directory following conventions.

Quick Start

Describe the form requirements and let the tool generate the component.