home / skills / openclaw / skills / form-gen

form-gen skill

safe

This skill generates complete React form components with validation using react-hook-form and zod, enabling fast, accessible forms with TypeScript support.

npx playbooks add skill openclaw/skills --skill form-gen

Review the files below or copy the command above to add this skill to your agents.

Files (12)

SKILL.md

2.0 KB

---
name: form-gen
description: Generate form components with validation. Use when building forms.
---

# Form Generator

Forms are tedious. Validation is worse. Describe what fields you need and get a complete form component with validation wired up.

**One command. Zero config. Just works.**

## Quick Start

```bash
npx @lxgicstudios/ai-form "signup form with email, password, name"
```

## What It Does

- Generates React form components
- Includes validation with react-hook-form + zod
- Handles error states and accessibility
- Supports TypeScript out of the box

## Usage Examples

```bash
# Signup form
npx @lxgicstudios/ai-form "signup form with email, password, name"

# Checkout form with TypeScript
npx @lxgicstudios/ai-form "checkout form with address and payment" -t

# Contact form to file
npx @lxgicstudios/ai-form "contact form" -o ContactForm.tsx -t
```

## Best Practices

- **Use TypeScript** - catch errors at compile time
- **Show inline errors** - don't wait until submit
- **Add loading states** - show progress during submission
- **Test with keyboard** - forms must be accessible

## When to Use This

- Need a form fast without boilerplate
- Setting up validation patterns
- Prototyping with working forms
- Learning react-hook-form + zod

## Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

**Find more:**
- GitHub: https://github.com/LXGIC-Studios
- Twitter: https://x.com/lxgicstudios
- Substack: https://lxgicstudios.substack.com
- Website: https://lxgic.dev

## Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

```bash
npx @lxgicstudios/ai-form --help
```

## How It Works

Takes your form description, determines the fields and their validation rules, then generates a complete React component using react-hook-form for state management and zod for validation schemas.

## License

MIT. Free forever. Use it however you want.

Overview

This skill generates complete React form components with validation wired up so you can skip boilerplate and get working forms fast. It outputs components using react-hook-form and zod, with TypeScript support and accessible error handling. Use a simple natural-language description and receive a ready-to-use form component.

How this skill works

You provide a short description of the form you need (fields and intent). The skill parses that description, infers field types and validation rules, then emits a React component that integrates react-hook-form for state and zod for schema validation. The output includes inline error states, accessibility attributes, and optional TypeScript typing.

When to use it

Prototyping a form quickly without writing boilerplate
Bootstrapping forms that need consistent validation rules
Learning or adopting react-hook-form and zod patterns
Generating accessible form components with error handling
Creating TypeScript-first form components for a React app

Best practices

Describe fields clearly (name, type, and constraints) for accurate validation
Prefer TypeScript output to catch mismatches at compile time
Show inline errors and loading states during submit flows
Test generated forms with keyboard and screen readers for accessibility
Review and adapt server-side validation to match client-side rules

Example use cases

Create a signup form with name, email, and password in seconds
Generate a checkout form with shipping address and payment fields
Produce a contact form wired to file or API submission handlers
Prototype admin panels with validated input components and TypeScript types
Replace repetitive form boilerplate across multiple React pages

FAQ

Do I need to install anything locally?

You can run the generator with npx; Node.js 18+ is recommended. The generator outputs code you paste into your project and then install runtime dependencies like react-hook-form and zod as needed.

Does the output include TypeScript?

Yes. The skill supports TypeScript output to provide typed form values and zod schemas. Use the TypeScript flag when generating to get .tsx components.

Can I customize validation rules?

Yes. The generator infers sensible rules from your description but you should review and tweak the zod schema in the output to match business logic or server-side constraints.