form-generator

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

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/sernstberger/base-joy --skill form-generator
Or copy as Structured Prompt for Agent▼
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.