Form Builder

form-builder

Generate a complete, typed React Hook Form component from a plain-language description.

Source-of-Truth Grounding

Before generating code, always verify API options from local docs:

• Register validation options: ${CLAUDE_SKILL_DIR}/docs/docs/useform/register.mdx
• useForm options (mode, defaultValues, etc.): ${CLAUDE_SKILL_DIR}/docs/docs/useform.mdx — skip the first 79 lines (SelectNav navigation component, content starts at line 80)

MDX Component Glossary

• <TypeText>T</TypeText> or <TypeText pre>T</TypeText> — inline type annotation. Read the text content as the TypeScript type.
• <PrettyObject value={{key: 'type', ...}}/> — renders a type shape. Read the value prop as the type definition.
• <TabGroup buttonLabels={["X", "Y"]}> — tabbed content with alternative views (e.g., TS vs JS). Read all tabs as variants.
• <Admonition type="note|important|tip" title="..."> — callout block. Always read; contains critical rules or caveats.
• <SelectNav options={[...]}> — navigation menu. Skip for content purposes.
• <CodeArea> — code display component. Read the code content within.
• <Popup message="..."> — tooltip hint. The message prop contains supplementary info.
• Ignore: <div style={...}>, import ..., export ... statements.

$ARGUMENTS Handling

Arguments provided → parse field definitions → follow the Code Generation Workflow below.

No arguments → show the following examples and ask the user to describe their form:

Usage examples:
  /react-ko-form:form-builder login form with email and password
  /react-ko-form:form-builder registration with name, email, password (min 8), confirm password, and terms checkbox
  /react-ko-form:form-builder contact form with name, email, phone (optional), and message (textarea)

Describe your form and I'll generate the complete TypeScript component.

Code Generation Workflow

Step 1 — Parse the input

Extract from the natural language description:

• Field names
• Field types (text, email, password, number, checkbox, textarea, select, URL, phone)
• Validation requirements (required, minLength, maxLength, pattern, min, max, validate)
• Optional vs required fields

Step 2 — Read local docs

Read both files to verify current API options before generating:

1. ${CLAUDE_SKILL_DIR}/docs/docs/useform/register.mdx — validation rule options
2. ${CLAUDE_SKILL_DIR}/docs/docs/useform.mdx (from line 80) — useForm options

Step 3 — Generate the component

Produce all of the following in order:

1. TypeScript interface for form field types
2. useForm<T>() hook setup with appropriate options
3. register() calls with validation rules
4. formState.errors error handling for each validated field
5. handleSubmit + onSubmit function
6. Complete JSX form component

Complexity Limit

For forms with more than 8 fields: generate the TypeScript interface and useForm setup first, then ask the user to confirm before generating the full JSX.

Common Validation Patterns

Dynamic Fields (useFieldArray)

useFieldArray has no MDX documentation. When dynamic fields are requested:

1. Read ${CLAUDE_SKILL_DIR}/examples/useFieldArray.ts and ${CLAUDE_SKILL_DIR}/examples/useFieldArrayArgument.ts
2. Key API: useFieldArray({ control, name }) returns { fields, append, remove, prepend, swap, move, insert, update, replace }
3. Always use field.id as key (not array index)
4. Provide full default shape on append(): append({ name: "", quantity: 1 })
5. Register nested fields as: register(`items.${index}.name`)

Output Example

Given: "login form with email and password"

import { useForm } from "react-hook-form";

interface LoginFormValues {
  email: string;
  password: string;
}

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormValues>({ mode: "onBlur" });

  const LoginFormValues) => console.log(data);

  return (
    <form
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          {...register("email", {
            required: "Email is required",
            pattern: { value: /\S+@\S+\.\S+/, message: "Invalid email" },
          })}
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      {/* Repeat the pattern above for each field */}

      <button type="submit">Submit</button>
    </form>
  );
}

Constraints

• Generate basic HTML elements only (no MUI, shadcn, Chakra, or other UI libraries)
• Always use TypeScript with generics (useForm<FormType>)
• Always include error handling for each validated field
• File output: ask the user where to write the file; default to chat output

Cross-Skill References

• Unsure which API to use? Try /react-ko-form:recommend
• Need detailed API usage? Try /react-ko-form:guide <api-name>

Based on react-hook-form v7.x documentation.

Source: hamsurang/react-ko-form — distributed by TomeVault.