form-gen

Generate React form components with TypeScript types and validation schemas.

11|Updated Apr 16, 2026
One-click install
npx skills add https://github.com/berkcangumusisik/claude-code-practices --skill form-gen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: form-gen
Source: https://github.com/berkcangumusisik/claude-code-practices/tree/main/skills/form-gen
Command: npx skills add https://github.com/berkcangumusisik/claude-code-practices --skill form-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about form-gen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I auto-generate React forms with TypeScript and Zod validation?

Auto-generate React forms with TypeScript and Zod validation by describing your form requirements, which produces a fully typed component with validation schemas, accessible error handling, and loading state. The tool creates field definitions, TypeScript types, and places the component in your project's components directory.

Does form generation work with both react-hook-form and Formik?

Form generation works with common libraries like react-hook-form and Formik. The tool detects your existing form library and adapts the generated TypeScript code accordingly, aligning styling and field patterns with your current project conventions.

How do I add accessible error messages to my React form components?

Add accessible error messages to React form components by using a generator that automatically includes ARIA attributes and inline error messages. It creates accessible UI form components with built-in validation, reducing boilerplate and ensuring consistent UX across your web application.

Can I generate TypeScript types and submit handlers for my form?

You can generate TypeScript types for form values and submit handlers automatically. The generator outputs a complete React component with type safety, loading state on submit, and submission feedback, ensuring your form values and handlers are strictly typed.

What is the best way to reduce boilerplate when building validated React forms?

The best way to reduce boilerplate when building validated React forms is automating component creation with built-in validation and accessible error messages. This approach ensures consistent UX by generating Zod or Yup schemas, TypeScript types, and ARIA attributes without manual setup.