send-schema-form

0xsend's avatarfrom 0xsend

Standardize typed forms in this repo. Use whenever a feature needs a form or an existing form is being refactored. Prefer SchemaForm + formFields + zod for typed inputs and consistent UI/validation; use react-hook-form Controller only for custom fields that SchemaForm cannot render.

⭐33stars🔀17forks📁View on GitHub🕐Updated Jan 4, 2026
[Code Generation]

When & Why to Use This Skill

The send-schema-form skill is designed to standardize the implementation of type-safe forms within a React repository. By leveraging SchemaForm, Zod, and react-hook-form, it ensures architectural consistency, robust data validation, and a uniform UI across the codebase. It provides a clear workflow for developers to define schemas and render fields, significantly reducing boilerplate and maintenance overhead.

Use Cases

  • New Feature Development: Rapidly implement standardized, type-safe forms for new features using Zod schemas and pre-defined form fields.
  • Form Refactoring: Systematically upgrade legacy or inconsistent forms to a unified architecture to improve code quality and maintainability.
  • Complex Validation Logic: Centralize input validation rules within Zod schemas to ensure consistent error handling and data integrity across the application.
  • UI/UX Standardization: Enforce a consistent look and feel for all form inputs by utilizing the centralized SchemaForm component and shared UI conventions.
namesend-schema-form
descriptionStandardize typed forms in this repo. Use whenever a feature needs a form or an existing form is being refactored. Prefer SchemaForm + formFields + zod for typed inputs and consistent UI/validation; use react-hook-form Controller only for custom fields that SchemaForm cannot render.

Send Schema Form

Overview

Use SchemaForm as the default form primitive in this repo. Define a zod schema with formFields, derive types via z.infer, and render fields through SchemaForm so validation and UI stay consistent.

Workflow

  1. Define a zod schema using formFields (text, textarea, number, boolean, select, note, date, etc.).
  2. Create a form instance with useForm<z.infer>().
  3. Render SchemaForm with schema, defaultValues, props, and a render function for layout.
  4. Submit via form.handleSubmit and handle server errors with form.setError on a field.
  5. Wrap in FormProvider only if child components use useFormContext/useController.

SchemaForm vs Controller

  • Prefer SchemaForm + formFields for standard inputs. It wires validation, error display, and UI conventions in one place.
  • Use Controller/useFormContext when a field is not supported by formFields or needs custom wiring (composite inputs, third-party components, complex formatting). Keep the field in the schema and validate manually or with a form-level resolver if needed.
  • Avoid local state for field values. Let react-hook-form own the field state and use form.watch for derived UI.

Resources

  • references/schema-form-example.tsx: example form using SchemaForm, zod, and typed values.
  • assets/schema-form-template.tsx: skeleton to copy when starting a new form.