form-generator

Generate type-safe validated forms with base-joy Connected components and react-hook-form.

Updated Aug 27, 2026

Search Tags:#validation #form #type-safety #react-hook-form #ConnectedInput

Ready to run

npx skills add https://github.com/sernstberger/base-joy --skill form-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: form-generator
Source: https://github.com/sernstberger/base-joy/tree/main/.claude/skills/form-generator
Command: npx skills add https://github.com/sernstberger/base-joy --skill form-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate type-safe, validated forms using base-joy's Connected components with react-hook-form integration.

Core Features & Use Cases

ConnectedForm wrapper to house all form controls with strong type-safety.
Flattened validation props for simple usage and custom messages for advanced validation.
Type-safe data handling with generic FormData types.
Available components include inputs, textareas, selects, radios, checkboxes, sliders, and more.

Quick Start

Create a ConnectedForm with a defaultValues object, hook up onSubmit, and add a few ConnectedInput/ConnectedSelect components.

Frequently Asked Questions about form-generator

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

FAQPage Schema

How do I build type-safe forms with validation in React?▼

Type-safe forms in React combine TypeScript generics for form data with validation libraries like react-hook-form. This Skill generates validated forms using Connected components that enforce type safety at compile time and runtime, eliminating manual prop wiring and reducing validation errors.

Can I use react-hook-form with base-joy components?▼

Yes. This Skill integrates react-hook-form with base-joy's Connected components, which are pre-wired to work together. The ConnectedForm wrapper and connected inputs, selects, and checkboxes handle form state and validation automatically without manual controller setup.

How do I add custom validation messages to form fields?▼

Connected components support flattened validation props that accept both built-in and custom validation rules with custom error messages. Pass validation config directly to each component; the form handles message display and state updates.

What form components are available beyond text inputs?▼

The Skill provides connected versions of inputs, textareas, selects, radios, checkboxes, sliders, and additional components. All are type-safe and integrated with react-hook-form validation and ConnectedForm state management.

Do I need to manually wire form state and validation logic?▼

No. The ConnectedForm wrapper and connected components handle form state, validation, and error display automatically. Set defaultValues, define onSubmit, then add components—no manual controller or listener code required.