recompose: Skill for Claude Code

Overview

TanStack Form manages form state: values, per-field validation, submit lifecycle, and derived flags like canSubmit and isSubmitting. It is headless, so the design system's own controls render the fields, and it is type-safe end to end from defaultValues to onSubmit.

Package: @tanstack/react-form Current version: v1

Installation

pnpm add @tanstack/react-form --save-exact

Core anatomy

One useForm per draft. Fields render through form.Field, submit state renders through form.Subscribe, and the native <form> wires handleSubmit.

import { useForm } from '@tanstack/react-form';

function Draft() {
  const form = useForm({
    defaultValues: { name: '' },
    onSubmit: ({ value }) => {
      store(value);
    },
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <form.Field name="name">
        {(field) => (
          <input
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(event) => field.handleChange(event.target.value)}
          />
        )}
      </form.Field>
      <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
        {([canSubmit, isSubmitting]) => (
          <button disabled={!canSubmit || isSubmitting} type="submit">
            Save
          </button>
        )}
      </form.Subscribe>
    </form>
  );
}

Validation

Validators live on the field, keyed by when they run. A validator answers undefined for a value that stands, or the refusal sentence.

<form.Field
  name="name"
  validators={{
    onChange: ({ value }) => (value.trim() === '' ? 'A gateway needs a name.' : undefined),
  }}
>
  {(field) => (
    <>
      <input value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
      {field.state.meta.isValid ? null : <p role="alert">{field.state.meta.errors.join(' ')}</p>}
    </>
  )}
</form.Field>